Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
BBen Brophy
Last edited Jan 4, 2022
Created on Jan 3, 2022

A scatterplot of the Iris dataset displays petal length against sepal width, with each species colored distinctly. Hovering over a color legend item highlights that species’ points at full opacity while fading all others. The code uses React for component structure and SVG for rendering, with D3’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales and axes. Data loads via D3’s `csv` from a GitHub gist.

AI-generated description

A scatterplot of the Iris Dataset

MIT Licensed

Similar vizzes

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
96% 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 a species name in the color legend dims all other points to highlight the selected group. The visualization uses React hooks to manage hover state and re-render the SVG, with scales from d3.scaleLinear and d3.scaleOrdinal. Axes and legend ticks are built from reusable React components, and the data is loaded via d3.csv.

GGeniXiong
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 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
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with points colored by species. A color legend on the right allows hovering over a species name to highlight only its corresponding data points while fading the others to 20% opacity. The visualization is built using React with D3 scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and SVG rendering. Data is fetched via `d3.csv`. The code includes custom components for axes, color legend, and marks, with hover state managed through React hooks.

JJoe Hutchins
96% 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
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris Dataset visualizes petal length against sepal width, with points colored by species. Hovering over a color legend entry highlights that species’s points while fading others, implemented through React state and mouse events. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders SVG circles via React components, and loads CSV data with d3.csv.

JJepyagg
96% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays sepal width against petal length, with points colored by species. An interactive color legend on the right filters the visualization: hovering over a species name highlights matching points while dimming all others to 20% opacity. Built with React and D3 v5, the example uses `scaleLinear` and `scaleOrdinal`, SVG circles, and `onMouseEnter`/`onMouseOut` events to drive the hover state. The data loads via `d3.csv` from a gist.

Ssophburke
96% match
Loading thumbnail…

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 interactive color legend fades all other points to 20% opacity, highlighting only the selected group. The visualization is built with React and D3 v5, using `scaleOrdinal`, `scaleLinear`, and SVG circles, with data loaded via `d3.csv` from a gist.

AAnthony Zornig
96% match