Simple Interactive Color Legend

100%

Simple Interactive Color Legend

✓ Published0🌍 Public

Last edited Aug 25, 2021

Created on Aug 25, 2021

This interactive scatter plot visualizes the Iris Dataset using React and SVG, with D3 scales for positioning and color encoding. The legend lists species names as colored circles, and hovering over a legend item triggers a fade effect that dims all non-matching data points while keeping the selected species fully opaque. The chart uses `scaleOrdinal` for categorical colors and `scaleLinear` for axes, with the hover state managed via React's `useState` hook.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend dims all points except those belonging to that species. The visualization uses React to manage hover state and render SVG elements, while d3.scaleOrdinal, d3.scaleLinear, and d3.extent handle color and positional scales. Marks are drawn as circles, and the legend triggers mouse events to filter the data for highlighting.

YYenTingWu

94% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length and sepal width on the x- and y-axes with species as color. A legend built with SVG circles and text responds to mouse hover, fading unrelated data points and highlighting the selected species. The code uses React hooks (`useState`) to manage the hovered value, D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and coloring, with data loaded asynchronously via `d3.csv`.

BBen Seebeck

93% match

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, letting viewers change the x-axis attribute via a dropdown and hover over a color legend to highlight points of a selected species. The React-based visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders all marks as SVG circles. Hovering the legend dims non-matching species while emphasizing the filtered data through a separate overlay layer built with array filtering.

AAnimesh Nautiyal

93% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Hovering over a color legend item fades all other species’ data points, highlighting the selected category. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color, with React components for rendering SVG marks and interactive state management.

Jjwlam83

93% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width with a color legend for species. Hovering over a legend item fades non-matching points and highlights the selected species. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for axes and colors, with SVG circles rendered via custom `Marks` and `ColorLegend` components.

MMATTE-blz

93% match

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

93% 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 on the right highlights a selected species by fading all other circles to 20% opacity. React manages hover state via `useState`, while D3's `scaleOrdinal` maps species to colors and `d3.csv` loads the data. The SVG visualization uses custom React components for axes, marks, and the legend, rendering with `circle` elements and D3 scales.

Yyyaaa1

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

93% match