Fork of Animated Scatter Plot with Menus

100%

Fork of Animated Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jul 21, 2021

Created on Jul 21, 2021

Forked from Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot, with dropdown menus to switch which numeric columns are mapped to the X and Y axes. It uses D3 v6 features such as `selection.join`, `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` with a one-second duration to smoothly move circles and axes when selections change. New points grow from radius zero via a transition, while updating points reposition with a staggered delay. The SVG rendering fills the window, and menus are built with a reusable `menu` module dispatching change events.

AI-generated description

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

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example presents an animated scatter plot of the Iris dataset, with dropdown menus that update the x- and y-axis mappings to any of the dataset’s numeric or categorical attributes. The chart is built using D3 v6 with SVG, and relies on reusable components for the plot and menu. Selection joins with transitions (e.g., `transition.attr`) move points smoothly between positions, while axes also transition to new scales when data attributes change.

FFelipe Maion

95% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, allowing users to choose which flower measurements to display on the X and Y axes via dropdown menus. The visualization uses D3 v6 with reusable chart and menu modules, applying `scaleLinear` for axes and transitioning circle positions with `transition().duration(1000)`. Points grow from zero radius on initial render, and updates are staggered with a delay. The data is loaded from a CSV file and rendered as SVG, with the menus built from a reusable `dispatch`-based component.

Oowenking2710@gmail.com

93% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot with interactive dropdown menus for selecting the X and Y dimensions. The code uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft for axes. Circles animate transitions when dimensions change, with d3.transition and selection.join handling enter, update, and exit states. Hovering triggers tooltips and enlarges points via d3.select and transition.

KKaustav Sen

93% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, with dropdown menus that allow users to change which measurements are mapped to the x- and y-axes. The chart uses D3 v6 with SVG rendering and smooth 1-second transitions between states, animating circle positions and axis scales via `selection.join` and the `transition` API. The reusable chart pattern structures the code into modular functions for the scatter plot and menu, with the menu dispatching change events to update the plot's value accessors. Data loads from a CSV file hosted on GitHub.

Zzhuomo-maker

92% match

Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, where dropdown menus let users switch which attributes map to the X and Y axes. Built with D3 v6, the visualization animates point positions and axis scales over one second using `transition()`, while the HTML menus are created with a custom `menu()` component that dispatches change events. SVG circles grow from a zero radius on entry, and the plot is rendered using scaleLinear, axisLeft, and axisBottom.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot uses D3 v6 to visualize the Iris Dataset, shifting points between axes selected from dropdown menus. Built with a reusable `scatterPlot` component, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` with a 1000-millisecond duration, plus a 10-millisecond stagger delay, to animate both circle positions and axis updates. Selections trigger D3's `dispatch` events, while `join` handles entering, updating, and exiting SVG `circle` elements.

TThaverman

92% match

Loading thumbnail…

Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot with interactive dropdown menus for selecting the x and y variables. The plot uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data coordinates, while `d3.transition` animates circle positions, radii, and axis updates over 1000 milliseconds. The menus are built with a reusable `menu` component that dispatches `change` events, and the chart itself follows a reusable `scatterPlot` pattern using `selection.join` for enter/update/exit handling. Data is loaded via `d3.csv` from a gist URL, rendered as SVG circles, and includes species labels among the selectable columns.

AAndre J Denais

92% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This fork of the animated scatter plot uses dropdown menus to let users choose which Iris dataset columns map to the x and y axes. The chart displays points with a grow-in animation on entry and repositions them with a staggered transition when the axis selection changes. Axes update smoothly using D3 transitions. Data is loaded from a GitHub Gist as CSV, and the visualization is built with D3 v6 using reusable chart and menu components.

AAlex

92% match