Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited May 15, 2021

Created on May 15, 2021

This interactive scatter plot displays the Iris flower dataset, mapping petal length and sepal width on the axes while coloring each point by species. A custom color legend uses d3.scaleOrdinal to encode species categories, and hovering over a legend item highlights only the corresponding points while fading the rest. The visualization is built with React and d3.v5, rendering to SVG, with a d3.scaleLinear for axes and a d3.csv data loader.

AI-generated description

Interactive Color Legend

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

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

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species encoded by color. Hovering over a legend item dims all non-matching data points, highlighting the selected species. The visualization uses React for component structure, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading, rendering as an SVG with mouse events triggering the filtering effect.

BbeauMarko

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

96% match

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over a species name in the color legend dims all other points to highlight the selected group. The visualization uses React hooks to manage hover state and re-render the SVG, with scales from d3.scaleLinear and d3.scaleOrdinal. Axes and legend ticks are built from reusable React components, and the data is loaded via d3.csv.

GGeniXiong

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