Zoomable #4

100%

✓ Published0🌍 Public

Last edited Feb 28, 2022

Created on Feb 28, 2022

Forked from Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, encoding multiple quantitative attributes via dropdown menus that switch the X and Y axes. D3 v6 scales (scaleLinear and scalePoint) map values to positions, while categorical variables use point scales. The reusable chart pattern uses selection.join with transitions, animating circles and axes over 1 second when data mappings change. SVG rendering displays semi-transparent circles that grow on entry, with axes drawn using d3.axisLeft and d3.axisBottom.

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…

Animated Reusable D3 Scatter Plot + Menus + Ordinal Scale

This animated scatter plot visualizes the Iris dataset, allowing users to interactively explore relationships between different measurements and species. Through dropdown menus, users can switch which quantitative or categorical attribute is mapped to the x- and y-axes. Built with D3 version 6, the visualization uses an ordinal scale for categorical data and a linear scale for quantitative data, with axes and circles transitioning over a one-second duration. Data is loaded from a CSV file via d3.csv.

WWRCIECH

84% match

Loading thumbnail…

Fork of Minimal Reusable Charts Pattern

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two of its four measured attributes via dropdown menus for the X and Y axes. The code implements a reusable chart pattern using d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, with animated transitions between selections. Each point represents an iris flower, and changes to the axes trigger a smooth 3-second transition that moves existing circles while newly appearing points grow from radius zero. The chart fills the browser window and uses an SVG rendering approach with D3's data join pattern.

AAlena

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

84% match

Loading thumbnail…

Following Along Point Scale Animated Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset with two dropdown menus for selecting which quantitative or categorical column maps to the x and y axes. Animated transitions via `d3.transition` and `selection.join` move circles smoothly between positions, while axes update with a default `axisBottom` and `axisLeft` scale. The code uses d3.v6 with `scaleLinear` and `scalePoint`, rendering in SVG with an opacity of 0.2 on each circle. Data is loaded as CSV and parsed on the fly.

PParker-D5

83% match

Loading thumbnail…

Scatter Plot episode 12

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.

BBart van Pelt

83% match

Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an animated scatter plot of the Iris dataset, where users can select which quantitative attributes to map to the x- and y-axes via interactive dropdown menus. The visualization uses D3 v6 with SVG rendering, and employs the `selection.join` pattern to smoothly transition circles between positions as axis mappings change. Axes are updated using `d3.axisLeft` and `d3.axisBottom`, with `d3.transition` providing a 1000-millisecond animation effect on circle repositioning and radius growth.

KKaustav Sen

83% match

Loading thumbnail…

Visualization with iris datasets

This interactive scatter plot visualizes the Iris dataset, letting users switch which flower measurements appear on the x- and y-axes via custom dropdown menus. Colored circles represent individual flowers, with colors mapping to species via a `d3.scaleOrdinal`. The reusable chart component uses `d3.scaleLinear` for axes, `selection.join` for enter/update/exit transitions, and animated transitions (`transition().duration(1000)`) to smoothly reposition and grow points when selections change.

RRoey-Wu

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

83% match