Scatterplot with Menus

100%

Scatterplot with Menus

✓ Published1🌍 Public

Last edited Nov 15, 2021

Created on Nov 10, 2021

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.

AI-generated description

A scatterplot of the Iris Data Set loaded as a .csv from GitHub Gist

MIT Licensed

Similar vizzes

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

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

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

95% match

Loading thumbnail…

Scatter Plot with Menues

This interactive scatter plot visualizes the Iris flower dataset, displaying sepal width against petal length for individual specimens. A dropdown menu allows users to change the x-axis attribute, dynamically updating the visualization. The chart uses React to manage state and render SVG elements, while D3 utilities handle data loading via `csv()` and scales through `scaleLinear()`. Custom React components structure the axes, marks, and menu system.

Nnexus1058

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting measurements like sepal length and width against each other. Two dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with the axes labels updating accordingly. The visualization is built with React and D3 v5, using scaleLinear for both axes and SVG circles for each data point, with axis components rendered as reusable React functions. The dataset is loaded as CSV from a GitHub gist using d3.csv, and the ReactDropdown component provides the menu interface.

Bbsolomon103

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

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

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which flower attributes appear on the x and y axes via dropdown menus. The visualization updates dynamically using React state management, with scales from D3 v6 (scaleLinear, extent) mapping petal and sepal measurements to SVG coordinates. Axes are rendered as reusable React components, and data loading uses D3’s csv function with type coercion. The plot displays all species together as teal circles, with axis labels reflecting the selected attributes.

WWolfgang

95% match