Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 10, 2021

Created on Oct 10, 2021

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width for three iris species. Hovering over legend items highlights the corresponding species while fading others, enabling quick comparisons. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and SVG circles for marks. The legend responds to `onMouseEnter` and `onMouseOut` events, revealing all data points at full opacity when no species is selected.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. A color legend categorizes data points by species, and hovering over a legend item highlights the corresponding points while fading others to 20% opacity. The visualization is built with React and D3 v5, using `scaleOrdinal` for color mapping and programmatically generated SVG components for axes and marks.

Vvmonney

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

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

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. Hovering over the color legend highlights points of the selected species while fading the opacity of others, using React state to manage the hovered value. The visualization is built with React and d3.v5, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and an SVG-based color legend with `onMouseEnter` and `onMouseOut` handlers.

CChen Ding

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. The chart uses color-encoded circles to represent different iris species, with hover interactions on the legend highlighting data points of a selected species. Built with React and D3 (d3.scaleLinear, d3.scaleOrdinal), the visualization renders as SVG, featuring both full and filtered data marks with faded opacity for non-selected categories.

Yyptang5488

94% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width with species encoded by color. Hovering over a color legend entry highlights the corresponding species’ circles while dimming all others. Built with React and D3 v5, the code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent for scales, while rendering SVG circles via custom components. The legend triggers hover states that filter data for emphasis, and axes are generated with d3-format for tick labels.

Jjuanmy400

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

94% match