Scatter Plot with categorical data

100%

Scatter Plot with categorical data

✓ Published0🌍 Public

Last edited Aug 9, 2022

Created on Aug 9, 2022

Forked from Animated Scatter Plot with Menus

An interactive scatter plot explores the Iris dataset, letting users choose which quantitative or categorical measurements appear on the x-axis via dropdown menus. The visualization updates smoothly with animated transitions between selections, using D3 v6's `selection.join` to handle entering, updating, and exiting circles. The chart renders as SVG, with axes from `d3.axisLeft` and `d3.axisBottom`, while the menu system is built with a reusable `d3.dispatch` pattern. New points grow from radius zero, and updates stagger with a slight delay.

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…

Scatter Plot

An interactive scatter plot of the Iris dataset lets users explore relationships between different measurements. Two dropdown menus dynamically change which numerical columns are plotted on the X and Y axes. The visualization is built with D3.js, using scales for axes and ordinal color mapping for the categorical species. Circles animate into position with a staggered delay, and axes and labels update based on the selected data columns.

Ddaniel

91% match

Loading thumbnail…

Scatter Plot with Menus Including Species

This example demonstrates an interactive scatter plot of the Iris dataset, allowing users to dynamically select which quantitative or categorical variables appear on the x and y axes via dropdown menus. Built with D3.js v6, the visualization uses SVG rendering and animates transitions between configurations with a 1-second duration. The chart leverages D3’s scaleLinear, scalePoint, axisLeft, axisBottom, and transition APIs to update axes and circle positions smoothly. Data is loaded from a remote CSV file, and the plot supports both continuous and categorical axis scales.

CCurran Kelleher

91% match

Loading thumbnail…

Menu of Scatter plot

This interactive visualization displays the classic Iris dataset using scatter plots, with dropdown menus allowing users to select which numeric attributes appear on the x- and y-axes. The points are colored by species, and the scatter plot animates point transitions when the axes change, with circles moving to their new positions over time. The visualization is built with D3 v6, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and D3 transitions for smooth animations. SVG rendering is used throughout, with the menu system implemented as a custom reusable D3 component.

Wwei

90% match

Loading thumbnail…

Scatter Plot with menu including species

This animated scatter plot visualizes the Iris Dataset, allowing users to dynamically switch which quantitative measurements (sepal length/width, petal length/width) appear on the x- and y-axes via drop-down menus. Using D3.js selection joins, circles animate smoothly between positions when axes change, with staggered transitions for updates and radius-growing effects on entry. The chart renders as SVG with animated axes and a categorical species option included in the menu.

AAdekola Aliu

89% match

Loading thumbnail…

Animated Scatter Plot with Menus

An animated scatter plot visualizes the Iris dataset, allowing interactive exploration of relationships between four numeric measurements and species. Users select which column drives the x- and y-axes via dropdown menus, triggering a staggered transition of 150 points as they reposition. The D3.js code uses `selection.join` for efficient enter/update/exit handling, `transition` for smooth animations, and scale functions (`d3.scaleLinear`, `d3.scalePoint`) to map data to coordinates. Hovering highlights a point and shows a tooltip. The SVG plot includes axis labels and uses D3's `axisBottom` and `axisLeft` for ticks.

LLouis Astorg

89% 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

89% match

Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between quantitative measurements and species categories. Two dropdown menus dynamically change which columns are mapped to the x and y axes, with categorical values rendered as evenly spaced points and quantitative values using linear scales. The visualization is built as a reusable D3 component, utilizing `selection.on()` and `selection.dispatch()` for menu event handling, with `transition()` calls for smooth animation when updating circle positions, axes, and radius growth.

GGautier DAVID

89% match

Loading thumbnail…

Scatter Plot using species

This interactive scatter plot explores the Iris dataset, using dropdown menus to dynamically select which flower measurements (sepal length, petal width, etc.) appear on the x- and y-axes, with the option to treat variables as either numeric or categorical. Built with D3.js 6.7.0, it leverages the library’s scaleLinear and scalePoint functions to map data positions, while the selection.join API manages animated transitions for points and axes. The visualization renders as SVG, with each circle’s opacity set low to reveal overlapping species clusters, and includes a menu component that dispatches change events to update the plot in real time.

KKhanin Sisaengsuwanchai

89% match