Skip to main content
SimilarExport ZIP
100%

Ep. 11 Scatter Plot (Animated) w/ Menu

✓ Published1🌍 Public
Ddanheavern
Last edited May 8, 2022
Created on May 8, 2022

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom `d3.dispatch`-based menu component, let viewers select which measurement appears on each axis. When a selection changes, the visualization animates smoothly, with circles transitioning to new positions using `d3.transition`. The chart is rendered as SVG, with axes and circles updated dynamically, while colors encode species using `d3.scaleOrdinal` with `schemeCategory10`. Hovering temporarily enlarges circles via CSS.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot (animated, menu including species)

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between measurements of sepal and petal dimensions. Two dropdown menus, built with a custom reusable `menu` component, let viewers dynamically select which quantitative or categorical column corresponds to the X and Y axes. The visualization uses D3.js v7, with `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` for axes. SVG circle elements transition smoothly to new positions over one-second intervals when the selected dimensions change, creating an animated exploration of the data.

PPeiyang Li
92% match
Loading thumbnail…

Scatter Plot with Menu Animations

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which numeric column appears on the X and Y axes, triggering smooth animated transitions of the data points and axis scales. Built with D3 v6, the visualization uses `scaleLinear`, `transition` for the 1-second animations, and the `selection.join` API to efficiently manage the SVG circles as data mappings change. Each circle animates its position with a slight per-point delay, creating a cascading effect during updates.

DDasbach.EJ
92% match
Loading thumbnail…

Scatter Plot w/ menu

This interactive scatter plot uses React and D3 to visualize the Iris flower dataset. Users explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from dropdown menus. The plot encodes species using color, and hovering over the color legend highlights points of that species while fading others. The SVG visualization builds axes with D3 scales, formats tick labels with `d3.format`, and links the dataset via a custom React hook.

CCarlos Caballero
92% match
Loading thumbnail…

Ep. 31 | Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, letting users explore relationships between sepal and petal measurements across flower species. Two dropdown menus, built with React state management, dynamically select which attribute appears on each axis, updating the scatter plot and axis labels in real time. The visualization uses D3 v6 scales and SVG rendering for the circles, with custom React components for the axes and marks. Data is loaded asynchronously via D3’s `csv` function, and each point includes a native SVG `<title>` tooltip displaying its x-value.

YYee Han
92% match
Loading thumbnail…

Animated Scatter Plot with Menu

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements. The visualization uses two dropdown menus to dynamically select which numeric columns appear on the x and y axes. Points are colored by species (setosa, versicolor, virginica) and animate smoothly to their new positions using d3’s `transition` API. The chart is built with SVG, leveraging d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` for scales and axes. The code implements a reusable `scatterPlot` module and a custom `menu` component using d3’s `dispatch` for event handling.

Ccssergio
91% match
Loading thumbnail…

Episode 11 - Animated Scatterplot with Menus (GIRIBAW)

This interactive scatterplot visualizes the Iris dataset, with dropdown menus letting viewers choose which sepal or petal measurements appear on the x- and y-axes. Built with D3.js v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for scaling and axes, while `transition()` animates circle positions and axes over 800ms when selections change. The menu component leverages D3's `dispatch` for change events, and data is loaded via `d3.csv` from a GitHub Gist, rendered as SVG with entering circles growing from radius 0.

Eemberix@gmail.com
90% match
Loading thumbnail…

7:28 Scatter Plot with menus

This visualization displays the classic Iris flower dataset as an interactive scatter plot, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which attribute appears on each axis via two dropdown menus. The plot uses D3 scales and axes, with points colored by species. Built with React and D3 v5, it renders as an SVG, loading the CSV data asynchronously and using React state to update the visualization upon selection changes.

Uumgi
90% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to switch between different sepal and petal measurements on the x and y axes using two dropdown menus. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and SVG circles rendered via React components. Hovering over a species in the color legend fades non-matching points using React state, while the MarksWithFade component manages mouse events to provide interactive feedback.

Llaurajchang
90% match