Tell us what works and what could be better. We read every submission.
@KRE87·2 public vizzes
This visualization shows pass networks between starting players during the first half of a Real Madrid vs. Elche match, plotted on an SVG soccer field. Player positions are fixed coordinates representing their average location, and curved links between them indicate completed passes, with stroke width scaled by pass frequency. Built with D3.js and the d3.rollup plugin, the code loads player and pass data from a JSON file, renders the field from a separate SVG file, and adds interactive tooltips on hover that highlight incoming and outgoing passes. The animation shows the pass network’s structure dynamically as users explore individual players.
This visualization shows pass connections among Real Madrid's starting players during the first half of their September 23, 2014 match against Elche. Player positions appear as circles overlaid on a soccer pitch, with curved arcs linking them; arc thickness reflects the number of passes between two players. Hovering over a player highlights outgoing passes in blue and incoming passes in orange, while a tooltip displays the player’s name, number, and position. The code uses D3.js and the `d3.rollup` library to aggregate pass data from a JSON file, rendering the pitch from an SVG template and animating interactions via D3 transitions.