Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jun 28, 2021

Created on Jun 28, 2021

A scatter plot of the Iris dataset, presented as a React application using D3 v5 for scales and axes. Two dropdown menus let the user select which of four numeric attributes (sepal length/width, petal length/width) to display on the x and y axes. The SVG rendering uses `scaleLinear`, `extent`, and `csv` from D3 to load and map the data into positioned circles, with axis labels updating dynamically based on menu selections.

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, displaying sepal and petal measurements as a series of circles. Two dropdown menus allow the user to independently select which quantitative or categorical attribute is plotted on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to map data to SVG coordinates, while axis components and marks are rendered as reusable React functions. Data loading is handled asynchronously with `d3.csv`, and the chart updates dynamically when menu selections change.

Sshimos12468

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, dynamically select which numerical attributes map to the x and y axes. The visualization renders as an SVG using React with D3’s `scaleLinear` for axis scales and `extent` to compute domains from the CSV data. Circle marks use a tooltip via the `<title>` element.

Eevers-codeshop-ai

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 explore relationships between sepal and petal measurements. Dropdown menus control which attributes map to the x- and y-axes, with the SVG marks updating accordingly. The React component uses `useState` and `useCallback` to manage selections, while `d3.csv` loads the data and `d3.scaleLinear` with `extent` handles scaling. Axes are rendered as custom SVG components, and a native `<title>` element provides tooltips on each circle.

RRoberto

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows interactive selection of which measurement attributes (sepal length, sepal width, petal length, petal width, or species) appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using React, with D3.js v5 functions like `csv` for data loading and `scaleLinear` for axis scales. Two dropdown components update the selected attributes, triggering re-renders of the axes and circles.

NNikithakatta30

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

A scatter plot of the Iris dataset rendered with SVG in React, displaying sepal and petal measurements as points. The visualization uses d3.scaleLinear for both axes and d3.extent to compute domains, with React state managing selection of the x and y attributes. Two react-dropdown menus let users swap any of the four numeric flower measurements on each axis. The data loads asynchronously via d3.csv, and the axes are drawn with custom React components that generate SVG ticks, lines, and text labels.

KKonJoDot

95% match