Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Learn Animated Reusable Scatter plot

Public visualization

Learn Animated Reusable Scatter plot

0 stars1🌍 Public
Ccoderhh
Last edited Jan 21, 2024
Created on Jan 21, 2024

This example demonstrates an animated, reusable scatter plot built with React and D3, rendering as an SVG. It visualizes the classic Iris dataset, cycling every three seconds between four numerical columns—petal width, sepal width, petal length, and sepal length—to update the x-axis mapping. Using a custom `scatterPlot` function with D3 scales and transitions, circles animate smoothly to new positions, while axes update with `d3.axisBottom` and `d3.axisLeft`. The code employs D3’s data join with enter, update, and exit selections, plus `setInterval` to drive the periodic column changes.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed