Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interactive Colour Legend

Public visualization

Viewing a saved revision (read-only)

a4f21fd7fd884b0f8b82c0ab0001c9d6

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.