Viewing a saved revision (read-only)
9565194ebbeb42ffb38b5645ecc934b8
Exercise Animate Dynamic D3 scatterplot
This interactive scatterplot animates through different iris flower measurements every three seconds, cycling between petal width, sepal width, petal length, and sepal length on the x-axis. Using d3.v7 with SVG rendering, circles smoothly transition positions via `selection.join`, which handles entering circles that grow from radius zero, updating circles with delayed staggered transitions, and removing exiting circles. The x-axis and its label also animate simultaneously using `transition().duration(3000)`. The iris dataset is loaded as CSV and parsed into numeric values for visualization.
AI-generated descriptionExample Dynamic scatterplot
https://www.youtube.com/watch?v=xkBheRZTkaw To 14:21
Reference
Documentation on animation form new/changed objects: https://observablehq.com/@d3/selection-join
In example there are cases for
- enter new objects
- update existing objects
- exit removed objects