Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Dec 17, 2019

Created on Dec 17, 2019

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width and coloring each point by species. Using React and d3.scaleOrdinal, hovering over a color legend entry highlights that species’ circle by raising its opacity from 0.2 to full strength, while dimming the others. The chart includes axis labels and a formatted tick axis using d3.format.

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, plotting petal length against sepal width. The color legend, implemented using d3.scaleOrdinal, indicates species. When hovering over a legend item, a React state variable filters the data to highlight only the selected species, dimming all other points through an opacity change. The chart is rendered as an SVG using React, with axes built from d3.scaleLinear.

RRudy Shayganfar

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width while encoding species through color. The visualization uses a React-based color legend with d3-scaleOrdinal to create a clickable legend that filters and highlights specific species. When hovering over a legend item, the corresponding data points remain fully opaque while all other circles fade to 20% opacity, created through conditional opacity logic. The chart uses d3.scaleLinear for both axes and renders as SVG, with data loaded via d3.csv from a GitHub gist.

MMichael Bergerson

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

97% match

Loading thumbnail…

Interactive Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width, with points colored by species. The visualization includes an interactive color legend on the right that allows users to highlight specific species by hovering over the legend items. When a legend item is hovered, the corresponding species’ points remain at full opacity while all other points fade to 20% opacity. The chart is built using React with D3 scales (`d3.scaleLinear`, `d3.scaleOrdinal`), rendered as SVG, and includes custom axis components for tick marks and labels.

RRajat Dangat

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

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

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

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

97% match