Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 14, 2022

Created on Oct 14, 2022

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species in the color legend highlights only that species’ points while dimming the others. Built with D3 v5 scales and React components, the visualization uses SVG circles for marks and implements hover interactions through React state and mouse events. The color legend uses `d3.scaleOrdinal` and supports opacity fading via the `fadeOpacity` prop.

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, plotting petal length against sepal width for three species of iris flowers. Users can hover over a species in the color legend to highlight only those corresponding data points while fading the others. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles rendered via React components. The legend interactions manage hover state to dynamically adjust opacity, providing a clear comparison between species.

Wwzhang88

97% 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

97% 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

97% 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

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width, with each point colored by species. A D3 ordinal color scale maps the three species to distinct hues, while an interactive color legend highlights points of a selected species by fading the others. Built with React and D3 v5, the visualization uses SVG circles for marks, with hover events on the legend triggering opacity changes and filtering of data points.

Eeliarech

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species name in the color legend fades all non-matching data points while highlighting the selected species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. All marks and axes are rendered as SVG elements, with CSS transitions controlled by React state handling hover interactions.

Ddr-rompecabezas

97% 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

97% 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

97% match