Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Dec 16, 2021

Created on Dec 16, 2021

This interactive scatter plot visualizes the Iris dataset, showing petal length versus sepal width for three species of iris flowers. A static SVG renders circles for each data point, colored by species via a D3 ordinal scale. Hovering over a species label in the adjacent color legend fades out non-matching points and highlights the selected group. The implementation uses D3 scales (`scaleLinear`, `scaleOrdinal`) for axes and colors, React hooks for hover state, and renders everything as SVG elements.

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

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris dataset maps petal length against sepal width, with each species represented by a distinct color. Users can hover over the color legend to highlight points of a particular species while dimming all others, using React state for hover tracking. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading and scaling, with SVG rendering through React components for axes, marks, and the interactive legend.

Eevers-codeshop-ai

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset with petal length on the x-axis and sepal width on the y-axis, colored by species. It uses D3 scales for positioning and color encoding, with React components rendering SVG circles and axes. Hovering over a species in the color legend highlights only the corresponding data points while dimming the rest, leveraging D3's scaleOrdinal and React state for interactivity. The data is loaded via d3.csv from a remote Gist.

RRecep Tiryaki

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

Llimath

97% match