Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Aug 25, 2021

Created on Aug 25, 2021

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot displays the Iris dataset, loaded via d3.csv from a GitHub Gist. React state manages two dropdown menus that select which of the four flower attributes (sepal length/width, petal length/width) are mapped to the x- and y-axes, updating the scales and axes dynamically. The SVG visualization uses d3.scaleLinear for positioning, custom React components for the axes and marks, and native SVG <title> elements for tooltips. A Poppins font and fixed styling give the chart a clean, button-driven interface.

KKai Stewart

97% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as an SVG in React, with dropdown menus that let the viewer change which flower measurements appear on the x- and y-axes. The plot uses d3.scaleLinear and d3.extent to map data to pixel coordinates, with custom React components for the axes and marks. Data is loaded as CSV via d3.csv, and each circle includes a native SVG title tooltip.

Wweny1109

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta

96% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered with SVG in React, lets users select which of four flower measurements to plot on the x- and y-axes via two dropdown menus. The visualization reads data with d3.csv, scales the axes with d3.scaleLinear, and formats tick labels using d3.format. Each circle’s tooltip shows its x-value via an SVG `<title>` element. The chart updates dynamically when a menu selection changes.

Jjwlam83

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements such as sepal length and petal width. Users can select which attribute is mapped to the x-axis and y-axis using two drop-down menus, built with React’s `useState` hook. The visualization, rendered as SVG, uses `d3.scaleLinear` and `d3.extent` to compute scales, while `d3.csv` loads the data. Each point is a circle with a native SVG `<title>` element for hover tooltips, and axes are generated from tick values using custom React components.

RRiccardo De Lucia

96% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris Dataset displays sepal and petal measurements, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. The visualization uses React with D3's `scaleLinear` and `extent` to map data to SVG circles, while axes are rendered via custom `AxisBottom` and `AxisLeft` components. The dropdowns update state to re-scale and re-render the marks dynamically, with formatted tick labels using D3's `format`.

RRajat Dangat

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj

96% match