Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
Ssamozarif@gmail.com
Last edited Nov 6, 2024
Created on Nov 6, 2024

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.

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, 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
96% 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
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

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

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width with points colored by species. The visualization uses react and d3.scaleOrdinal for coloring, d3.scaleLinear for positioning, and SVG for rendering. Hovering over a species in the color legend highlights only those data points, while non-matching points fade to 20% opacity, implemented through React's useState hook for hover state management.

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

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying sepal width against petal length. Each point is colored by species, with a color legend on the right. Hovering over a legend item highlights the corresponding species’ data points while fading others, using React state for interactivity. The visualization is rendered as an SVG using React components and D3 v5 scales, including `scaleLinear` and `scaleOrdinal`, with CSV data loaded via D3’s `csv` function.

Pparshwa30122002@gmail.com
93% match