Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
AAmir
Last edited Mar 2, 2021
Created on Mar 2, 2021

This interactive color legend displays the Iris dataset's sepal length and width, using color to encode species. Hovering over a legend item fades all other data points while highlighting the selected species, making it easy to compare groups. Built with React and D3 v6, the visualization renders circles as an SVG and uses `scaleOrdinal` for color mapping and `scaleLinear` for axes. The legend's `onMouseEnter` and `onMouseOut` events drive the interactive filtering, while the chart's circles respond to the hover state.

AI-generated description

United Nation Population Bar Chart

MIT Licensed

Similar vizzes

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
94% 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
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against sepal width with points colored by species. Hovering over the color legend highlights the corresponding species by increasing the opacity of its data points while fading others. The visualization uses React with D3 v7 scales and SVG rendering, including custom AxisBottom, AxisLeft, Marks, and ColorLegend components. The color legend employs mouse events to trigger the hover state, with the ordinal color scale mapping three distinct species to individual colors.

SSong Tao Chen
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width. Users can hover over the color legend to highlight data points of a specific species, which fade all other points to 20% opacity. The visualization uses D3.js scales for positions and colors, rendered as SVG through React components. The legend is built using D3's `scaleOrdinal` domain mapping, with hover events managed by React's `useState` hook.

Aafcchilders
94% 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
94% 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
94% match
Loading thumbnail…

Interactive Color Legend

This interactive color legend visualizes the Iris dataset as a scatter plot, where hovering over a species name in the legend highlights only the corresponding data points while dimming the rest. The chart uses React with D3 scales to map sepal and petal measurements to x and y positions, while a D3 ordinal color scale assigns distinct colors to each species. The ColorLegend component triggers hover state updates that filter the rendered marks, and native SVG circle titles provide simple tooltips on data points.

PPeter Krevenets
93% 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
93% match