Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Reusable D3 Scatter Plot

Public visualization

Viewing a saved revision (read-only)

8f2a7fd72a664ed89610899e98e70cc9

Animated Reusable D3 Scatter Plot

0 stars1🌍 Public
MMichael Bergerson
Last edited Jun 19, 2021
Created on Jun 19, 2021

This example visualizes the Iris Dataset as an animated, reusable scatter plot built with D3 v7. It displays sepal and petal measurements as circles, cycling the x-axis variable every two seconds among petal width, sepal width, petal length, and sepal length. Using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function, it smoothly transitions circle positions and axis scales over a 2000-millisecond duration with `transition`. SVG rendering handles the marks, labels, and axes.

AI-generated description

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