Show HN: Công cụ trực quan hóa đường chuyền bóng đá được তৈরি bằng Three.js
(statsbomb-3d-viz.vercel.app)- Chưa chọn sự kiện nào
- Áp dụng bộ lọc
- Xóa bộ lọc
- Đặt lại camera
- Công cụ trực quan hóa 3D StatsBomb
- Dán URL của tệp dữ liệu sự kiện StatsBomb
- Tải dữ liệu
- Tải ví dụ
- Ví dụ: @c_mnzs / gh: @carlos-menezes
Tổng hợp của GN⁺
- Công cụ này cung cấp khả năng trực quan hóa dữ liệu sự kiện StatsBomb ở dạng 3D
- Người dùng có thể nhập URL của tệp dữ liệu sự kiện để tải dữ liệu
- Có thể chọn dữ liệu mong muốn thông qua tính năng áp dụng hoặc xóa bộ lọc
- Tính năng đặt lại camera cho phép đưa dữ liệu trực quan hóa trở về trạng thái ban đầu
- Công cụ này có thể hữu ích cho những người quan tâm đến phân tích và trực quan hóa dữ liệu
1 bình luận
Ý kiến trên Hacker News
Lúc nào cũng thấy vui khi thấy người ta dùng dữ liệu miễn phí để làm ra thứ hay ho. Nếu muốn tự thử, có hàng nghìn bộ dữ liệu trận đấu bóng đá miễn phí
https://github.com/statsbomb/open-data
Trong dữ liệu bóng đá còn có cả bộ thu thập lại mọi trận đấu của Lionel Messi, và bên bóng bầu dục Mỹ thì họ đã bắt đầu làm điều tương tự với Tom Brady
https://github.com/statsbomb/amf-open-data
Với phần trực quan hóa dữ liệu, tôi cần dữ liệu chi tiết hơn, nhưng khối lượng công việc khá lớn
[1] https://tombradytds.com
[2] https://tombradytds.com/viz.php
Giao diện rất tuyệt. Nếu muốn đổi sang dữ liệu khác thì có hướng dẫn và có thể tự tìm JSON gốc, nên sẽ tốt nếu cung cấp một ví dụ tự làm
Sau khi tải thử, tôi vẫn chưa hiểu lắm vì sao dùng three.js. Vì chiều cao đường chuyền cũng được hiển thị bằng heatmap. Đường chuyền của whoscored trông trực quan hơn
Rất hay. Tôi thích trực quan hóa 2D. Vài năm trước tôi đã làm https://pubg.sh, và định dạng telemetry thật ra khá giống
Tôi biết các đội PUBG chuyên nghiệp dùng công cụ của tôi để phân tích sau trận, nên tôi tò mò không biết các đội bóng đá chuyên nghiệp có công cụ nội bộ tương tự không. Có vẻ có rất nhiều yếu tố có thể theo dõi và trực quan hóa
Làm tốt lắm. Nhìn các bình luận khác thì có vẻ một trong những lý do chọn dự án này là để học three.js, nhưng cũng đáng cân nhắc deck.gl hoặc kepler.gl
Chúng cung cấp các primitive trực quan hóa ở mức cao hơn và được tối ưu hiệu năng cho các tập dữ liệu lớn. Cũng có thể dễ thử nhiều kiểu trực quan hóa hơn, hoặc chồng nhiều kiểu lên nhau
Cả hai package đều cho phép tạo prototype rất nhanh. kepler.gl có thể tạo được mockup sơ bộ mà không cần code, nên có lẽ không tốn quá nhiều công để thử cách tiếp cận này
Hay quá. Cảm ơn đã chia sẻ. Có thể thêm animation theo thời gian không? Tôi muốn xem diễn biến trận đấu theo kiểu màu dần mờ đi
Tôi cũng tò mò cách tốt nhất để rút ra insight từ dữ liệu này là gì. Khám phá có vẻ là bước đầu tiên, nhưng nếu thêm được giá trị lên trên đó thì sẽ rất tuyệt
Tôi tò mò màu sắc có ý nghĩa gì. Có vẻ chỉ có các đường chuyền hoàn thành, còn những đường chuyền bị chặn thì bị bỏ qua? Nếu hiển thị heatmap đường chuyền thay vì từng vector riêng lẻ thì có thể cho một góc nhìn khác
Tôi cũng tự hỏi liệu bạn có cân nhắc hiển thị hướng chuyền bằng điểm bắt đầu/kết thúc, hoặc bằng mũi tên nếu không quá rối không. Cũng muốn biết có hiển thị tốc độ đường chuyền không
Có lẽ cũng có thể có thống kê tổng hợp theo cầu thủ hoặc đội. Ví dụ số đường chuyền, tốc độ trung bình, tỷ lệ thành công, mức độ tập trung/phân tán trong đội hình, cầu thủ nhận bóng nhiều nhất/ít nhất, cầu thủ nhận bóng từ nhiều/ít cầu thủ nhất, thống kê theo vị trí, v.v. Tôi xin dừng ý tưởng ở đây. Trực quan hóa rất đẹp
Tôi không rõ màu đường được quyết định thế nào, nhưng khi lọc theo đội và một cầu thủ cụ thể thì đường gần như không thấy, đến mức phải tự đi tìm
"Load Example" rất hữu ích để hiểu nó làm gì. Bản build rất tuyệt. Tôi cũng đồng ý với yêu cầu giải thích màu sắc có ý nghĩa gì
Nếu kết hợp với video camera trận đấu theo thời gian thực thì có thể khá mạnh[0], kiểu như làm nổi bật các chi tiết trong trận
[0] https://x.com/skalskip92/status/1816461263829889238
Trông hay đấy. Nếu có thể phát lại các đường chuyền theo thứ tự thời gian thì có lẽ sẽ cảm nhận được nhịp trận đấu
Tôi đã thử tải file nhưng thất bại. Đã thử nhiều định dạng URL
https://github.com/statsbomb/open-data/…
https://github.com/statsbomb/open-data/…
15956.json
Sẽ tốt hơn nếu ô nhập có sẵn ví dụ về định dạng mong đợi, hoặc thông báo lỗi nói rõ hơn vì sao file không tải được. Khó biết là do URL của tôi hay do vấn đề nội bộ
Dù vậy đây vẫn là demo rất thú vị, và như airstrike đã gợi ý(https://news.ycombinator.com/item?id=41096570), engine cốt lõi đã có rồi nên nếu có thêm nhiều bộ lọc hơn thì chắc sẽ hấp dẫn hơn nhiều
Cái này sẽ chạy được