Interactive Color Legend

100%

Interactive Color Legend

✓ Published1🌍 Public

Last edited May 17, 2022

Created on May 16, 2022

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.

AI-generated description

A scatter plot with an interactive color legend using the Iris Dataset 'https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv';

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

97% 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

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

96% 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

96% 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_

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

AAnthony Ynami

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights points of a selected species by dimming all others to 20% opacity when the mouse hovers over a legend entry. The visualization is built with React and d3.v5, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data. SVG rendering handles both the marks and legend interactions.

AAjayyy

96% 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

96% match