Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 19, 2023

Created on Sep 19, 2023

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`.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

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.

Ccpsu00

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, letting users select which numeric columns map to the X and Y axes via dropdown menus. The visualization uses D3 v5 to render SVG circles with animated transitions, scaling axes based on the selected attributes. Data is loaded from a CSV file using `d3.csv`, and the dropdown menus are managed by a custom `dropdownMenu` function, while the scatter plot is drawn through the `scatterPlot` component.

Nnikki81140

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

黃黃歆善

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

95% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, allowing users to choose which flower measurements to display on the X and Y axes via dropdown menus. The visualization uses D3 v6 with reusable chart and menu modules, applying `scaleLinear` for axes and transitioning circle positions with `transition().duration(1000)`. Points grow from zero radius on initial render, and updates are staggered with a delay. The data is loaded from a CSV file and rendered as SVG, with the menus built from a reusable `dispatch`-based component.

Oowenking2710@gmail.com

95% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting viewers choose which flower measurements to display on the X and Y axes via dropdown menus. The chart renders as SVG circles with smooth 1000-millisecond transitions, using D3 v6’s `selection.join` to handle enter, update, and exit states. Axes update automatically with `axisLeft` and `axisBottom`, while menus built with a reusable `menu` factory dispatch change events to re-assign the xValue and yValue accessors. Data loads from a GitHub-hosted CSV file, parsed with numeric coercion for the four measurement columns.

Ppreethamkesa

94% match