Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React-dropdown Menus ScatterPlot (codeAlong)

Public visualization

Viewing a saved revision (read-only)

50192f48fb3a4e2b9ca0e9ee96baa559

React-dropdown Menus ScatterPlot (codeAlong)

0 stars1🌍 Public
Ttomahawk-jupiter
Last edited Jun 8, 2021
Created on Jun 7, 2021

This interactive scatter plot displays the Iris dataset, with dropdown menus on top that control which flower measurements (sepal length, sepal width, petal length, or petal width) appear on the X and Y axes. The visualization uses React hooks like useState to manage selected attributes and d3.scaleLinear to map data ranges to SVG coordinates for the scatterplot marks. The react-dropdown library provides the styled selection menus, while specialized React components (AxisBottom, AxisLeft, and Marks) render the axes and circles.

AI-generated description

Improve the basic version of a scatter plot with menus. A third part library is imported for the select elements.

Curran Kelleher tutorial Vid 7:46 aprox