100%

Scatterplot with menu

✓ Published1🌍 Public

Last edited Jul 20, 2021

Created on Jul 20, 2021

This scatterplot displays the Iris dataset, plotting sepal length, sepal width, petal length, or petal width on either axis. Interactive dropdown menus, implemented with React state, allow the user to select which attribute maps to the X and Y axes. The visualization uses D3 v5 scale functions to compute axis scales and renders all marks, axes, and labels as SVG elements.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

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

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 explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat

95% match

Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege

95% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. The example uses React with hooks to manage state for the X and Y axis attributes, which are selected via two dropdown menus. D3’s scaleLinear and extent functions compute the scales, while custom React components render the SVG axes and circle marks. Data is loaded asynchronously from a CSV using D3’s csv function with type coercion.

NNelson M

95% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Nn.koldovsky@gmail.com

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. The React-based interface manages state for the selected X and Y axes, while D3 v7 scales map data values to SVG coordinates. Users switch between quantitative attributes like sepal length, sepal width, petal length, and petal width, with an axis label updating to reflect each selection, and a tooltip showing the precise value of each data point.

Sstephanie0215

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

94% match