Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Dec 31, 2021

Created on Dec 31, 2021

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.

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 visualizes the Iris Dataset, allowing the selection of any of its four numerical attributes for the x and y axes through dropdown menus. Built with React and D3, the visualization uses `scaleLinear` to map data to SVG coordinates, rendering circles with tooltips that display formatted values. Axis labels and tick marks are controlled by custom components, providing a flexible exploration of relationships between sepal and petal measurements.

AAnthony Le

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, a classic multivariate flower dataset, with five attributes selectable for the x- and y-axes through dropdown menus. React manages the component state and user interactions, while D3’s `scaleLinear`, `extent`, and `csv` handle data loading and scaling. The visualization renders as SVG, with marks shown as circles and axis labels derived from menu selections.

Iiffath.namira@csedge.org

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

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, with dropdown menus controlling the attributes mapped to the x and y axes. The visualization is rendered using React and D3 v5, leveraging `d3.scaleLinear`, `d3.extent`, and `d3.format` to compute scales and tick formatting. Each data point is drawn as a circle with a tooltip showing its x-value. Selecting different attribute combinations updates the axes and marks dynamically, allowing exploration of relationships among sepal and petal measurements.

Rrajamrit-singh

95% match