Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited May 24, 2020

Created on May 10, 2020

This interactive scatter plot displays the Iris dataset, plotting total students against department on linear scales. Users can hover over the color legend to highlight points of a selected gender category while fading others, using React’s `useState` to manage hover state. The visualization uses `d3.scaleOrdinal` for categorical colors, `d3.scaleLinear` for axes, and renders SVG circles via React components. Data loads asynchronously from a CSV using `d3.csv`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Users select X and Y axes via dropdown menus, and hover over the categorical color legend to highlight points of a particular Iris species while fading others. The visualization uses React with hooks for state management, d3.scaleLinear and d3.scaleOrdinal for scales, and renders SVG marks via React components. Data is loaded asynchronously with d3.csv.

MmohitPassan

89% match

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes map to the x and y axes via React dropdown menus. A color legend for species acts as a filter: hovering over a legend item fades non-matching points and highlights those of the selected species. The visualization uses React state for UI interactions, D3 scales and axes for rendering the SVG marks (d3.scaleLinear, d3.scaleOrdinal), and the d3.csv utility for loading data.

CChristian Potdevin

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

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

89% match

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris Dataset displays sepal length against sepal width, with points colored by species via a categorical scale. Hovering over the color legend highlights that species' points while fading others to 20% opacity. The visualization uses React with d3-scale for linear and ordinal scales, rendering SVG circles and axes with custom components. Data loads from a CSV via d3.csv, and interactivity relies on React state for hovered values.

GGayan Priyadarshana

89% match

Loading thumbnail…

Interactive Color Legend

An interactive scatterplot of the Iris flower dataset, where users can select which attributes to plot on the X and Y axes via React dropdowns. Hovering over the color legend highlights points of a specific species, dimming all others. The visualization uses React with D3 v5 for scales and SVG rendering, with axes and marks built from reusable components. Data is loaded via `d3.csv` from a remote gist.

Ccynichole

89% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias

89% match

Loading thumbnail…

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while colors distinguish species. A custom color legend enables highlighting individual species by hovering, which fades non-matching points to reveal patterns. Built with React and D3 v5, it uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG circles rendered from CSV data loaded via d3.csv.

AAndrea Picciau

89% match