Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Feb 11, 2021

Created on Feb 11, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

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.

Cchar0496

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

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which attributes to display on each axis via dropdown menus built with React state. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `format` functions to map data values to SVG circle positions rendered through React components, with transitions applied when axes change. The chart includes labeled axes and tooltips showing the x-value for each point.

CChintan Sawla

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization displays the classic Iris dataset, where users can select which flower measurements to plot on the x and y axes via dropdown menus. It uses React with D3 v5’s `scaleLinear` for axes and `scaleOrdinal` for coloring the data points by species. The scatter plot encodes flower species through color, with a legend on the right, and the axes are rendered as SVG elements using custom `AxisBottom` and `AxisLeft` components.

Aa1153724

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users switch which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axes generated using custom scale functions and tick components. The code includes interactive dropdown components that trigger state updates, allowing real-time switching between the dataset’s numeric attributes.

BBjoernujjwb

95% match