Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
KKazushige Okuma
Last edited Oct 23, 2021
Created on Oct 23, 2021

This interactive scatter plot displays the Iris flower dataset, where users can select which quantitative attributes (like sepal length or petal width) to plot on the X and Y axes via two dropdown menus built with React’s `useState` and the custom `Dropdown` component. The axes and points are rendered as SVG elements using `d3.scaleLinear` and `d3.extent` for scaling, with tick marks generated by the `AxisBottom` and `AxisLeft` components. Each data point includes a native `<title>` tooltip showing its numeric value.

AI-generated description

Scatter plot of Iris Data Set

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting measurements like sepal length and width against each other. Two dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with the axes labels updating accordingly. The visualization is built with React and D3 v5, using scaleLinear for both axes and SVG circles for each data point, with axis components rendered as reusable React functions. The dataset is loaded as CSV from a GitHub gist using d3.csv, and the ReactDropdown component provides the menu interface.

Bbsolomon103
96% 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
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against one another. Two dropdown menus let a viewer select which attribute appears on the x- and y-axes, with the scales and axes updating accordingly. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` to compute domains, and `csv` to load data from a remote URL. Circles are rendered as SVG elements, with native `<title>` tooltips showing formatted values. The chart reflects user selections through React state and the `Dropdown` component.

LLewis Ward
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus allow users to dynamically select which attributes appear on the X and Y axes, with all five available measurements (including species) as options. Built with React and D3 v5, the visualization updates scales and axes reactively when selections change, rendering points as SVG circles with tooltips. The code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom React components like `AxisBottom`, `AxisLeft`, and `Dropdown` to structure the interface.

EEdgar Alves
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Ttharuta
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 three flower species. Two dropdown menus, built with ReactDropdown, dynamically control which attributes map to the x and y axes, with the species determining point color through a d3.scaleOrdinal color scale. The React-based visualization uses d3.scaleLinear for axes, renders SVG circles via the Marks component, and includes tooltips showing formatted values. Data loading is handled by d3.csv with type coercion for numeric columns.

Vvmonney
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 attribute is plotted on the x-axis and y-axis, with the chart updating dynamically to reflect their choices. Built with React and D3 v5, the visualization renders points as SVG circles, using D3’s scaleLinear and extent for axis scaling. The code employs reusable components for axes, marks, and dropdowns, with axis labels and tick formatting courtesy of D3’s format function.

AAudrey
95% match