Fork of D3 Soccer Starter

100%

Fork of D3 Soccer Starter

✓ Published0🌍 Public

Last edited May 27, 2022

Created on May 18, 2022

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.

AI-generated description

POC for https://github.com/probberechts/d3-soccer

ISC Licensed

Similar vizzes

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

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

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

76% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows football statistics as a line chart, plotting goals scored against matches played for a dataset loaded from a CSV file. The chart uses D3 v6’s `scalePoint` for the x-axis (matches played) and `scaleLinear` for the y-axis (goals), with a line generator drawing the trend. Axes are rendered via `axisLeft` and `axisBottom`, while the SVG is created and manipulated with `select` and `append`. The data, sourced from a remote CSV URL, is parsed to numeric values before rendering, and the final line is styled with a steelblue stroke.

Ssujitrayudu01@gmail.com

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

74% match

Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This dashboard visualizes football player statistics from the Kaggle "Top Football League Scorers" dataset, showing how metrics like shots, goals, and expected goals evolve. The view combines a line chart tracking individual players’ performance over time with an interactive dropdown menu to switch between statistical measures. Built with React and D3, the implementation uses `scaleTime`, `scaleLinear`, and `flatGroup` to structure the data, while `line` generators and D3's `transition` system animate hover effects and emphasis on the plotted paths.

Eeschuman20@gmail.com

73% match

Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This fork of the Football Goal Scorers Dashboard visualizes player performance over time as an animated line chart. It uses D3.js to render a multi-line chart, filtering the dataset to show only players with five or more recorded seasons. The chart plots goals, shots, and other metrics against the year, with an interactive dropdown menu to switch the y-axis metric. It utilizes D3's `scaleTime` and `scaleLinear` for axes, `flatGroup` to organize data by player, and transitions to animate changes. The data comes from the Kaggle Top Football Leagues Scorers dataset.

Eeschuman20@gmail.com

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

73% match