Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published1🌍 Public
Ssophburke
Last edited Oct 9, 2019
Created on Oct 7, 2019

A scatter plot of the Iris dataset displays sepal width against petal length, with points colored by species. An interactive color legend on the right filters the visualization: hovering over a species name highlights matching points while dimming all others to 20% opacity. Built with React and D3 v5, the example uses `scaleLinear` and `scaleOrdinal`, SVG circles, and `onMouseEnter`/`onMouseOut` events to drive the hover state. The data loads via `d3.csv` from a gist.

AI-generated description

A scatter plot of The Iris Dataset. Adding a color legend to it.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width with points colored by species. The color legend on the right is interactive: hovering over a species name fades all other points to 20% opacity, highlighting the selected group. The visualization uses React and D3 v6, leveraging `scaleOrdinal` for categorical colors, `scaleLinear` for axes, and SVG circles. Hovering over data points reveals tooltips via SVG `<title>` elements, while the legend’s `onMouseEnter` and `onMouseOut` handlers drive the filtering logic.

TTaweewat Somboonpanyakul
97% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset visualizes petal length against sepal width, with each point colored by species. An interactive color legend on the right highlights a selected species: hovering over a legend item fades non-matching points and re-renders the filtered subset on top. The example uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) and renders SVG circles, while `onMouseEnter` and `onMouseOut` handlers drive the hover state and opacity transitions.

Ttrissentety
97% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over the color legend dims non-matching points, creating an interactive filter. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage the hovered value. SVG circles render the data, while the legend triggers `onMouseEnter` and `onMouseOut` events to update opacity.

Nnaisargidave
97% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. An interactive color legend on the right highlights points of a selected species while fading all others. Built with React and D3, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles. Mouse events on the legend trigger a re-render that filters the data into separate highlighted and faded point layers.

WWei-Che Chang
97% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. Hovering over a species in the interactive color legend fades all other points to 20% opacity, highlighting only the selected group. The visualization is built with React and D3 v5, using `scaleOrdinal`, `scaleLinear`, and SVG circles, with data loaded via `d3.csv` from a gist.

AAnthony Zornig
97% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses the classic Iris dataset to explore relationships between sepal length and width, with points colored by species. A custom color legend on the right allows users to hover over species labels, which fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses `scaleOrdinal` for species coloring, `scaleLinear` for axes, and SVG rendering. The color legend reacts to mouse events via React's `onMouseEnter` and `onMouseOut` handlers.

Rrstrauss127
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal width. Users can hover over the color legend to highlight data points belonging to a specific species, with non-matching points fading to 20% opacity. Built with React state management and D3 v7 scales (`scaleLinear`, `scaleOrdinal`), the visualization renders SVG circles with axis components replicated from the gallery. The color legend itself responds to mouse events, triggering filtering logic that redraws highlighted marks on top of the dimmed full dataset.

Jjbruzzo
96% match