Scatter Plot w/ Menus

100%

Scatter Plot w/ Menus

✓ Published1🌍 Public

Last edited Feb 22, 2021

Created on Feb 21, 2021

Two dropdown menus let a viewer select which measurements of the Iris dataset appear on the x and y axes of an interactive scatter plot. The React app uses D3 v6 scales (`scaleLinear`, `extent`) to map values to an SVG canvas, while `AxisBottom` and `AxisLeft` render tick marks. Changing a menu updates the corresponding axis label and point positions via `useState`. The data is loaded from a CSV with `d3.csv`, and hovering over a circle reveals its exact value through a native SVG `<title>` tooltip.

AI-generated description

A Scatter Plot of the Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Menus

Two dropdown menus control which numeric measurements from the Iris dataset appear on the x- and y-axes of an SVG scatterplot. Built with React and D3 v7, the visualization uses `d3.scaleLinear` to map sepal and petal dimensions to axes, rendering circles with a constant radius. The code constructs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and updates the plot dynamically through React state when menu selections change. Data is loaded asynchronously via `d3.csv` from Curran’s gist.

Rrmgoldberg24

95% match

Loading thumbnail…

Scatter plot with menus

Two dropdown menus let viewers choose which Iris flower measurements appear on the x and y axes of an SVG scatter plot. The React app loads the Iris dataset via `d3.csv` and uses `d3.scaleLinear` and `d3.extent` to set domains, while custom React components render axes and circles. As the menu selections change, the axes rescale and the scatter plot updates with the newly selected attributes, using `d3.format` for tick labels.

DDaniel Zsido

94% match

Loading thumbnail…

Scatter Plot With Menus

Three dropdown menus control the X and Y axes of a scatter plot, displaying Iris flower measurements from the classic dataset. Users select from attributes like sepal length or petal width, updating the plot dynamically. The React app uses `d3.scaleLinear`, `extent`, and `csv` for data loading and scaling. SVG circles render the points with tooltips, while axis components built with React generate ticks and labels.

NNick Pearson

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Jjbruzzo

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements for three flower species. Two dropdown menus let users independently select which attributes to plot on the X and Y axes. Built with React and D3, the visualization uses `scaleLinear` for axes and SVG circles for data points. Hovering reveals tooltips with formatted values. The React app manages state for axis selections and loads CSV data via D3's `csv` function, rendering axes and marks as React components with D3 scales.

RRay Yang

94% match

Loading thumbnail…

Scatter Plots: Part 2 - Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis labels updating to reflect the selected measurements. The code leverages `d3.scaleLinear` for continuous scales, `d3.extent` for domain calculation, and custom `AxisBottom` and `AxisLeft` components to generate tick marks. Dataset values are loaded asynchronously through a `useData` hook that parses CSV data using `d3.csv`.

Zzeeeeem

93% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements appear on the x- and y-axes using two React dropdown menus. The visualization uses React state to manage the selected attributes, and D3 v5 functions like `scaleLinear` and `extent` to compute scales from the CSV data. The SVG rendering includes custom React components for the axes, marks, and dropdowns, with circular points colored in teal that include native tooltips showing formatted values.

Ddumbdataguy@gmail.com

93% match

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus control which Iris flower measurements appear on the scatter plot’s x- and y-axes, with labels updating accordingly. Built with React and D3 v5, the visualization loads the classic Iris Dataset via `d3.csv`, maps the numeric fields to linear scales using `scaleLinear` and `extent`, and renders SVG circles for each data point. The `Dropdown` and `Marks` components handle the interactive selection and circle placement, while formatted tick labels and axis titles clarify the currently chosen attributes.

KKwame Porter Robinson

93% match