Skip to main content
SimilarExport ZIP
100%

Fork of Polished Scatter Plot with Menus

✓ Published1🌍 Public
Bblackbottt
Last edited May 31, 2022
Created on May 31, 2022

A scatter plot of the Iris dataset rendered as SVG circles in React, with two dropdown menus that let the viewer select which of four numeric attributes appears on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load the data, while custom React components (AxisBottom, AxisLeft, Marks) generate the tick marks, labels, and circles. Axis labels update dynamically based on the selected attribute.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset, rendered as SVG in a React app, lets users explore relationships between four numeric flower measurements. Two dropdown menus, built with ReactDropdown, control which attributes map to the x- and y-axes. The visualization uses D3 v5 scales and extent functions to compute domains, and custom React components render the axes and circular marks. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

DDonald Bagwell
96% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A React scatter plot displays the Iris Dataset with interactive dropdown menus for selecting which attributes map to the X and Y axes. Two ReactDropdown components control the axes, updating the visualization through React state and re-rendering D3 scales created with `scaleLinear` and `extent`. The SVG chart uses reusable `AxisBottom`, `AxisLeft`, and `Marks` components for rendering ticks, labels, and circles with tooltips via the `<title>` element, styled with Poppins typography and a muted color palette.

MMarcelo
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…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, with menus that let the user select which attributes map to the X and Y axes, dynamically updating the visualization. The plot renders 150 circles as SVG marks, using D3’s `scaleLinear` for axis scaling and `extent` for domain calculation, while React manages state for the chosen attributes. Axis ticks are generated by D3’s scale `ticks` method, and tooltips appear via SVG `<title>` elements. The data is loaded asynchronously with D3’s `csv` function from a GitHub-hosted CSV file.

CCheng Tang
95% 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
95% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris Dataset rendered as SVG circles, with interactive dropdown menus to select which measured attribute (sepal length, sepal width, petal length, petal width, or species) maps to the x- and y-axes. Built with React and d3.scaleLinear for axis scaling, the visualization updates axis labels and tick formatting in real time as menu selections change, with tooltips showing formatted x-values on hover.

MMohammed Jumail Shibily
95% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This example shows interactive scatter plots of the Iris dataset, allowing users to choose which floral measurements appear on the x- and y-axes via ReactDropdown menus. The visualization renders points as SVG circles using React components, with axes generated from d3.scaleLinear and d3.extent. Data is loaded asynchronously with d3.csv and parsed into numeric values. Axis ticks and labels are styled using CSS, and hover tooltips display formatted values via SVG title elements.

RRamashish Pandey
95% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x and y axes. Built with React and D3 v5, it renders SVG circles for each data point, using `scaleLinear` and `extent` to compute scales. The `ReactDropdown` component updates the axis labels and values on selection.

Aamanoakane
94% match