Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Jan 3, 2022

Created on Jan 3, 2022

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.

AI-generated description

A scatterplot of the Iris Dataset

MIT Licensed

Similar vizzes

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

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

SSong Tao Chen

95% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset with interactive dropdown menus for selecting which flower measurements to plot on the x and y axes. The menus allow users to switch between sepal length, sepal width, petal length, petal width, and species for either axis, with axis labels updating accordingly. The visualization uses D3's `scaleLinear` for scaling, React's `useState` for managing selections, and renders an SVG with tick marks, axis labels, and circular marks.

Rroc286

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

95% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver

95% match

Loading thumbnail…

Scatter Plot with menus

A scatter plot of the Iris dataset with dropdown menus for selecting which measured attribute appears on the x- and y-axes. The visualization renders as an SVG using React components, with D3 providing the linear scales, axis generation, and CSV data loading. Users can switch among sepal length, sepal width, petal length, petal width, and species for each axis, which updates the scales, axis labels, and plotted circles. Tooltips show tick values on hover.

SSushan Prajapati

95% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between measurements by selecting which attribute appears on each axis via dropdown menus. The visualization, built with React and D3 v7, uses `scaleLinear` for both axes and renders SVG circles for data points, with axes generated through reusable React components. The menus provide options for sepal length, sepal width, petal length, petal width, and species, making it easy to compare different variable combinations dynamically.

BBen Brophy

95% match