Skip to main content
SimilarExport ZIP
100%

Fork of Animated Scatter Plot with Menus

✓ Published0🌍 Public
Jjimmy.fisher@member.mensa.org
Last edited Nov 28, 2024
Created on Nov 28, 2024

This example visualizes the Iris Dataset as an animated scatter plot. Users can change the x- and y-axis variables through dropdown menus, which trigger smooth transitions of the data points and axes. The code uses D3 v6 with reusable chart and menu components, leveraging `selection.join` for enter/update/exit handling and `transition` for animations. The scatter plot displays points with growing radii on entry, and axes update with the selected dimensions.

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
96% match
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris flower dataset, where users can dynamically select which attributes to plot on the X and Y axes using dropdown menus. The visualization uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for axes, custom built-in `transition` methods for smooth 1-second animations of circle positions, and `dispatch` for change events. As users change selections, circles animate to their new coordinates, and axes transition accordingly. The dataset is loaded via CSV from a remote gist.

IIsabel Cayer
95% 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
95% 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
94% match
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot explores the Iris flower dataset, allowing users to dynamically select which measurements appear on the x- and y-axes through dropdown menus. The visualization is built using D3 v6's modular approach, combining a reusable `scatterPlot` function with a custom `menu` component that uses `d3.dispatch` for event handling. As users change axis selections, the plotted points and axis scales transition smoothly over a one-second duration using D3's `transition` API. The SVG rendering also includes a species-based categorical axis option, demonstrating both linear and point scales.

IIsabel Cayer
94% 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
94% match
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The visualization uses D3 v6 to render animated SVG circles that transition smoothly when the X or Y axis is changed via dropdown menus. The code implements reusable modules for the scatter plot and menu components, using D3's `transition()` for animations, `scaleLinear()` for axis scaling, and the `csv()` function to load the dataset from a GitHub Gist.

IIsabel Cayer
94% match
Loading thumbnail…

Fork of 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.

Pphilippun
94% match