Scatterplot with Menus

100%

Scatterplot with Menus

✓ Published1🌍 Public

Last edited Jan 30, 2023

Created on Jan 28, 2023

Two dropdown menus control which numeric measurements from the Iris dataset appear on the x- and y-axes of an SVG scatterplot. Built with React and D3 v7, the visualization uses `d3.scaleLinear` to map sepal and petal dimensions to axes, rendering circles with a constant radius. The code constructs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and updates the plot dynamically through React state when menu selections change. Data is loaded asynchronously via `d3.csv` from Curran’s gist.

AI-generated description

A scatterplot of the The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot w/ Menus

Two dropdown menus let a viewer select which measurements of the Iris dataset appear on the x and y axes of an interactive scatter plot. The React app uses D3 v6 scales (`scaleLinear`, `extent`) to map values to an SVG canvas, while `AxisBottom` and `AxisLeft` render tick marks. Changing a menu updates the corresponding axis label and point positions via `useState`. The data is loaded from a CSV with `d3.csv`, and hovering over a circle reveals its exact value through a native SVG `<title>` tooltip.

AAnthony Ynami

95% match

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus control which Iris flower measurements appear on the scatter plot’s x- and y-axes, with labels updating accordingly. Built with React and D3 v5, the visualization loads the classic Iris Dataset via `d3.csv`, maps the numeric fields to linear scales using `scaleLinear` and `extent`, and renders SVG circles for each data point. The `Dropdown` and `Marks` components handle the interactive selection and circle placement, while formatted tick labels and axis titles clarify the currently chosen attributes.

KKwame Porter Robinson

94% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG in React, lets users select which attribute appears on each axis through two dropdown menus. The chart maps petal and sepal measurements, using `d3.scaleLinear` for scales and `d3.extent` to compute domains. Axes are drawn with shared `AxisBottom` and `AxisLeft` components, while `Marks` renders circles with tooltips. The code loads CSV data via `d3.csv`, and the dropdowns update state to reassign the x and y values dynamically.

BBen Seebeck

94% match

Loading thumbnail…

Scatter Plot with Menus

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.

LLisa Wagner

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

94% match

Loading thumbnail…

Scatterplot with Menus

A scatterplot of the Iris Dataset rendered as SVG, with dropdown menus that let the viewer select which numeric attribute appears on the X and Y axes. The chart uses D3 v5 scales and extent functions to compute domains, and React components (AxisBottom, AxisLeft, Marks) to draw ticks, labels, and circles. Data is loaded as CSV via d3.csv, with numeric parsing in a custom row function.

CChris Knight

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

94% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered in SVG, with dropdown menus to select which attribute appears on each axis. The visualization includes four numeric measurements—sepal length, sepal width, petal length, and petal width—as well as species. Built with React and D3 v7, it uses `scaleLinear` for axes, `extent` for domains, and React state to update the chart when menu selections change. The menus and labels are generated from a shared attribute list.

BBen Brophy

94% match