Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Reusable Scatter Plot

Public visualization

Viewing a saved revision (read-only)

814bfd797b464a219a16db73948bb53c

Animated Reusable Scatter Plot

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

This example demonstrates an animated scatter plot built with React and D3, visualizing the classic Iris dataset. The plot cycles through four different variables (petal and sepal length and width) every two seconds, animating the positions of data points along both axes using `transition().delay()` for a cascading effect. It leverages D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs, rendering as an SVG with smooth transitions. The reusable component pattern allows dynamic updates to the x-value mapping, showcasing a flexible approach to interactive data exploration.

AI-generated description

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

See also React Starter.