Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Feb 10, 2023

Created on Feb 9, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 maps petal length and sepal width, with points colored by species. The interactive color legend uses React state to track a hovered species, which fades all non-matching marks via `opacity` and re-renders the filtered subset. Built with React, D3 v5 scales (`scaleLinear`, `scaleOrdinal`), and SVG circles, it updates through `MouseEnter` and `MouseOut` events on legend items.

RRussell Watson

97% match

Loading thumbnail…

Interactive Color Legend

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.

Ssophburke

97% match

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays petal length against sepal width, with points colored by species. An interactive color legend lets viewers hover over species names, which highlights only matching data points while fading all others. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and SVG circles rendered through React components. Hover state is managed with React's useState hook, triggering opacity transitions on both legend items and the scatter plot marks.

Ttharuta

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width across three species. Hovering over a species in the color legend highlights points of that species while fading all others to 20% opacity. The visualization uses React components with d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, rendering as SVG. The color legend responds to mouse events via onMouseEnter and onMouseOut handlers, demonstrating a linked-highlight interaction pattern.

Wwhiteswallow87

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

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

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

97% match