Fork of scatter plot with menus

100%

Fork of scatter plot with menus

✓ Published0🌍 Public

Last edited Sep 22, 2021

Created on Sep 22, 2021

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numerical measurements and species. Two dropdown menus, built with react-dropdown, control which attributes appear on the x- and y-axes. The visualization uses React for UI state management and d3.scaleLinear for positioning, rendering SVG circles and axes via custom React components. Data loads asynchronously via d3.csv and is parsed into numeric values before plotting.

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 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 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 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 Polished Scatter Plot with Menus

An interactive scatter plot of the Iris Dataset explores relationships between four numeric flower measurements and species. Two dropdown menus, built with the React Dropdown library, allow users to select which attribute is plotted on the x-axis and y-axis. The visualization uses D3 scales and SVG circles for marks, with axes rendered as reusable React components. The data is loaded asynchronously via `d3.csv` and typed using a custom row conversion function.

Vvidhyanamini

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

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

94% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset, rendered as SVG in a React app, lets users explore relationships between four numeric flower measurements. Two dropdown menus, built with ReactDropdown, control which attributes map to the x- and y-axes. The visualization uses D3 v5 scales and extent functions to compute domains, and custom React components render the axes and circular marks. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

DDonald Bagwell

94% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to choose which numerical attributes to plot on the x- and y-axes via dropdown menus powered by react-dropdown. The visualization uses React with hooks (useState, useEffect) to manage state and data loading, while D3 version 5 (scaleLinear, extent, csv) handles scaling, axis generation, and data fetching from a GitHub gist. SVG circles represent individual iris samples, and hover tooltips display formatted x-values using d3.format.

Cchar0496

93% match