Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
GGuo Ci
Last edited Jul 11, 2024
Created on Jul 11, 2024

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.

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

Fork of Interactive Color Legend

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.

Oownerofthesoul0000@gmail.com
95% match
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
94% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with points colored by species. Hovering over a species name in the color legend highlights only the corresponding points while fading the rest. The visualization is built with React and D3 v5, using `d3.scaleOrdinal` for color mapping and D3 scales for positioning. SVG rendering with interactive mouse events on legend ticks enables the filtering behavior.

Bbillmccabeusa@hotmail.com
94% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with points colored by species. A color legend on the right allows users to hover over a species name, which fades all non-matching points to 20% opacity while highlighting the selected group. The visualization uses React for the interface, d3.v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders as SVG. The code also includes native tooltips showing the x-axis value on hover.

TTOLBA Rafik
94% 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
94% 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
94% match