Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Reusable D3 Scatter Plot with symbols

Public visualization

Viewing a saved revision (read-only)

b07bca66fa314ce88d6539ed1bfc359f

Reusable D3 Scatter Plot with symbols

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