Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Nov 1, 2021

Created on Nov 1, 2021

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three species. Hovering over a color legend item highlights the corresponding species' data points while fading all others. Built with React, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles for marks.

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

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

97% match

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. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup

97% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

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