Skip to main content
100%

Reusable D3 Scatter Plot with symbols

✓ Published1🌍 Public
JJuanmaBV
Last edited Oct 27, 2022
Created on Oct 27, 2022

This example presents a reusable scatter plot of the Iris Dataset, with each species represented by a distinct D3 symbol (circle, square, or triangle) and color. Users can cycle through different x-axis variables—petal width, sepal width, petal length, or sepal length—by clicking a button, triggering a smooth transition on all marks using `d3.transition`. The chart is built with D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisBottom`/`axisLeft` for rendering. Data is loaded via `d3.csv` from a GitHub Gist, and the SVG output animates axis and symbol updates over one second.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes