Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jul 1, 2022

This example visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers, colored by species. Hovering over a species in the interactive color legend highlights only the corresponding points, fading the rest. Built with D3 v5 scales and React components, the scatter plot uses the `scaleLinear` and `scaleOrdinal` APIs, and renders SVG circles via custom `Marks` and `ColorLegend` components. Data is loaded as CSV using `d3.csv`.

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 each species colored and listed in a hoverable color legend. Hovering over a species name in the legend fades non-matching points to a low opacity while highlighting the corresponding data. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color mapping, with SVG rendering for all marks and interactive legend elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Iihevs

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

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

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

95% match

Loading thumbnail…

Fork of Interactive Color Legend

This example presents an interactive scatter plot of the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend allows hovering over a species to highlight its corresponding points and fade the others. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles rendered by custom React components. Data is loaded asynchronously via `d3.csv` from a remote gist.

Llindy0119

95% match

Loading thumbnail…

Fork of Interactive Color Legend

This example displays the classic Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. Hovering over a species in the interactive color legend highlights only the corresponding points while fading the rest. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for colors, and reusable axis components. The legend itself is implemented as a custom `ColorLegend` component that manages hover states and applies a configurable fade opacity to non-matching data points.

JJesus Angel

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

95% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. Hovering over a species in the color legend highlights only that species’ points while dimming others. The visualization uses React with D3 v5 scales and axes, including `scaleLinear`, `scaleOrdinal`, `AxisBottom`, and `AxisLeft`. The custom `ColorLegend` component handles hover interactions, while `Marks` renders the SVG circles with tooltips. Data is loaded via `d3.csv` from a GitHub gist.

MMohaimin-1935

95% match