Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 4, 2020

Created on Sep 24, 2020

This interactive scatter plot of the Iris Dataset visualizes petal length against sepal width, with points colored by species. Hovering over a color legend entry highlights that species’s points while fading others, implemented through React state and mouse events. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders SVG circles via React components, and loads CSV data with d3.csv.

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

98% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias

98% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each species distinguished by color. Hovering over the color legend highlights points from the corresponding species while dimming all others, making species comparisons intuitive. Built with React and rendered as SVG, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for axes, marks, and the interactive legend. Data is loaded asynchronously from a CSV using d3.csv, with tooltips provided via SVG title elements.

AAgustina Farias

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

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

97% match

Loading thumbnail…

Interactive Colour Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species indicated by color. The React-based visualization uses D3.js scales (scaleLinear, scaleOrdinal) and SVG rendering. Users can hover over the color legend to highlight points from a specific species while dimming others, achieved through React state management (useState) that toggles opacity values on the marks and legend items. The data loads asynchronously via D3's csv parser.

CChris Briggs

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

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

97% match