Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
Ffjvoris
Last edited Mar 5, 2023
Created on Mar 5, 2023

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width for three species. Hovering over the color legend highlights points of that species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` to load and scale data, while custom React components for axes, marks, and legend handle interactive filtering through state.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, showing sepal width against sepal length with points colored by species. A color legend allows users to hover over species names, highlighting only that species’ data points while dimming others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with data loaded via `d3.csv` from a public GitHub repository.

Bbsolomon103
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width. Users can hover over the color legend to highlight data points of a specific species, which fade all other points to 20% opacity. The visualization uses D3.js scales for positions and colors, rendered as SVG through React components. The legend is built using D3's `scaleOrdinal` domain mapping, with hover events managed by React's `useState` hook.

Aafcchilders
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

AAnthony Ynami
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species. The color legend on the right filters and highlights points by species when hovered, while non-matching species fade to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for marks, axes, and the legend. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and all elements are rendered as SVG.

Mmuhammadshumas
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each species distinguished by color. Hovering over the color legend highlights points from the corresponding species while dimming all others, making species comparisons intuitive. Built with React and rendered as SVG, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for axes, marks, and the interactive legend. Data is loaded asynchronously from a CSV using d3.csv, with tooltips provided via SVG title elements.

AAgustina Farias
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements by selecting variables from dropdown menus. A color legend maps the three Iris species to distinct hues; hovering over a species name highlights only those data points while fading all others, making group distinctions immediately apparent. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and native SVG circles for marks. The data is loaded as CSV using D3's `csv` utility.

TThe-World-Muda
95% match
Loading thumbnail…

Interactive Colors Legend

This interactive scatterplot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Users select X and Y axis attributes via dropdown menus, while a color legend on the right encodes species with interactive hover highlighting. The visualization uses React with d3-scale for linear and ordinal scaling, d3.csv for data loading, and SVG rendering. Hovering over a legend entry fades non-matching points and highlights the selected species, providing focused comparison within the dataset.

Kkragovic
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species encoded by color. Hovering over a legend item dims all non-matching data points, highlighting the selected species. The visualization uses React for component structure, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading, rendering as an SVG with mouse events triggering the filtering effect.

BbeauMarko
95% match