Skip to main content
SimilarExport ZIP
100%

Fork of Animated Scatter Plot with Menus bug

✓ Published1🌍 Public
Rroyable88
Last edited Feb 14, 2023
Created on Jan 27, 2023

This example shows an animated scatter plot of the Iris dataset with interactive dropdown menus to switch which flower measurements are plotted on the x and y axes. Built with D3.js and React, it uses `d3.csv` to load data, `scaleLinear` and `extent` for axes, and `transition` with staggered delays to animate circle positions between selections. The plot renders as SVG, with menus created via a custom `menu` function using D3’s `dispatch` for change events.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of Animating Scatter Plot with menus

This interactive scatter plot displays the classic Iris dataset, allowing the user to switch which of the four flower measurements (sepal and petal length and width) are mapped to the X and Y axes via dropdown menus. Built with D3 v7, it uses `scaleLinear` for axes, `transition` for animated point movement, and `axisLeft`/`axisBottom` for tick marks. A custom `menu` module manages the dropdowns, using `dispatch` to trigger updates that re-draw the SVG circles with a staggered delay.

GGayan Priyadarshana
91% 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
91% 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
91% match
Loading thumbnail…

Animated Scatterplot with Menus

This example visualizes the Iris dataset as an animated scatterplot where users can select which columns to plot on the x- and y-axes via dropdown menus. Built with React and D3 v6, it uses `d3.csv` for data loading, `scaleLinear` and `scalePoint` for axes, and SVG circles rendered through a reusable `scatterPlot` component. Transitions animate point positions over 1000ms with staggered delays, while `d3.dispatch` handles menu change events to update the visualization dynamically.

Ccardoza-IPH
91% 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
91% match