Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This interactive scatter plot visualizes the Iris dataset, plotting days since the first attack against distance from it, with points colored by region. Hovering over a region in the color legend highlights matching data points and fades the rest, providing a clear way to explore categorical groupings. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and a custom `ColorLegend` component that tracks hover 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 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

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

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

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

92% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. A React-driven color legend allows users to hover over species names, which highlights matching data points and fades all others using opacity transitions. Built with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and SVG circles rendered through React components, the visualization responds to hover events via useState and onMouseEnter handlers to filter and re-render marks dynamically.

Llucas-langlois

92% match

Loading thumbnail…

Fork of Interactive Color Legend

Llucas-langlois

92% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

JJONATHAN SIMON

92% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with species encoded by color. Built with React and d3.v5, it uses D3 scales for linear axes and an ordinal color scale. Hovering over the color legend highlights data points of that species while fading others, demonstrating an interactive legend pattern.

RRoberto

92% match