Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 20, 2020

Created on Oct 15, 2020

A scatter plot displays material quantity on the x-axis against a selectable environmental indicator (PENRT, GWP, or AP) on the y-axis, with circle size encoding petal width and color encoding data point ID. The visualization uses React with SVG rendering, leveraging d3-scale for linear and ordinal scales, d3-scale-chromatic for the color scheme, and a custom Dropdown component to switch y-axis attributes. A button toggles between two hardcoded datasets with tooltips showing exact values.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menu - React

A scatter plot displays the Iris dataset, with dropdown menus allowing users to select which numerical attributes (sepal length/width or petal length/width) map to the x and y axes. The visualization uses React components with hooks to manage state, and D3.js scales (scaleLinear) and extent calculations to position SVG circles for each data point. Native SVG elements and user-defined axis components render the axes, while a third dropdown option for species exists in the data options. The chart updates interactively when selections change.

Ssmile2git

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

86% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays air quality measurements, with dropdown menus allowing users to select which pollutant attribute (pollutant, PM10, ozone, or PM2.5) drives the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `max` from d3 to map data to SVG coordinates. Axes are rendered by custom React components, and circles include native SVG `<title>` tooltips. Data loads asynchronously from a CSV using d3's `csv` method.

CChase Hall

86% match

Loading thumbnail…

Scatter Plot With Menus

Three dropdown menus control the X and Y axes of a scatter plot, displaying Iris flower measurements from the classic dataset. Users select from attributes like sepal length or petal width, updating the plot dynamically. The React app uses `d3.scaleLinear`, `extent`, and `csv` for data loading and scaling. SVG circles render the points with tooltips, while axis components built with React generate ticks and labels.

NNick Pearson

86% match

Loading thumbnail…

Scatterplot with Menus

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.

Rrmgoldberg24

86% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino

85% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js, displays the Iris flower dataset, allowing users to select which attribute is plotted on the x-axis and y-axis via dropdown menus. The visualization renders data points as circular marks within an SVG, with axis labels and tick marks generated using D3's `scaleLinear` and custom components. The menus update the selected attributes, triggering a re-render of the chart with the new scales, while a tooltip on each point shows its x-value.

SSerind Joshua McCue

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

85% match