Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Scatterplot V - transitions

Public visualization

Viewing a saved revision (read-only)

30bf5e13eae44527ba5f448b382a3f13

D3 Scatterplot V - transitions

0 stars1🌍 Public
MMarvin Frede
Last edited Oct 2, 2023
Created on Oct 2, 2023

This example demonstrates animated transitions in a D3.js scatterplot using the Iris flower dataset. Every two seconds, the plot cycles through different measurements—sepal length, sepal width, petal length, and petal width—as the x-axis value, causing circles to smoothly relocate with d3.transition over 500 milliseconds. The reusable scatterPlot function employs d3.scaleLinear for both x and y axes, dynamically updating domains and ranges as data mappings change, with d3.axisBottom and d3.axisLeft rendering the axis labels.

AI-generated description

Learning about

  • scaleLinear (and some other scale types)
  • domain
  • range