Skip to main content
100%

Animated Scatter Plot with Menus

✓ Published0🌍 Public
OOleg Zhernovoy
Last edited Dec 28, 2022
Created on Dec 28, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes