Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Apr 17, 2022

Created on Apr 17, 2022

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The visualization is built with React and rendered as SVG, using D3 v5 scale functions like `scaleLinear` and `extent` for scaling and axis generation. Data is loaded asynchronously with `d3.csv` from a GitHub-hosted CSV file. Each point represents an iris specimen, with native SVG `<title>` elements providing hover tooltips that display precise values.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on each axis via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` from d3 for axis scaling, `extent` for domain computation, and `csv` for data loading. SVG circles represent individual iris samples, with D3 tick marks and labels rendered as React components, and each point includes a tooltip showing its x-axis value.

Lleonine2017

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which measurements (sepal length, sepal width, petal length, petal width, species) appear on the x- and y-axes via dropdown menus. The visualization is rendered as SVG using React, with D3.js (d3.v5) handling data loading via `csv`, linear scaling via `scaleLinear`, and axis tick generation. Each data point is drawn as a circle whose position and hover tooltip are determined by the selected attributes.

NNikithakatta30

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, updating the plot instantly. The visualization uses React for the interactive controls and D3.js’s `scaleLinear` and `extent` for axes and data scaling. Data is fetched as CSV from a GitHub gist, and circle marks with tooltips display each sample, rendered as SVG.

Mmartin_tp@live.dk

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows users to select which flower attributes appear on the X and Y axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data to SVG coordinates. Axis components render ticks and labels, while circular marks display each sample with tooltips. The dataset is loaded as CSV and all four numeric measurements plus species are available as axis options.

Ttrissentety

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This is an interactive scatter plot of the classic Iris Dataset, featuring dropdown menus to select which quantitative attribute is mapped to the x and y axes. The visualization displays all 150 flowers, with each point’s species identifiable through the available attributes. Built with React and d3, the code uses React’s `useState` hooks to manage selected axes, d3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and custom React components for the axes and marks. SVG circles render the data points, with axis labels updating dynamically based on menu selections.

Hhung2606

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes through two dropdown menus built with React state. The visualization is rendered as an SVG, with axes and circles generated by D3 v5 scales and React components. Data is loaded asynchronously from a CSV file using d3.csv, and the plot updates dynamically when dropdown selections change.

EEdgar Alves

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot of the Iris dataset allows users to select which flower measurements to display on the x and y axes via two dropdown menus. Built with React and D3 v5, it renders SVG circles and axes, using `scaleLinear` for coordinate mapping and custom components for axes, marks, and menus. The visualization updates dynamically when the user changes the selected attributes.

AAvonlea Fisher

95% match