Skip to main content
SimilarExport ZIP
100%

35) Interactive Color Legend

✓ Published0🌍 Public
Llefat92
Last edited Aug 20, 2023
Created on Aug 20, 2023
Forked from Color Legends

This interactive scatter plot visualizes the Iris dataset’s petal length and sepal width, colored by species. A hoverable color legend lets users highlight points of a single species while fading others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with mouse events on legend items updating state to toggle point opacity via the `Marks` and `ColorLegend` components.

AI-generated description

A program that loads in the Iris data set and and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width with a color legend for species. Hovering over a legend item fades non-matching points and highlights the selected species. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for axes and colors, with SVG circles rendered via custom `Marks` and `ColorLegend` components.

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

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Wwenleicao
94% match