Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public
Ppatty5531998
Last edited Sep 27, 2022
Created on Sep 27, 2022

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.

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 sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the X and Y axes, with axes and labels updating dynamically. Built with React and D3 v5, the visualization uses d3.scaleLinear for scales, d3.extent for domain calculation, and d3.csv for data loading. SVG rendering draws the circular marks, while custom React components handle axis generation and menu controls, with d3.format applying abbreviated tick labels.

AAbin
98% 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
97% 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
97% match
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
97% 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
97% 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
96% 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
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot allows users to explore the classic Iris Dataset by selecting which measurements to display on the x and y axes. It uses two dropdown menus to toggle between sepal length, sepal width, petal length, petal width, and species, with the axis labels updating accordingly. Built with React and d3 v5, the visualization uses `scaleLinear` to map data values to coordinates and `Marks` to draw the circles, with axes rendered by helper components. The styled SVG output is driven by user selections, enabling on-the-fly comparisons of the dataset's features.

WWalkramis
96% match