Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

This interactive scatter plot explores the Iris flower dataset, allowing users to compare any two of its four numeric attributes. Dropdown menus control which attribute is mapped to the X and Y axes, with axes and labels updating instantly. The visualization is built using React for the interface and D3.js for data handling, scaling, and SVG rendering. The React code defines custom components for axes, dropdowns, and data points, using D3's `scaleLinear` and `extent` functions to compute the plot's domain.

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes and species through dropdown menus that dynamically reassign the x- and y-axes. Built with React and rendered as SVG using D3 v5, the visualization updates scales and marks via state changes triggered by the dropdown selections. The code leverages `scaleLinear`, `extent`, and `csv` for data loading and scaling, with custom React components for axes, marks, and menu controls.

XXiaoyu Su

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris Dataset, allowing users to compare any two measured attributes by selecting them from dropdown menus for the X and Y axes. Built with React and D3 v5, the visualization renders data points as SVG circles with native tooltips. The charts axes are generated using custom React components that leverage D3 scales. The interface is implemented using the `react-dropdown` library, while data loading and parsing are handled by D3's `csv` function.

EEugenio2192

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 numeric attributes through dropdown menus that dynamically reassign the x and y axes. The visualization uses React for component management and state, d3.v5 for scales and CSV parsing, and renders SVG circles with tooltips showing formatted values. Users can switch between sepal and petal measurements, with axis labels updating accordingly to reflect the selected variables.

EEugenio2192

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

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