Skip to main content
SimilarExport ZIP
100%

Animated Scatterplot with Menus

✓ Published0🌍 Public
MMatthew Bruffey
Last edited Aug 3, 2023
Created on Jul 12, 2023

This animated scatterplot displays the Iris dataset, plotting sepal length against petal width with points colored by species. The visualization uses D3.js to render circles that transition smoothly between positions when the x-axis mapping changes between four different measurements via a menu. The chart includes labeled axes, a title, and sequential animations that delay each point's movement for a staggered effect. The reusable chart component follows Mike Bostock's conventions, allowing configurable accessors, radii, and margins with default values.

AI-generated description

A reusable D3 scatterplot built following the convention layed out in Mike Bostock's Towards Reusable Charts

Allows specification of a number of values including the size of the points, the accessor functions for x and y values, the symbols to be used for points, the chart title, and axes labels. When any of the options are not set (except for the data value) default values are supplied.

Axis ranges by default extend 10% above and below the smallest and largest data points. This prevents points from running into the axes which I think looks bad. There is currently no defined method to alter this behavior.

MIT Licensed

Similar vizzes

Loading thumbnail…

Animated Scatterplot with Menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3 v7 with SVG rendering, featuring dropdown menus to select which columns map to the x and y axes. When users change selections, the scatterplot animates using D3 transitions, with circles smoothly repositioning and axes updating over a one-second duration. The implementation uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and a custom menu component with D3's dispatch system to handle user interactions.

Aajoua
95% match
Loading thumbnail…

Animated Scatter Plot with Menus

This animated scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through two dropdown menus that dynamically reassign the x and y axes. The visualization uses D3.js version 7 to render SVG circles with smooth transitions, animating point positions and radii when axis selections change. The scatterPlot module implements d3.scaleLinear scales, axisBottom and axisLeft components for axes, and uses transition objects with 1000ms duration for coordinated circle movements and axis updates.

Lliu yang
94% match
Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris flower dataset, allowing users to select which measurement (sepal or petal length/width, or species) appears on each axis via two dropdown menus. The visualization uses a reusable chart pattern built with D3 v6, employing the `selection.join` API to animate circle positions and radii with `transition` delays. It also demonstrates a reusable menu component that communicates changes through a custom `dispatch` event, with SVG axes that transition smoothly alongside the data points.

Ttrissentety
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
Loading thumbnail…

Animated Scatter Plot with Menus

This animated scatter plot presents the Iris Dataset, a collection of flower measurements, within an interactive visualization. The chart displays each flower as a circle, with its position determined by the selected attributes for the X and Y axes. Users can dynamically switch between the four different measurement options—petal width, sepal width, petal length, and sepal length—via dropdown menus. Built with D3 v6, the visualization uses the `scatterPlot` custom module to handle the rendering and animation. Employing D3's `transition` for smooth updates, the circles and axes animate to their new positions over one second. The code also utilizes the `selection.join` API for efficient updating of the SVG elements, ensuring a responsive and fluid user experience.

OOleg Zhernovoy
93% 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
93% match
Loading thumbnail…

Animated Menus Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically change the x- and y-axis variables via two dropdown menus. The visualization shows the dataset's sepal and petal measurements across all species. Built with D3 v6, the chart uses SVG and animated transitions to reposition circles and axes smoothly when menu selections change. The code implements a reusable `scatterPlot` module with D3 scales, axes, and transitions, while a custom `menu` module handles the dropdown controls using D3's dispatch system.

AAndre J Denais
93% match
Loading thumbnail…

Animated Scatter Plot with Menus

This example uses the D3.js library to render an animated scatter plot of the Iris flower dataset, where each point represents a sample and its position is determined by selected flower measurements. The visualization includes two dropdown menus for choosing which measurement (petal or sepal width/length) to plot on the X and Y axes. When a menu selection changes, the scatter plot smoothly transitions circles to their new positions over one second using D3 transitions, with a unique staggered delay between points. The plot axes also update dynamically to reflect the new data ranges.

Nnim@brejnholt.dk
92% match