Fork of Animated Scatter Plot with Menus

100%

Fork of Animated Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 1, 2022

Created on May 1, 2022

Forked from Animated Scatter Plot with Menus

This interactive scatter plot visualizes a dataset of academic metrics, allowing users to switch between variables like citations, research, and teaching for both axes. Built with D3 v6, it uses reusable chart and menu components, with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for rendering. The plot animates transitions via `d3.transition` when axes change, with circles growing on entry and repositioning smoothly. Data loads from an external CSV, and menus dispatch change events to update the plot’s x and y value accessors.

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 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

88% 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

88% match

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

87% 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

87% 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

86% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus_testing_dispatch

This interactive scatter plot visualizes the Iris dataset, allowing users to switch the x- and y-axis columns and scale types (linear, band, square, or power) via dropdown menus. The D3 v6 chart animates circle positions with `transition()` as axes update, and clicking an axis label toggles its color between blue and black. The scatterPlot module uses D3 scales like `scaleLinear` and `scaleBand` with SVG rendering.

PPeiyang Li

86% match

Loading thumbnail…

Fork of kaustav of Animated Scatter Plot with Menus

This animated scatter plot visualizes the Iris dataset, allowing selection of X and Y axis variables from menus. It uses D3 v6 with SVG rendering, implementing a reusable chart pattern with selection.join for enter, update, and exit transitions. Axis labels animate position changes, circles transition to new coordinates with staggered delays, and a tooltip appears on mouseenter. The scatterPlot module uses scaleLinear and scalePoint for quantitative and categorical axes, with d3.transition for smooth 1000ms animations.

Ccssergio

86% 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

86% match