Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated Scatter Plot with Menus

Public visualization

Viewing a saved revision (read-only)

db80b154aa814e949ec9fc78831f48fd

Animated Scatter Plot with Menus

0 stars0🌍 Public
TTammminana
Last edited May 8, 2023
Created on May 8, 2023
Forked from Hello VizHub

This example presents the classic Iris dataset as an interactive scatter plot embedded in a full-screen SVG. Two dropdown menus let viewers dynamically switch the variables mapped to the x and y axes, choosing among the four quantitative measurements or the categorical species label. The visualization is built with D3 v6, using the `select` API for declarative DOM manipulation and `transition` to animate the movement of the data points, which reposition with a staggered delay to their new coordinates. The menus themselves are constructed using a reusable JavaScript component pattern, demonstrating a modular approach to building interactive charts.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.