Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interactive Colour Legend

Public visualization

Viewing a saved revision (read-only)

321e14f6b77647b2af154bb9f3ba7d9c

Interactive Colour Legend

0 stars0🌍 Public
HHollyClarke19
Last edited Apr 11, 2021
Created on Apr 11, 2021

This example shows an interactive scatter plot of the Iris dataset, encoding petal length and sepal width along the x- and y-axes, with species mapped to color. The ordinal color legend uses `d3.scaleOrdinal` with SVG circles; hovering over a legend item highlights only the corresponding species by filtering the data with React state. Non-hovered marks fade via opacity, and the axis components use `d3.scaleLinear` and `extent` to derive domains. The data loads asynchronously through `d3.csv`.

AI-generated description

A scatter plot showing the Iris dataset and the relationship between Petal Length and Sepal Width (adaptable to any variable) using D3 and React.