Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
Aabhineetsingh10
Last edited Aug 9, 2022
Created on Aug 9, 2022

This interactive scatter plot visualizes the Iris dataset, encoding different flower species by color. Hovering over a color legend highlights only the corresponding species while fading all other points. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for positioning and color, SVG circles for marks, and custom React components for axes and the interactive color legend.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis, sepal width on the y-axis, and coloring each point by species. Hovering over a species in the color legend highlights only that species' data points while fading others to 20% opacity. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` from d3 for scales, with SVG circles rendered from the dataset loaded via `csv`.

AAbdullah Al Munem
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris Dataset shows how hovering over a color legend highlights individual species and fades the others. Built with React and D3 v5, it renders SVG circles for each flower. The color legend uses an ordinal scale, and hover events trigger opacity changes to emphasize the selected species, demonstrating a reusable pattern for coordinated highlights across linked visualizations.

JJean David
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Hovering over a species in the color legend highlights only those data points while fading the rest. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and SVG circles for marks.

AAnnie Ulichney
94% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species label in the color legend fades non-matching points to 20% opacity while highlighting the selected group. Built with React and D3 v5, the code uses `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, rendering SVG circles and axes via reusable components. The color legend triggers hover events through React state to dynamically filter and emphasize data points.

MMatthew Talty Colvard
94% 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
94% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

JJONATHAN SIMON
94% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width for three flower species. Hovering over a species in the color legend highlights only that species’ data points while dimming all others. The visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and coloring, and SVG circles for rendering. The color legend implements mouse-event handlers to update hovered state, which filters the data and adjusts opacity for the fade effect.

AAllOneeeee
94% 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
94% match