mod Pitch2

100%

✓ Published1🌍 Public

Last edited Nov 6, 2018

Created on Oct 18, 2018

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

mod 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.

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

90% 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

83% 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

73% 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

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

71% 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

71% match

Loading thumbnail…

Fork of Dashboard - Final Project - FIFA 19 Dataset

This dashboard visualizes the FIFA 19 dataset, showing player distribution across countries and clubs. A world map displays the number of players per nationality using circles sized with `d3.scaleSqrt`, with zoom and brushing interactions. A Sankey diagram connects nationalities to clubs, using `d3.sankey` with draggable nodes and tooltips. The visualization uses React, D3 v4, and TopoJSON, rendering as SVG.

PPriscylla Silva

64% match