Skip to main content
100%

Interactive Colour Legend

✓ Published0🌍 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.

MIT Licensed

Similar vizzes