Skip to main content
SimilarExport ZIP
100%

Connected Scatterplot: Playstyle Change

✓ Published0🌍 Public
SSimon Hackbert
Last edited Nov 16, 2022
Created on Nov 2, 2022
Forked from D3 Starter

This example shows how a soccer team’s passing playstyle changed over time, allowing viewers to compare four pass-related statistics across months. A connected scatterplot displays the trend as a line with circular markers, and a dropdown menu lets users switch between metrics, triggering a smooth 1-second transition of the line and dots. The visualization uses d3.csv to load external data, d3.scaleBand and d3.scaleLinear for axes, and d3.line with selection.transition to animate the updated path and circles in an SVG.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example adapts a reusable D3 scatter plot to visualize soccer statistics, cycling through three different variable pairings every three seconds. It uses `d3.csv` to load a dataset containing goals for and against, wins, draws, losses, and points. The animation smoothly updates the plot's axes and circle positions by re-binding data and calling `axisLeft` and `axisBottom` within a setInterval loop. The SVG circles are rendered with a fixed radius, and the chart adjusts to the full window size.

Nnagasai.mandalapu@gmail.com
77% match
Loading thumbnail…

Change to Bar

This interactive scatter plot maps a dataset of football matches, plotting Perfect Match values against a variety of derived attributes. Switching the X or Y axis via drop-down menus smoothly transitions the points to new positions, using an animated delay. Built with d3 v6, the visualization uses the `selection.join` API to efficiently manage circle and axis elements, while `scaleLinear` and `transition` handle the coordinate mapping and animation. The Iris Dataset URL is referenced, though the plotted data originates from a provided CSV source.

TThaverman
75% match
Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes top football league scorers using D3.js, letting users explore relationships between performance metrics like goals, shots, expected goals (xG), and minutes played. Three dropdown menus allow selection of the x-axis variable, y-axis variable, and season year (2016–2020). The chart renders circles colored by league, with player labels on hover and a color legend that supports filtering by league via click, with double-click to clear. All visual elements—including axes, scatter points, and legend—update in response to user input, creating a dynamic, animated exploration of the dataset. The visualization is built with D3 v7 and is responsive to container resizing.

Eeschuman20@gmail.com
75% match
Loading thumbnail…

Fork of Player Statics using reusable scatter plot

This interactive scatter plot analyzes cricket player statistics, cycling through four attribute pair comparisons such as Runs versus Strike Rate and Matches Played versus Player of the Match. Built with D3.js v7, it renders SVG circles with smooth animated transitions between datasets, using `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is fetched via `d3.csvParse` from a remote gist, with a hover tooltip displaying player details.

Ssdarsi2404@gmail.com
75% match
Loading thumbnail…

Ch 3

A React and D3.js visualization presents soccer team statistics from a CSV file as a scatterplot-style chart. Each team is represented by a circle, with the team name labeled beneath it. D3 loads the data and binds it to SVG circle elements, while a control panel generates buttons for each numeric column. Clicking a button uses `d3.scaleLinear` to remap the circle radius based on that stat, such as wins or points, allowing dynamic comparison across teams.

YYasara Peiris
74% match
Loading thumbnail…

Fork of Interactive Scatter Plot

This animated scatter plot explores top football league scorers, showing relationships between metrics like goals, shots, and expected goals across seasons. Users can select different x- and y-axis variables and filter by year via dropdown menus. D3 scales and axes map the data, while colored points represent leagues, with a color legend that responds to clicks and double-clicks to filter points by hovering. The visualization uses D3’s `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and SVG `circle` elements, with data sourced from a Kaggle dataset on football scorers.

Gg_beck@coloradocollege.edu
74% match
Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000
74% match
Loading thumbnail…

Fork of Scatter Plot With Menus

This interactive scatter plot visualizes Top Football League Scorers data, allowing users to compare player statistics across different metrics and years. Three dropdown menus let viewers select the x-axis variable, y-axis variable, and season year, with the chart updating to display filtered data points. Each circle is colored by player club using `scaleOrdinal` with `schemeCategory10`, and includes hover tooltips showing player names. The visualization uses D3.js with `scaleLinear` for axes, responsive axes from `@curran/responsive-axes`, and a custom color legend with click-to-highlight functionality.

Eeschuman20@gmail.com
74% match