Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
Oownerofthesoul0000@gmail.com
Last edited Feb 15, 2024
Created on Feb 15, 2024

This example visualizes the Iris Dataset as a scatter plot using D3 v7, displaying sepal length versus petal length with points colored by species via `scaleOrdinal` and `schemeCategory10`. A color legend renders each species as a labeled circle using `colorLegend`, and hovering over a legend tick dynamically adjusts the opacity of matching scatterplot marks through `setHoveredValue` and `hoveredValue` state. The visualization uses D3’s `selection.join`, `scaleLinear` for axes, and `csvParse` for data loading.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

Hover on the color legend to highlight the marks that match!

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the Iris Dataset with a scatter plot of sepal length against petal length, coloring each point by species. An interactive color legend lists the three species; hovering over a legend entry highlights the corresponding marks by adjusting their opacity, while dimming the rest. The chart uses D3 v7 APIs including `scaleOrdinal`, `schemeCategory10`, `selection.join`, and event handlers for mouseover and mouseout. Data is loaded asynchronously from a CSV and parsed with `csvParse`.

LLacene Dihia
96% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing sepal length against petal length with points colored by species. Hovering over a color legend highlights marks of that species while dimming others. Built with D3.js, it uses `d3.scaleLinear` and `d3.scaleOrdinal` with `schemeCategory10`, while the legend interacts via `setHoveredValue` and `hoveredValue` state. The code leverages `selection.join` for smooth updates and `d3.axisBottom` and `d3.axisLeft` for axes.

GGuo Ci
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying sepal length versus petal length with points colored by species using d3.scaleOrdinal and schemeCategory10. Hovering over the color legend highlights marks matching that species while dimming others, managed through a hoveredValue state and mouseover events. The visualization uses d3-selection joins (selection.join) for efficient SVG updates, with axes and labels rendered via custom functions built on d3.axisLeft, d3.axisBottom, and linear scales.

Ssamozarif@gmail.com
93% match
Loading thumbnail…

Fork of Interactive Color Legend

A fork of the "Interactive Color Legend" visualization, this scatter plot displays the classic Iris Dataset, plotting sepal length against petal length. The visualization uses D3.js, specifically `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for color mapping. Hovering over a color legend item highlights the corresponding data points in the plot, while dimming others, using a `selection.join` pattern. The interaction is managed through state handling with `setHoveredValue` and `hoveredValue`, showcasing an effective way to explore categorical data.

Ssunnyshih0312@gmail.com
93% match
Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows petal length versus sepal width, with points colored by species. Hovering over a species in the color legend dims all other points and highlights only that species. The visualization uses React components with D3 scales from `d3.scaleLinear` and `d3.scaleOrdinal`, rendering as SVG circles and axis ticks. Data is loaded via `d3.csv` from a GitHub Gist.

GGeekboxer
93% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width, with each species colored and listed in a hoverable color legend. Hovering over a species name in the legend fades non-matching points to a low opacity while highlighting the corresponding data. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color mapping, with SVG rendering for all marks and interactive legend elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Iihevs
93% match
Loading thumbnail…

Fork of Interactive Color Legend

This example presents an interactive scatter plot of the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend allows hovering over a species to highlight its corresponding points and fade the others. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles rendered by custom React components. Data is loaded asynchronously via `d3.csv` from a remote gist.

Llindy0119
92% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with each point colored by species. Hovering over a species in the color legend highlights only points of that species by increasing their opacity while dimming others. The visualization uses React with D3 scales, including `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors. It fetches data via `d3.csv` and renders all marks and the legend as SVG circles.

CCheng Tang
92% match