Skip to main content
SimilarExport ZIP
100%

Fork of Animated Scatter Plot with Menus

✓ Published0🌍 Public
Yyisha huang
Last edited Jul 3, 2024
Created on Jul 3, 2024

This example shows the classic Iris Dataset as an animated scatter plot. Through dropdown menus, users can select which attributes (petal or sepal width/length, or species) to plot on the x and y axes. The menu module uses `d3.dispatch` to broadcast change events. The `scatterPlot` module leverages D3 6.7.0 features such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to animate point positions and axis ticks over one second.

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 shows the classic Iris Dataset as an animated scatter plot. Through dropdown menus, users can select which attributes (petal or sepal width/length, or species) to plot on the x and y axes. The menu module uses `d3.dispatch` to broadcast change events. The `scatterPlot` module leverages D3 6.7.0 features such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to animate point positions and axis ticks over one second.

Yyisha huang
100% 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
94% 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
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. 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.

Jjimmy.fisher@member.mensa.org
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 sepal and petal measurements through dropdown menus. The visualization uses D3 v6 with SVG rendering and transitions to animate circles as they reposition when axes change. Built with a reusable scatterPlot component using d3.scaleLinear, d3.extent, and axis generators, the code implements selection.join for smooth enter-update-exit patterns. Menus are created via a custom menu function that dispatches change events, triggering animated updates to the x and y axes.

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

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom d3 dispatch-based menu component, control which attributes appear on the x and y axes. The visualization uses d3-scaleLinear to map data to screen coordinates and d3-transition to animate circle positions and axes smoothly when selections change. Points grow from zero radius on entry and update with staggered delays, while axes reposition to match the selected dimensions. SVG rendering and d3 selection.join manage the dynamic updates.

DDmytro Holysh
93% match