Scatter plot with menus

100%

Scatter plot with menus

✓ Published0🌍 Public

Last edited Nov 22, 2021

Created on Nov 22, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot w/ Menus

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.

AAnthony Ynami

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

94% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as an SVG in React, with dropdown menus that let the viewer change which flower measurements appear on the x- and y-axes. The plot uses d3.scaleLinear and d3.extent to map data to pixel coordinates, with custom React components for the axes and marks. Data is loaded as CSV via d3.csv, and each circle includes a native SVG title tooltip.

Wweny1109

94% match

Loading thumbnail…

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

SSophia Cofone

94% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays the Iris flower dataset, using two dropdown menus to select which attributes are plotted on the x- and y-axes. Built with React and D3 v6, the visualization renders data points as SVG circles with tooltips showing exact values. The code uses D3's `scaleLinear` for axis scaling and `csv` for data loading, while React's `useState` and `useEffect` hooks manage menu selections and asynchronous data fetching.

Ssurikmeetr

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

93% 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

93% match