Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jan 2, 2023

Created on Jan 2, 2023

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as circles with x and y axes. Two dropdown menus allow users to select which quantitative attribute is plotted on each axis, with axis labels updating accordingly. The visualization is built with React and D3 v5, using `d3.csv` for data loading and `d3.scaleLinear` for positioning. SVG circles render the points, with tooltips showing numeric values and axes generated by custom React components.

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 visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes are plotted on the x- and y-axes via dropdown menus. The chart renders data points as SVG circles with tooltips, using D3’s `scaleLinear`, `extent`, and `format` APIs for axes and tick labels. The visualization is built with React, managing state for axis selections, and a custom `useData` hook loads the CSV data using `d3.csv`.

GGeekboxer

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as circles. Users can independently select which attribute appears on the X and Y axes from dropdown menus, with labels and scales updating dynamically. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `csv` for data loading, and SVG circles rendered through modular React components. The chart includes formatted axis ticks and tooltips showing values on hover.

Ttarun1219

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 users to explore relationships between sepal and petal measurements. Two dropdown menus, built with React state management, control which attributes appear on the x- and y-axes, while the SVG rendering updates dynamically through React re-renders. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to compute scales and domains, with custom React components for axis rendering and circular marks. Hovering over a point reveals its exact value via a native SVG `<title>` tooltip, and all data loading is handled asynchronously using `csv` from D3.

Nnoriktal

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 of the classic Iris dataset lets users explore relationships between sepal and petal measurements. Two dropdown menus control which attribute is mapped to the x- and y-axes, updating the visualization in real time. Built with React and using d3's `scaleLinear` and `extent` for scaling, the SVG render shows circles colored teal, with labeled axes and tooltips. The data loads asynchronously from a GitHub-hosted CSV via d3's `csv` function.

Ppatty5531998

95% match