Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Reusable D3 Scatter Plot Black and White

Public visualization

Viewing a saved revision (read-only)

200c355e4e5046adad51c0af510632ea

Animated Reusable D3 Scatter Plot Black and White

0 stars2🌍 Public
AAndre J Denais
Last edited Aug 6, 2021
Created on May 27, 2021

This example displays the classic Iris dataset as an animated scatter plot, cycling through different x-axis variables every five seconds. The visualization builds a reusable D3 chart with a custom function that handles scales, axes, and circle elements. Circles enter with a growing radius transition and update their positions smoothly using `transition().duration(1000)` with staggered delays. The code uses `scaleLinear`, `axisLeft`, and `axisBottom` from D3 v6, rendering as SVG with black-and-white styling against a full-window canvas.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.