mod Pitch

100%

✓ Published1🌍 Public

Last edited Nov 7, 2018

Created on Oct 17, 2018

Forked from Pitch

This interactive visualization maps every shot taken during the 2018 FIFA World Cup final between France and Croatia onto a scaled soccer pitch. Each shot is represented by a circle and an arrowed line showing its start and end location, colored by team. Clicking a shot reveals a freeze frame of player positions on the pitch, while hovering over a legend entry filters shots by team. Built with D3 v5, it uses `scaleOrdinal`, SVG markers for arrows, and a custom color legend with interactive click and opacity filtering.

AI-generated description

Arrow code from: https://codepen.io/zxhfighter/pen/wWKqqX

MIT Licensed

Similar vizzes

Loading thumbnail…

mod Pitch2

The visualization shows shot locations and arrow trajectories for the 2018 FIFA World Cup final between France and Croatia on a scaled soccer pitch. Clicking a shot reveals its freeze-frame player positions. A slider filters shots by match minute, and clicking the legend toggles team visibility. Built with D3 v5, it uses SVG rendering, custom modules for pitch drawing and shot plotting, and drag interactions to filter data.

MMihir Sawant

96% match

Loading thumbnail…

mod Pitch3

This interactive visualization plots shot locations and player freeze frames from a football match, with shot arrows colored by team and a color legend to filter by France or Croatia. A double-handled slider filters shots by minute, and clicking a shot displays player and attempt details in a stats box. It uses D3 v5's `select`, `scaleOrdinal`, and `arc` APIs, rendering SVG elements dynamically with animated updates.

MMihir Sawant

88% match

Loading thumbnail…

mod Pitch4

This visualization displays football (soccer) shot data from a JSON dataset, plotting each shot's starting location and trajectory on a scaled pitch. Users can filter shots by team via a color legend or by time range using a dual-handle slider. Clicking a shot reveals player and shot details in a stats box, and a freeze-frame of player positions at the shot's moment can be shown. The visualization is built with D3 v5, using SVG elements, a custom slider with `d3.drag`, and arrow markers to indicate shot direction.

MMihir Sawant

79% match

Loading thumbnail…

Shotplot

This interactive SVG visualization plots every shot taken by a single soccer player across a season, with each shot positioned on a pitch diagram and colored by outcome (goal, blocked, off target, etc.). Hovering over a shot reveals a tooltip with the opponent, match minute, and home/away status. The visualization uses D3.js version 3.5 to draw the pitch, render the shot data points, and handle the d3-tip tooltips, with the data displayed in a static text file.

SSaintat1

74% match

Loading thumbnail…

Fork of D3 Soccer Starter

This visualization displays every shot taken during a Brazil–Belgium soccer match on a pitch diagram, with markers colored by outcome: green for successful goals, gray for failures, and red for own goals. Lines connect each shot’s start and end coordinates. Built with D3.js and the d3-soccer pitch component, it uses scaleLinear for coordinate mapping and scaleOrdinal for outcome colors. The underlying data includes player names and team information, presented via hover tooltips.

Nnatecoursey-mck

74% match

Loading thumbnail…

Pitch

An SVG rendering of a soccer pitch, drawn to scale with D3.js v5, displays the field’s markings including the halfway circle, corner arcs, goal areas, six-yard boxes, and penalty spots. The visualization uses D3’s `arc` generator to create the curved elements and `line` and `rect` primitives for straight lines and the field base. A green rectangle represents the playing surface, with white markings for official dimensions and black strokes for the goals. The code demonstrates a static, non-interactive layout built with SVG attributes and D3 selections.

MMihir Sawant

72% match

Loading thumbnail…

Soccer Play-by-Play

This visualization animates soccer play-by-play data from a match between Belgium and Brazil, showing passes and dribbles as moving circles and trailing lines on a pitch. Each action is color-coded by team, with the current action labeled above the field and results like failures or offsides distinguished by color. The animation advances through time using d3.interval, updating the circle position every 800 milliseconds and drawing lines for the five most recent actions. It uses the d3-soccer pitch layout, d3.scaleLinear for coordinates, and d3.transition for smooth movement.

Nnatecoursey-mck

72% match

Loading thumbnail…

Pitch

This example draws a soccer pitch using D3.js version 5, with SVG rendering. It constructs the field markings—including the halfway circle, corner arcs, penalty area, and six-yard box—by combining D3’s `arc()` generator for curved paths and appended `rect` and `line` elements for straight boundaries. The layout uses hardcoded dimensions scaled by a factor of six, and all shapes are filled with white strokes atop a green background, creating a static, schematic visualization.

MMihir Sawant

70% match