mod Pitch4

100%

✓ Published0🌍 Public

Last edited Dec 7, 2018

Created on Nov 7, 2018

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

83% match

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

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

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

76% match

Loading thumbnail…

Pitchers

Pitchers is a data-visualization explorer for baseball pitcher statistics, showing how individual performance metrics vary across a dataset. It displays a grid of small bar charts, one for each statistical category, and allows users to brush along one or more dimensions to filter the data. A table of matching pitchers updates in real time, presenting the filtered records in a plain-text format. The visualization is built with D3 v4, using `d3.scaleLinear`, `d3.axisBottom`, and `d3.brushX` to create the interactive charts and brushes, with data scraped from Retrosheet.

663anp3ca

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

74% match

Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

MMbrownshoes

72% match