Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
Ssunnyshih0312@gmail.com
Last edited Sep 15, 2024
Created on Sep 15, 2024

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.

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

This interactive scatter plot uses the classic Iris Dataset to visualize petal length against sepal width, with species encoded by color. A color legend allows users to hover over species categories to highlight corresponding data points and fade the rest, revealing clusters and comparisons. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and mouse event handlers to manage hover states and opacity.

Cchiara01050105@gmail.com
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 shows the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend to the right of the plot allows hovering over a species name to highlight the corresponding points and fade all others. The visualization is built with React and D3's scaleLinear, scaleOrdinal, and csv loading functions, rendering SVG marks and axes. Hover interactions are managed through React state, with fading applied by adjusting opacity on both the legend entries and data circles.

Hhung2606
92% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. Users can hover over the color legend to highlight data points belonging to a specific species, with non-matching points fading to 20% opacity. The visualization is built using React and D3 v5, with SVG rendering. It uses `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and React state to manage hover interactions.

SStudentCZ
92% 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
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