Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React
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 descriptionA 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.
Comments
Sign in to join the discussion.