Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

Public visualization

Viewing a saved revision (read-only)

fe71bcd464304311887f8bffec0ce8b4

Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

1 star1🌍 Public
PPhronesis
Last edited Nov 22, 2021
Created on Nov 22, 2021

This interactive scatter plot visualizes the classic iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses React and D3 v5 with SVG rendering, featuring dropdown menus to change the X and Y axes, which updates the plotted points and axis labels. A color legend maps the three iris species, and hovering over a species in the legend highlights its data points while dimming others. The code uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and React's `useState` to manage interactive state.

AI-generated description

A stylized scatter plot of the famous iris data set, using React to create menus and interactivity.

A more saturated color represented overlapping data points.

Selecting different options from the X and Y dropdown menus will change the axes on which the data is plotted, with labels to match.

Hovering over the species color legend will single out that species in the display.