Skip to main content
SimilarExport ZIP
100%

Scatter Plot Including Species

✓ Published0🌍 Public
GGautier DAVID
Last edited Dec 22, 2023
Created on Dec 22, 2023

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.

AI-generated description

Continuing on the previous episode, on this one we see how to add menus to the charts.

Allowing us to select different column for x and y axis to update the data displayed on those axis.

Use of :

-selection.dispatch() => to dispatch an event

-selection.on() => to listen to an event

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot lets users explore the Iris dataset, switching both axes between four quantitative measurements and the categorical species attribute. The D3.js code uses `scaleLinear` and `scalePoint` to map values, with dropdown menus built via a custom `menu` component to trigger updates. Circles animate into position over one second using `transition` with staggered delays, while axes smoothly transition to reflect new scales. SVG rendering and a fixed overlay menu provide the interface.

Wwspwll@gmail.com
93% match
Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot displays the Iris dataset, with petal and sepal measurements plotted on each axis. Users can switch between quantitative attributes and the categorical species column via two dropdown menus, which update the visualization through D3 transitions. The chart uses D3 scales, axes, and SVG circles with a 1000ms transition for smooth updates, while the menu system leverages a custom dispatch-based event handler.

Rroyable88
91% match
Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot explores the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Interactive dropdown menus dynamically select which quantitative or categorical attributes appear on each axis, with animated transitions smoothly repositioning circles. The visualization uses D3 v6’s selection.join and transition methods, along with scaleLinear and scalePoint for axes, while rendering as an SVG with a Share Tech font.

Ttrissentety
91% 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
91% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores the Iris dataset, showing the relationships between four numerical flower attributes across three species. Users switch the X and Y axes via dropdown menus, and an animated transition moves the colored circles to their new positions. The visualization uses D3.js v5 with a modular structure, leveraging `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom`/`axisLeft` for grid lines. Data loads from an external CSV file, with circles rendered as SVG elements and a legend identifying each species.

Vvegetable.c@nycu.edu.tw
91% 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
91% match
Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot displays the Iris flower dataset, mapping sepal and petal measurements against each other with species indicated by color. Users select variables for the x and y axes from dropdown menus built with d3.dispatch. The visualization uses d3.csv for data loading, scaleLinear and scalePoint for positioning, scaleOrdinal for symbol types, and transitions with transition.attrTween for animated circle updates.

Ccssergio
90% match