Polished Scatterplot with menus

100%

Polished Scatterplot with menus

✓ Published1🌍 Public

Last edited Mar 13, 2021

Created on Mar 12, 2021

This interactive scatterplot displays the Iris dataset, allowing users to select which measured attribute (sepal length, sepal width, petal length, or petal width) appears on the X and Y axes via dropdown menus. The visualization updates the linear scales, axes, and positioned circles in response to menu changes. Built with React and D3 v6, it uses `scaleLinear` for axis scaling, `csv` for data loading, and SVG for rendering. The polished styling includes custom menus from `react-dropdown` and axis formatting with `d3.format`.

AI-generated description

Iris dataset used to display scatter plot. https://gist.githubusercontent.com/surikmeetr/a0165a953a1b5450052bdbc3debdd3fc/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv

using https://github.com/fraserxu/react-dropdown

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatterplot with menus

An interactive scatterplot of the Iris dataset, built with React and D3, lets users explore relationships between sepal and petal measurements. Two dropdown menus select which quantitative attributes to plot on the x- and y-axes, while the scales and axes update accordingly. The SVG visualization uses D3 scales (`scaleLinear`, `extent`) to map data coordinates, with React components (`Marks`, `AxisBottom`, `AxisLeft`) rendering circles and tick marks. Data loads asynchronously via `d3.csv`, and hover tooltips reveal precise values using the SVG `<title>` element.

LLove Wessman

96% match

Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that select which attribute appears on each axis. The visualization renders as an SVG using React components, with D3 v5 handling data loading via `d3.csv` and scale construction through `scaleLinear` and `extent`. Axis ticks are generated manually from the scales, and hovering over a point reveals its x-value via an SVG `<title>` element. The chart includes styled axes, labels, and a clean layout with margins.

SShuyu Zheng

96% match

Loading thumbnail…

Polished Scatter plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on the x and y axes. The visualization is built with React and D3 v6, using d3.scaleLinear for continuous axes and SVG circles rendered via the Marks component. The interface includes two ReactDropdown menus that update state to re-scale the plot, with axis labels dynamically reflecting the selected attributes. Data is loaded asynchronously from a CSV using d3.csv and parsed into numeric values.

Kkragovic

96% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. 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 SVG chart uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Custom React components render the axes, marks, and dropdowns, with tooltips displaying formatted values on hover.

Llaplantalaplanta

96% match

Loading thumbnail…

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris dataset, letting users choose which measurements (sepal length, sepal width, petal length, petal width, or species) to plot on the X and Y axes via dropdown menus. The SVG rendering uses React components, with D3 v5’s `scaleLinear` for axes, `extent` for data domains, and `csv` to load the data from a remote URL. Polished styling includes tick marks, axis labels, and tooltips showing formatted values on hover.

GGayan Priyadarshana

96% match

Loading thumbnail…

Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, allowing users to compare any two measured attributes (sepal length, sepal width, petal length, petal width, or species) through interactive dropdown menus that control the x- and y-axes. The SVG rendering uses React components for the axes and marks, with D3’s `scaleLinear` and `extent` functions computing the plot scales. Data is loaded asynchronously from a CSV file via `d3.csv`, with axis labels and tick formatting provided by D3’s `format` helper.

Llzb1003

96% match

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris Dataset displays sepal and petal measurements as circles, with interactive dropdown menus to select which attribute appears on each axis. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, custom React components for ticks and marks, and the `react-dropdown` library for menu controls. The SVG rendering updates dynamically when menu selections change, with axis labels and tick formatting adjusting accordingly.

Nnaisargidave

96% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the X and Y axes. Two dropdown menus, built with the `react-dropdown-browser` library, control the axes. The visualization uses D3 v6's `scaleLinear` for axis scaling and renders circles as SVG marks, with tooltips showing formatted values. Axis components are built with reusable React functions, while data loading is handled asynchronously via D3's `csv` method.

TTaweewat Somboonpanyakul

96% match