Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 25, 2023

Created on Sep 25, 2023

An interactive scatter plot of the Iris dataset lets users select which flower measurements to compare on the x- and y-axes via two dropdown menus. Each point represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a legend. The visualization uses D3 v5 to render SVG axes, circles, and labels, with transitions updating the plot whenever menu selections change.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset from the UCI Machine Learning Repository. Users select which quantitative attributes to plot on the x- and y-axes through dropdown menus, immediately updating the visualization. Built with D3 v5, the code uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and employs SVG rendering with animated circle transitions.

Ping-Yu Yang

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to choose which numeric measurements appear on the x- and y-axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft with tick marks. Circles are colored by iris species (setosa, versicolor, virginica) through CSS classes, with a legend overlay. The code utilizes d3-selection and d3-transition APIs within an SVG rendering approach.

NNYCUBK201

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

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot displays the classic Iris dataset, allowing users to compare different flower measurements by selecting which attributes to plot on the x and y axes through dropdown menus. The visualization dynamically updates the positions of the data points, with points representing different species. Built with D3 v6, the example leverages modular chart components and the selection-join pattern for reusable visualizations, incorporating scales for quantitative and categorical axes, animated transitions for smooth updates, and SVG rendering for crisp display.

Zzhuomo-maker

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two attribute columns by selecting them from dropdown menus. The chart updates dynamically, with points animating to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical color mapping, and `dropdownMenu` for the interactive controls. Data is loaded from a local CSV file containing sepal and petal measurements for three Iris species.

Bbrad1024

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between quantitative measurements and categorical species through dropdown menus that change the x- and y-axis variables. It distinguishes between quantitative and categorical scales using d3.scaleLinear and d3.scalePoint, rendering circles as SVG elements with animated transitions via d3.transition and the selection.join pattern. Menus are built with a custom reusable d3 menu component using d3.dispatch for change events, with axes updated through d3.axisLeft and d3.axisBottom.

PPeter VanNostrand

94% 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.

黃黃歆善

94% match