Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
Ttharuta
Last edited Aug 7, 2021
Created on Aug 7, 2021

This interactive scatterplot of the Iris dataset uses an ordinal color scale to encode species, with a color legend that filters the displayed points on hover. Built with React and D3 v5, it leverages `scaleOrdinal`, `scaleLinear`, and `extent` to map sepal and petal measurements, while the legend’s `onMouseEnter` handler triggers state updates via `useState`. Axes are rendered using custom `AxisBottom` and `AxisLeft` components, and SVG circles represent data points.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width with a color-coded legend for species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for color mapping, rendering SVG circles. Hovering over a legend item filters the marks via `onMouseEnter` and `onMouseOut`, fading non-matching points to a specified opacity. The axes are generated with custom `AxisBottom` and `AxisLeft` components, and the data is loaded asynchronously using `csv` from `useData`.

Iidwann-eng
96% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays petal length against sepal width, with points colored by species. An interactive color legend lets viewers hover over species names, which highlights only matching data points while fading all others. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and SVG circles rendered through React components. Hover state is managed with React's useState hook, triggering opacity transitions on both legend items and the scatter plot marks.

Ttharuta
95% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with each point colored by species. Hovering over the color legend dims non-matching points, creating an interactive filter. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage the hovered value. SVG circles render the data, while the legend triggers `onMouseEnter` and `onMouseOut` events to update opacity.

Nnaisargidave
95% match
Loading thumbnail…

Interactive Color Legend

This scatter plot displays the classic Iris dataset, mapping petal length and sepal width with dots colored by species. Hovering over a species name in the color legend fades out all other points, highlighting the hovered category. Built with React and rendered as SVG, the visualization uses D3 scales (scaleLinear, scaleOrdinal) and custom components for axes and the interactive legend. The data loads via D3’s csv function, with hover effects managed through React state.

Ttharuta
95% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. An interactive color legend on the right highlights points of a selected species while fading all others. Built with React and D3, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles. Mouse events on the legend trigger a re-render that filters the data into separate highlighted and faded point layers.

WWei-Che Chang
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot explores the Iris dataset, mapping petal length against sepal width and encoding species by color. A custom color legend built with React and D3 scales allows users to hover over a species name, which highlights corresponding data points and fades the rest, revealing patterns in species separation. The visualization uses D3’s `scaleOrdinal` for color assignment and `scaleLinear` for axes, with SVG circles rendered as marks. Hovering also triggers a tooltip via the native SVG `<title>` element, providing precise values for each point.

GGiovanniD_
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. Hovering over the color legend highlights points of the selected species while fading the opacity of others, using React state to manage the hovered value. The visualization is built with React and d3.v5, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and an SVG-based color legend with `onMouseEnter` and `onMouseOut` handlers.

CChen Ding
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses the classic Iris dataset to explore relationships between sepal length and width, with points colored by species. A custom color legend on the right allows users to hover over species labels, which fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses `scaleOrdinal` for species coloring, `scaleLinear` for axes, and SVG rendering. The color legend reacts to mouse events via React's `onMouseEnter` and `onMouseOut` handlers.

Rrstrauss127
94% match