Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Aug 30, 2021

Created on Aug 30, 2021

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.

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

JJean David

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

A fork of the classic scatter plot, this visualization displays the Iris Dataset with interactive dropdown menus that allow users to select which attribute to map to the x-axis and y-axis. Built with React and D3 v5, the SVG chart uses `scaleLinear` for axes and renders circles as marks, with tooltips showing values. The code demonstrates reusable components for axes, dropdowns, and marks, and loads data via D3's `csv` function.

Pparshwa30122002@gmail.com

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, built with React and D3.js v5, visualizes the classic Iris Dataset, which contains measurements of sepal and petal dimensions for three iris species. Two dropdown menus allow users to independently select which quantitative attribute is mapped to the x-axis and y-axis, dynamically updating the linear scales and the displayed points. The visualization renders as an SVG, with each data point drawn as a circle. The code uses `d3.csv` to load the data and `d3.scaleLinear` to generate the axes, with React's `useState` managing the selected attributes.

SSam

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