Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Reusable Scatter Plot with menu

Public visualization

Viewing a saved revision (read-only)

b2f68b25f964482b9cbba3a2a5d6c879

Animated Reusable Scatter Plot with menu

0 stars0🌍 Public
SShannon Teoh
Last edited May 26, 2024
Created on May 26, 2024

This example demonstrates an animated scatter plot of the Iris dataset, using D3 v6 with React. The plot cycles through different x-axis variables (petal length, petal width, sepal length, sepal width) every two seconds, with circles transitioning smoothly via `selection.join` and `transition`. Species are encoded by distinct symbols from `d3.symbols` and `scaleOrdinal`. The reusable chart function exposes setters like `.xValue()` and `.yValue()` to update the visualization, while axes are redrawn using `axisLeft` and `axisBottom`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.