Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
PPeter Krevenets
Last edited Mar 26, 2021
Created on Mar 25, 2021

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.

AI-generated description

A scatter plot of Iris Data with interactive color legend.

MIT Licensed

Similar vizzes

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

Interactive Color Legend

This interactive scatter plot explores the Iris dataset, mapping petal length against sepal width and encoding species by color. A custom color legend built with React and D3 scales allows users to hover over a species name, which highlights corresponding data points and fades the rest, revealing patterns in species separation. The visualization uses D3’s `scaleOrdinal` for color assignment and `scaleLinear` for axes, with SVG circles rendered as marks. Hovering also triggers a tooltip via the native SVG `<title>` element, providing precise values for each point.

GGiovanniD_
95% 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 on the right highlights a selected species by fading all other circles to 20% opacity. React manages hover state via `useState`, while D3's `scaleOrdinal` maps species to colors and `d3.csv` loads the data. The SVG visualization uses custom React components for axes, marks, and the legend, rendering with `circle` elements and D3 scales.

Yyyaaa1
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width for three species. A color legend allows users to hover over species names, dimming all other points to highlight the selected group. The visualization uses React with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. SVG circles render the marks, while mouse events on the legend trigger state changes that adjust opacity via the fadeOpacity prop.

Wwindwaver
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width and using color to distinguish species. The visualization includes a color legend that responds to hover events, dimming all data points except those matching the hovered species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and SVG elements rendered declaratively through React components. The code implements hover interactions by tracking state and applying opacity transitions via the `ColorLegend` component.

Qqtrfx
94% 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
94% match