Skip to main content
100%

Animated Scatter Plot with Menus

✓ Published0🌍 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.

MIT Licensed

Similar vizzes