Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 7, 2024

Created on Sep 7, 2024

This interactive scatter plot displays the Iris dataset, allowing users to choose which flower measurements to plot on the x and y axes via dropdown menus. The visualization uses D3.js version 5's scale functions for axes and a categorical color scale to distinguish the three Iris species. Upon selection, circles animate to their new positions with a 2-second transition, and the axis labels and scales update accordingly.

AI-generated description

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

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 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 Animated Scatter Plot with Menus

This interactive scatter plot explores the Iris flower dataset, allowing users to dynamically select which measurements appear on the x- and y-axes through dropdown menus. The visualization is built using D3 v6's modular approach, combining a reusable `scatterPlot` function with a custom `menu` component that uses `d3.dispatch` for event handling. As users change axis selections, the plotted points and axis scales transition smoothly over a one-second duration using D3's `transition` API. The SVG rendering also includes a species-based categorical axis option, demonstrating both linear and point scales.

IIsabel Cayer

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

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles scaled by d3.scaleLinear, with axes generated from tick values. Hovering over a point reveals its precise value via an SVG title tooltip.

RRupendra Pamisetty

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different measurements by selecting which columns map to the X and Y axes through dropdown menus. Built with D3 v5, the visualization uses d3.scaleLinear for axis scaling and d3.axisBottom and d3.axisLeft for tick marks. Circles transition over two seconds to their new positions with staggered delays, while axis labels update dynamically. The SVG rendering includes grid lines and semi-transparent red circles, with data loaded as CSV from a GitHub gist.

Ssumitradevipolina

94% match