Skip to main content
SimilarExport ZIP
100%

Fork of Iris Scatterplot 06 - Dropdowns

βœ“ Published0🌍 Public
AAdrian Ionita
Last edited Sep 14, 2022
Created on Sep 9, 2022

An interactive scatter plot of the Iris dataset, rendered with D3.js, lets users select which numeric measurement to plot on each axis via dropdown menus. The chart uses SVG paths with symbols derived from a scaleOrdinal function, mapping species to distinct shapes, and animates marker transitions between states using D3's transition API with staggered delays and durations. Dropdown controls are built with a custom menu component dispatching change events, while scales and axes update dynamically based on user selections.

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

Fork of Scatter Plot With Menus(Iris)

An interactive scatter plot of the Iris dataset lets users explore relationships between variables. Two dropdown menus, built with a reusable `dropdownMenu` function, select which attributes appear on the x- and y-axes. The visualization uses D3 v7's `scaleLinear` for numeric fields and `scaleBand` for the categorical "class" column, rendering points via `transition` animations. Axis labels update dynamically, and axes are drawn with `axisBottom` and `axisLeft`. The code loads data from `iris.csv` and scales circles with a radius of 10.

黃黃歆善
90% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, with dropdown menus that let users select which flower measurements map to the x and y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` for the plot, while a custom `dropdownMenu` module handles the HTML select elements. When a menu changes, the scatter plot transitions smoothly over two seconds, animating circles to their new positions with staggered delays. Data comes from the built-in iris.csv file, and points are colored by species using `scaleOrdinal` with `schemeCategory10`.

Yyhcmv5
90% match
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot from the Iris Dataset uses ReactDropdown to let users select which sepal or petal attributes to plot on each axis. The visualization renders circles colored by iris species using D3 v5 scales, axes, and SVG shapes. Dropdown menus position absolutely over the chart, while a reusable dropdown function updates selections and triggers re-renders, adjusting the axis scales, labels, and point positions accordingly.

Rrohinikotha
89% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot, built with D3.js, visualizes the classic Iris flower dataset, allowing users to dynamically select which numerical columns to plot on the X and Y axes via dropdown menus. Each point is colored red with transparency. The visualization uses D3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for the y and x axes, and the custom `dropdownMenu` component uses a native HTML `<select>` element. Animated circle transitions are achieved through the `transition().duration()` method.

Mminson
89% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements to display on the x- and y-axes via dropdown menus. Built with React and rendered as SVG, the chart plots species data points using `d3.scaleLinear` for scales and `d3.extent` for domains. The two dropdowns, implemented with `react-dropdown`, update the plot through React state, while `d3.csv` asynchronously loads the data. Axis components and marks are created using D3’s tick generation and SVG circle elements.

ζœ±ζœ±ζ€ε˜‰
89% match
Loading thumbnail…

Iris Scatterplot 07 - Dropdowns with different data type

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.

Gg1g10
89% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly
88% match