Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Menus for Animated Reusable D3 Scatter Plot

Public visualization

Viewing a saved revision (read-only)

f58668bd12894285895446a544d21c9f

Menus for Animated Reusable D3 Scatter Plot

0 stars0🌍 Public
BBart van Pelt
Last edited Jan 21, 2023
Created on Jan 20, 2023

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are mapped to the X and Y axes via HTML dropdown menus. The plot animates transitions between states, smoothly moving circles and updating axis labels when the selected variables change. Built with D3 v6, the example demonstrates a reusable chart architecture using custom components like `scatterPlot` and `menu`, leveraging D3's `dispatch` for event handling and `transition` for smooth animations.

AI-generated description

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

Shows the Iris Dataset.

Howto add menus?

Using event listeners - https://github.com/d3/d3-dispatch

Data from https://gist.github.com/curran/a08a1080b88344b0c8a7