Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

polished scatterplot with menu

Public visualization

Viewing a saved revision (read-only)

5d6a57a9e3e14a9785cfe071a5c54679

polished scatterplot with menu

0 stars1🌍 Public
Sseanowh
Last edited Sep 18, 2021
Created on Sep 18, 2021

This interactive scatterplot demonstrates relationships among Iris flower measurements, with dropdown menus that let users choose which attributes appear on the x and y axes. Two React Dropdown components update React state to trigger re-renders. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. Circle marks include tooltips showing formatted values, while axis labels rotate and reposition dynamically. Data loads from a CSV URL using `useEffect` and `d3.csv`.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.