mine

100%

✓ Published0🌍 Public

Last edited Jan 4, 2023

Created on Jan 3, 2023

Forked from Scatter Plot with Menus Including Species

This interactive scatter plot explores the Iris dataset, allowing users to select which quantitative attributes map to the x- and y-axes through dropdown menus. Built as a reusable D3 chart, it uses `d3.scaleLinear` or `d3.scalePoint` depending on whether the selected column is quantitative or categorical. The SVG visualization animates circle positions and radius growth using `transition` and `selection.join`, with axes updated via `d3.axisLeft` and `d3.axisBottom`. The interface is styled with the Share Tech font.

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…

0

This interactive scatter plot displays the Iris dataset, allowing the user to compare any two measured features by selecting them from dropdown menus for the X and Y axes. The visualization uses D3 scales and axes to map the data, with circles animating to their new positions when the selection changes. It is rendered as an SVG, and the code demonstrates the use of `scaleLinear`, `axisBottom`, and `axisLeft` to build the chart.

Eeyxxr1260@gmail.com

82% match

Loading thumbnail…

Zoomable #4

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.

Aamnicpo

80% match

Loading thumbnail…

test

This interactive scatter plot explores the classic Iris flower dataset by allowing users to select which measurements to compare on the x and y axes via dropdown menus. The visualization uses D3.js v5 with SVG and animated transitions to render the data points. As users change the axis selections, the plot re-renders with a smooth delay effect, with each circle animating from the center. The code specifically uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to build the scales and axes.

Ping-Yu Yang

80% match

Loading thumbnail…

iris scatter plot

This interactive scatter plot visualizes the Iris dataset from UCI’s Machine Learning Repository, letting users select any two columns for the x- and y-axes via dropdown menus. Built with D3 v5, it uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while points animate inward with `transition().duration()`. The SVG updates dynamically on menu changes, showing relationships among measurements like petal and sepal dimensions.

Aalan489671

80% match

Loading thumbnail…

Fork of Scatter Plot 0927

This interactive scatter plot displays the Iris flower dataset, with users selecting which measurements map to the x- and y-axes via dropdown menus. Points are colored by species—purple for setosa, red for versicolor, and green for virginica—with a legend beneath the chart. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while circles enter with a staggered 2-second transition animation. The data loads from a local CSV file, and SVG rendering supports the interactive filtering and animated updates.

Mminson

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

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

79% match

Loading thumbnail…

2222333

An interactive scatter plot of the Iris dataset lets users compare any two measured attributes—sepal and petal length and width—via dropdown menus. Points are colored by species with a legend for classification. The visualization uses D3 v7 to load the CSV data, render SVG circles and axes with d3.scaleLinear and d3.axisBottom/Left, and updates the chart on selection change.

Eeyxxr1260@gmail.com

79% match