Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
OOlof Ollerstam
Last edited Jul 7, 2022
Created on Jan 4, 2022

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris varieties. The d3.scaleOrdinal color scale encodes species, while d3.scaleLinear handles both axes. Hovering over any item in the React-rendered color legend highlights matching points and fades the rest using opacity transitions, driven by state management in React hooks.

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

Interactive Color Legend

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.

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

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. Users can hover over the ordinal color legend to highlight points of a selected species while fading others, using React state to manage hover interactions. The visualization is rendered with SVG elements, with axes and scales built using d3.scaleLinear and d3.scaleOrdinal, while d3.csv loads the dataset.

TTatyana Milanova
96% 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
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width for three species. Hovering over a category in the color legend highlights the corresponding data points while fading all others, using React state to track the hovered value. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders with SVG, and leverages React components like Marks and ColorLegend to manage the interactive behavior.

Yyejichun@naver.com
96% match