Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Connected Scatterplot: Playstyle Change

Public visualization

Viewing a saved revision (read-only)

63bde3c5d1df46b283c3aa9741ecdf6a

Connected Scatterplot: Playstyle Change

0 stars0🌍 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.