Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

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

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.

AI-generated description

A scatter plot of The Iris Dataset with color legend.

MIT Licensed

Similar vizzes

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

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Wwenleicao
97% match
Loading thumbnail…

Interactive Colour Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species indicated by color. The React-based visualization uses D3.js scales (scaleLinear, scaleOrdinal) and SVG rendering. Users can hover over the color legend to highlight points from a specific species while dimming others, achieved through React state management (useState) that toggles opacity values on the marks and legend items. The data loads asynchronously via D3's csv parser.

CChris Briggs
97% 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

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