Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Jul 17, 2021

Created on Jul 17, 2021

A scatter plot of the iris dataset shows petal length against sepal width, colored by species. The visualization includes an interactive color legend; hovering over a species name in the legend highlights only the points of that species in full opacity, while all other marks fade to 20% opacity. Built with React and D3 v5, the example uses `d3.scaleLinear` and `d3.scaleOrdinal` for axes and color mapping, with SVG rendering for the marks and 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 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 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, 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, 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.

JJoshuoYang

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

96% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows how petal length and sepal width relate across three flower species, with a color-coded legend that filters data points on hover. Built with React and rendered as SVG using D3 v5 scales (`scaleLinear`, `scaleOrdinal`), the visualization uses circle marks and interactive legend ticks that fade unrelated points. The legend and axes are constructed from reusable components, and the data is loaded via D3’s CSV parser.

Mmfakboo

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

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

96% match