Show HN: เครื่องมือสร้างภาพการจ่ายบอลที่สร้างด้วย Three.js

 (statsbomb-3d-viz.vercel.app)
1 คะแนน โดย GN⁺ 2024-07-30 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ยังไม่ได้เลือกอีเวนต์
  • ใช้ตัวกรอง
  • ล้างตัวกรอง
  • รีเซ็ตกล้อง
  • เครื่องมือแสดงผล 3D ของ StatsBomb
  • วาง URL ของไฟล์ข้อมูลอีเวนต์ StatsBomb
  • โหลดข้อมูล
  • โหลดตัวอย่าง
  • ตัวอย่าง: @c_mnzs / gh: @carlos-menezes

สรุปโดย GN⁺

  • เครื่องมือนี้มีความสามารถในการแสดงผลข้อมูลอีเวนต์ของ StatsBomb แบบ 3D
  • ผู้ใช้สามารถป้อน URL ของไฟล์ข้อมูลอีเวนต์เพื่อโหลดข้อมูลได้
  • สามารถเลือกข้อมูลที่ต้องการได้ด้วยการใช้หรือล้างตัวกรอง
  • สามารถรีเซ็ตกล้องเพื่อทำให้ข้อมูลที่แสดงผลกลับสู่สถานะเริ่มต้นได้
  • เครื่องมือนี้อาจเป็นประโยชน์สำหรับผู้ที่สนใจการวิเคราะห์และการแสดงผลข้อมูล

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-07-30
ความคิดเห็นจาก Hacker News

  • ชอบเสมอเวลาเห็นคนเอาข้อมูลฟรีมาสร้างอะไรเจ๋ง ๆ ถ้าอยากลองทำเองก็มี ข้อมูลการแข่งขันฟุตบอลฟรี อยู่หลายพันรายการ
    https://github.com/statsbomb/open-data
    ในชุดข้อมูลฟุตบอลยังมีโปรเจ็กต์ที่รวบรวม ทุกแมตช์ของ Lionel Messi ใหม่ทั้งหมดด้วย และฝั่งอเมริกันฟุตบอลก็กำลังเริ่มทำแบบเดียวกันกับ Tom Brady
    https://github.com/statsbomb/amf-open-data

    • เมื่อราว ๆ ปี 2015 ผมเริ่ม เข้าสู่โลกการเขียนโปรแกรม ได้ก็เพราะ StatsBomb กับเครือข่ายที่กว้างขึ้นของ Twitter
    • น่าสนใจมาก ผมเองก็กำลังทำโปรเจ็กต์คล้าย ๆ กันที่ติดตามทุกทัชดาวน์ของ Tom Brady แบบทำเองอยู่ เลยคงต้องตามดู ข้อมูล Tom Brady ต่อไป
      ฝั่ง data visualization ต้องการข้อมูลที่ละเอียดกว่านี้ แต่ปริมาณงานก็ค่อนข้างมาก
      [1] https://tombradytds.com
      [2] https://tombradytds.com/viz.php

  • อินเทอร์เฟซยอดเยี่ยมมาก ถ้าอยากเปลี่ยนไปใช้อย่างอื่นก็มีคำแนะนำและหา JSON ต้นฉบับเองได้อยู่แล้ว เลยคิดว่าน่าจะดีถ้ามี ตัวอย่างให้ลองโดยตรง สักอัน
    แต่หลังจากโหลดมาดูแล้ว ผมยังไม่ค่อยเข้าใจว่าทำไมต้องใช้ three.js เพราะความสูงของการจ่ายบอลก็แสดงเป็น heatmap อยู่แล้ว เส้นทางการจ่ายของ whoscored ดูเข้าใจง่ายกว่า

  • เจ๋งมาก ผมชอบ visualization แบบ 2D เมื่อหลายปีก่อนผมทำ https://pubg.sh ขึ้นมา ซึ่งฟอร์แมต telemetry ก็คล้ายกันพอตัว
    ผมรู้ว่าทีม PUBG ระดับโปรใช้เครื่องมือของผมวิเคราะห์หลังแข่ง เลยสงสัยว่าทีมฟุตบอลอาชีพก็น่าจะมีเครื่องมือภายในคล้าย ๆ กันไหม เพราะดูมีสิ่งให้ติดตามและทำ visualization ได้เยอะมาก

    • ตอนที่ผมเล่น PUBG หนัก ๆ เคยใช้แอปนี้หลายครั้งเลย ยินดีที่ได้เจอ

  • ทำออกมาได้ดีมาก จากคอมเมนต์อื่นดูเหมือนหนึ่งในเหตุผลที่เลือกโปรเจ็กต์นี้คือการเรียนรู้ three.js แต่ deck.gl หรือ kepler.gl ก็น่าลองเหมือนกัน
    พวกนี้มีองค์ประกอบ visualization ระดับสูงกว่าให้ใช้ และปรับแต่งประสิทธิภาพมาสำหรับชุดข้อมูลขนาดใหญ่แล้ว คุณจะลองรูปแบบ visualization หลายแบบหรือซ้อนหลายแบบเข้าด้วยกันได้ง่ายกว่า
    ทั้งสองแพ็กเกจช่วยให้ทำต้นแบบได้เร็วมาก และ kepler.gl อาจสร้าง mockup คร่าว ๆ ได้โดยไม่ต้องเขียนโค้ดด้วย ดังนั้นการลองแนวทางนี้น่าจะไม่ต้องลงแรงมากนัก

  • เยี่ยมมาก ขอบคุณที่แชร์ animation ตามเวลา เพิ่มได้ไหม? อยากเห็นแมตช์ค่อย ๆ ดำเนินไป โดยให้สีค่อย ๆ จางหาย
    อีกอย่างผมก็สงสัยว่าทางที่ดีที่สุดในการดึง insight จากข้อมูลชุดนี้คืออะไร รู้สึกว่าการสำรวจเป็นแค่ก้าวแรก แต่ถ้าเพิ่มคุณค่าต่อจากนั้นได้ก็น่าจะดีมาก

  • อยากรู้ว่าสีแต่ละสีหมายถึงอะไร เหมือนว่าจะมีเฉพาะการจ่ายสำเร็จ และการจ่ายที่โดนสกัดถูกตัดออกไปหรือเปล่า? ถ้าแสดงเป็น heatmap ของการจ่ายบอล แทนเวกเตอร์รายเส้นก็น่าจะให้มุมมองอีกแบบ
    อยากรู้ว่าเคยคิดจะแสดงทิศทางการจ่ายด้วยจุดเริ่ม/จุดจบ หรือถ้าไม่รกเกินไปก็ใช้ลูกศรไหม แล้วมีการแสดงความเร็วของการจ่ายหรือเปล่า
    น่าจะทำสถิติสรุปรายผู้เล่นหรือรายทีมได้ด้วย เช่น จำนวนการจ่าย ความเร็วเฉลี่ย อัตราสำเร็จ ระดับการกระจุก/กระจายภายในทีม ใครรับบอลมากที่สุด/น้อยที่สุด ใครรับบอลจากผู้เล่นที่จ่ายมากที่สุด/น้อยที่สุด รวมถึงสถิติแยกตามตำแหน่ง พอแค่นี้ก่อนนะ เป็น visualization ที่ยอดเยี่ยมมาก

    • ตอนนี้มีเอนจินหลักพร้อมแล้ว เหลือแค่ลงมือทำ ขอบคุณสำหรับไอเดีย

  • ผมไม่แน่ใจว่าสีกำหนดอย่างไร แต่พอกรองตามทีมและผู้เล่นเฉพาะแล้ว เส้นแทบมองไม่เห็นเลย จน ต้องเพ่งหาด้วยตัวเอง

  • "Load Example" ช่วยให้เข้าใจได้มากว่ามันทำอะไร เจ๋งมาก และผมก็เห็นด้วยกับ คำขอให้อธิบายเรื่องสี
    ถ้าเอาไปรวมกับภาพวิดีโอกล้องถ่ายทอดสดของการแข่งขันแบบเรียลไทม์ก็น่าจะทรงพลังมาก[0] เช่น ใช้เน้นรายละเอียดระหว่างเกม
    [0] https://x.com/skalskip92/status/1816461263829889238

  • ดูเจ๋งดี ถ้าสามารถ เล่นการจ่ายย้อนตามลำดับเวลา ได้ ก็น่าจะช่วยให้สัมผัสจังหวะของเกมได้มากขึ้น

  • ผมพยายามโหลดไฟล์แต่ไม่สำเร็จ ลองหลายรูปแบบ URL แล้ว
    https://github.com/statsbomb/open-data/…
    https://github.com/statsbomb/open-data/…
    15956.json
    น่าจะดีถ้ามีตัวอย่างรูปแบบที่ช่องกรอกคาดหวังไว้ใส่มาให้ก่อน หรือมีข้อความ error ที่บอกชัดขึ้นว่าทำไมไฟล์ถึงโหลดไม่ได้ จะได้รู้ว่าเป็นปัญหาที่ URL ของผมหรือปัญหาภายใน
    ถึงอย่างนั้นก็ยังเป็นเดโมที่น่าสนใจมาก และอย่างที่ airstrike เสนอไว้(https://news.ycombinator.com/item?id=41096570) เมื่อมีเอนจินหลักพร้อมแล้ว ถ้า มีตัวกรองเพิ่มขึ้นอีก ก็น่าจะน่าสนใจกว่าเดิมมาก