Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Jul 28, 2021

Created on Jul 28, 2021

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend fades all non-matching data points and highlights the selected group. The visualization uses React components to render SVG circles scaled with d3.scaleLinear and colored by d3.scaleOrdinal, while the legend interacts through mouse events managed by React state.

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, showing petal length against sepal width with points colored by species. Hovering over a species name in the ordinal color legend highlights only the matching marks and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom SVG components for rendering. Data loads via `d3.csv` and interactivity relies on React state for hover handling.

CCherynJ

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

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width with colored circles representing species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for color mapping. An interactive color legend allows hovering over species names, which filters the displayed points by fading non-matching species while highlighting the selected group. The SVG rendering includes axes from `AxisBottom` and `AxisLeft`, with tooltips provided through SVG `<title>` elements.

CCherynJ

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

94% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

94% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset uses React and D3 v5 to position circles by petal length and sepal width, colored by species. Hovering over a legend entry fades unrelated marks and highlights only the matching species. The visualization includes custom React components for axes, marks, and an interactive color legend built with SVG. Data loads via d3.csv from a GitHub gist and scales come from d3.scaleLinear and scaleOrdinal.

EElliot Hill

93% match