Skip to main content
SimilarExport ZIP
100%

Polished scatter plot with menus

✓ Published1🌍 Public
Ppatasky
Last edited Jun 10, 2021
Created on Jun 10, 2021

This interactive scatter plot displays the Iris Dataset, with dropdown menus to select which numeric attribute appears on the x and y axes. Built with React and D3 v5, it uses `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and SVG circles for data marks with tooltips. Styling incorporates Poppins font and the React Dropdown library for interface controls.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset with interactive dropdown menus for selecting the X and Y axes. The visualization uses React to manage state for the selected attributes and d3.scaleLinear to map data values to pixel positions, with custom SVG components for the axes and marks. The ReactDropdown library provides the menu interface, while D3's csv parser loads the data and applies type coercion to numeric fields. The plot features formatted axis ticks and tooltips via SVG title elements.

Rroc286
95% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset using React and D3 v5, rendering points as SVG circles positioned with `scaleLinear` scales. Two dropdown menus allow users to select which quantitative attributes appear on the x- and y-axes. The code constructs axes with custom `AxisBottom` and `AxisLeft` components, and includes a tooltip via SVG `<title>` elements on each circle. Styling uses the Poppins font and the React Dropdown library for menu interaction.

AAga Domanska
95% match
Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot of the Iris dataset lets users switch between four flower measurements for both the x and y axes using ReactDropdown menus. The visualization uses React and D3 v5 to render SVG circles, with the d3.csv module loading data from a remote gist. Axis components generated with scaleLinear and explicit tick marks update dynamically as menu selections change, while hover tooltips display formatted values.

AAndrea Picciau
94% match
Loading thumbnail…

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris Dataset, allowing users to select which numerical attribute appears on each axis via two dropdown menus. The visualization renders as an SVG using React and D3 v7, with scales created by `d3.scaleLinear` and axes built from custom `AxisBottom` and `AxisLeft` components. Circles are positioned with `Marks` and include native SVG `<title>` tooltips. The Y-axis dropdown includes both numerical columns and the categorical `species` attribute, though only numeric values are scaled.

JJun Suzuki
94% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly
94% match
Loading thumbnail…

Polished Scatter Plot with Menus!!

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which attribute is mapped to the x-axis and y-axis. Built with React and D3.js (v6), it uses `scaleLinear` for axes, SVG circles as marks, and native tooltips for data values. The visualization updates state through React hooks, while `AxisBottom` and `AxisLeft` components render tick marks and labels using D3 scales.

AAndre J Denais
94% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two measured attributes by selecting them from dropdown menus for the X and Y axes. Built with React and D3, the plot uses SVG circles to represent individual iris flowers, with tooltips displaying precise values on hover. The chart’s axes are rendered using custom React components (`AxisBottom`, `AxisLeft`) that leverage D3’s scale functions, while the dropdowns are powered by the `react-dropdown` library, enabling dynamic exploration of the dataset’s relationships.

Wwindwaver
94% match
Loading thumbnail…

Polished Scatter plot with menus

This scatter plot interactive example uses dropdown menus to explore the Iris dataset, letting the user choose which flower measurements (sepal length, petal width, species, etc.) to map to the x- and y-axes. The visualization updates the linear scales and circles dynamically based on selections, with tooltips showing values on hover. Built with React and d3.scaleLinear, the SVG chart uses d3.csv to load data and custom React components for axes and marks, styled with the Poppins and react-dropdown libraries for a polished interface.

Nn.koldovsky@gmail.com
94% match