Skip to main content
SimilarExport ZIP
100%

Iris Scatterplot 07 - Dropdowns with different data type

✓ Published0🌍 Public
Gg1g10
Last edited Sep 1, 2022
Created on Aug 31, 2022

This interactive D3.js scatter plot visualization of the Iris dataset allows users to dynamically select which flower measurements (sepal length, sepal width, petal length, or petal width) to display on the x and y axes using dropdown menus. The visualization handles both numerical and categorical data types, rendering the three Iris species (Setosa, Versicolor, Virginica) as distinct symbols. Points are colored and positioned using D3's `scaleLinear` and `scalePoint` scales, with `transition` animations smoothly interpolating between states when users change axis selections via the `menu` component.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

Iris Scatter Plot with Colors and Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users choose which measurements (sepal length/width, petal length/width) appear on the x- and y-axes via dropdown menus. Each of the three Iris species is distinguished by a unique color (purple, red, or green) with semi-transparent circles. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and re-renders with animated transitions whenever a menu selection changes.

TToly
90% match
Loading thumbnail…

Iris Scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can dynamically change which measurement appears on the x- and y-axes using dropdown menus powered by a custom DropDown component. The plot uses D3.js v5 with SVG rendering, employing `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and colored circles to distinguish species. Data is loaded from a CSV file and parsed with D3's `csv` function.

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

Iris Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, with dropdown menus to select which flower measurements appear on the x- and y-axes. Points are colored by species and transition into place with a staggered animation. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu component. A legend and axis selection panel are rendered to the right of the plot.

Yyixinxu2020
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the Iris dataset, allowing users to compare sepal and petal measurements through dropdown menus that select the x- and y-axis variables. Each point represents one flower, colored by its species class, with a legend identifying the three categories. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines, and updates circles and labels dynamically via a render function. SVG rendering handles all graphical elements, while the dropdowns are created through a custom function that binds options to data.

TThe-World-Muda
90% match
Loading thumbnail…

Iris Scatter Plots V2

This interactive visualization displays the classic Iris dataset, showing measurements of sepal and petal dimensions for three flower species. Dropdown menus allow users to select which attributes map to the X and Y axes, updating the scatter plot through D3 v5 data joins. The SVG rendering uses d3.scaleLinear for axes, d3.axisLeft, and d3.axisBottom with gridlines, while colored circles animate to new positions via transition().duration(). The plot includes a legend identifying the three Iris classes and uses a custom color function.

Hhi4u2qzy@gmail.com
89% match
Loading thumbnail…

Scatter plot Iris Flower with Menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions. Dropdown menus using `ReactDropdown` allow users to select which attribute maps to the X and Y axes, dynamically updating the chart. The visualization uses `d3.csv` to load data and `d3.scaleLinear` for axis scaling, rendering SVG circles within a React component. Axis ticks, labels, and marks are generated programmatically, with axis labels and styling using CSS classes for a clean presentation.

BBenjamín Salas Sadler
89% match