Skip to main content
SimilarExport ZIP
100%

Scatter Plot episode 12

✓ Published0🌍 Public
BBart van Pelt
Last edited Feb 4, 2023
Created on Jan 23, 2023

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

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…

Episode 12

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements and species. The visualization features dropdown menus to select which quantitative or categorical columns map to the x- and y-axes, with the chart dynamically re-rendering when selections change. Built using D3 v6 and the selection.join pattern, it uses d3.scaleLinear for continuous data and d3.scalePoint for categorical species values, with 1000ms transitions animating the circles as scores update. The iris data is loaded from a GitHub Gist, and the SVG rendering includes shared axis transitions.

Aadventuresenglish.info@gmail.com
90% match
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
89% match
Loading thumbnail…

Episode 12 - Scatterplot Including Species w/ Axes (GIRIBAW)

This interactive scatterplot visualizes the Iris dataset, allowing users to compare measurements like petal and sepal width or length, with the option to map species to an axis. The visualization supports animated transitions between axis selections via D3’s `transition` and delayed updates. It uses `d3.csv` for data loading, `scaleLinear` and `scalePoint` for quantitative and categorical axes, and custom reusable modules (`scatterPlot.js`, `menu.js`) built on D3’s selection and dispatch APIs. The SVG renders semi-transparent circles with axis labels and menus for control.

Eemberix@gmail.com
89% match
Loading thumbnail…

Iris Scatter Plot

The visualization shows an interactive scatter plot of the Iris dataset, where users can select which measurements appear on the x- and y-axes via dropdown menus. Points are colored by species (setosa, versicolor, virginica) and animate smoothly to their new positions when the axes change. The chart uses D3 v5’s scaleLinear, axisBottom, and axisLeft to render the plot, with transitions applied to the circle elements for smooth updates.

MMing Chang
89% match
Loading thumbnail…

Episode 12 - Scatterplot Including Species (GIRIBAW)

This interactive scatterplot allows users to explore the Iris flower dataset, comparing measurements like sepal and petal length and width, and species. The visualization uses D3.js to create an SVG plot with automatically scaled axes, supporting both quantitative and categorical variables. Users can change the x and y axes via dropdown menus, triggering smooth transitions of the data points. The iris data is loaded from a remote CSV file, and the plot updates with a 600ms transition and staggered delays for each circle.

Eemberix@gmail.com
88% match
Loading thumbnail…

Scatter Plot [interactive] II

An interactive scatter plot of the Iris dataset shows relationships between two selected numeric attributes, with points colored by species. Users can change the x and y axes via dropdown menus powered by React. The visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG circles, while hovering over the color legend highlights points of a single species. Data is loaded asynchronously from a CSV URL using d3.csv.

Aadewole-top
88% match
Loading thumbnail…

Iris Scatterplot 06 - Dropdowns

An interactive scatter plot of the Iris dataset lets users switch the x- and y-axis variables via dropdown menus. The chart displays sepal and petal measurements as scaled symbols, colored by species. The D3.js code uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for marker shapes, and transitions to animate marker positions when the axis selections change.

Gg1g10
88% match
Loading thumbnail…

Scatter Plot with categorical data

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.

LLouis Astorg
88% match