Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3Animated Reusable D3 Scatter Plot

Public visualization

Viewing a saved revision (read-only)

6034a03d0926422f8cc6d3a85700fec2

D3Animated Reusable D3 Scatter Plot

0 stars0🌍 Public
KKamalabot
Last edited Jul 11, 2022
Created on Jul 11, 2022

A reusable D3 scatter plot animates the Iris dataset, cycling through four numeric columns as the x-axis variable every three seconds. Written with D3 v6, the chart uses a `scatterPlot` closure function with configurable accessors for width, height, data, margins, and radius. It renders SVG circles with `selection.join` for enter, update, and exit transitions, growing new points from radius zero and staggering updates with `transition.delay`. Axes update smoothly using `axisLeft`, `axisBottom`, `scaleLinear`, and `extent`. The data loads from a remote CSV, parsed with numeric coercion.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.