Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Exercise 9 Animate Dynamic D3 scatterplot

Public visualization

Viewing a saved revision (read-only)

909922e222c84387bcc209c23e42aae5

Exercise 9 Animate Dynamic D3 scatterplot

1 star0🌍 Public
BBart van Pelt
Last edited Jan 20, 2023
Created on Jan 20, 2023

This example shows an animated scatterplot of the Iris dataset, cycling through different numeric columns on the x-axis every three seconds. The code uses D3 v7 with SVG rendering and the `selection.join` pattern to handle enter, update, and exit transitions. Circles enter by growing from radius zero, update their positions via synchronized `transition` objects, and exit by removal. The x-axis and label also animate through D3 transitions, while scales use `d3.scaleLinear` and axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

Example Dynamic scatterplot

https://www.youtube.com/watch?v=xkBheRZTkaw To 14:21

https://youtu.be/U8x862hBk4s

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