Interactive Color Legend Scatter Plot

100%

Interactive Color Legend Scatter Plot

✓ Published0🌍 Public

Last edited May 3, 2021

Created on May 3, 2021

A scatter plot of the Iris dataset, with sepal width on the y-axis and petal length on the x-axis, colored by species. Hovering over a color legend item fades out points from other species and brightens the selected one. Built with React and D3 v5, it uses `d3.csv`, `scaleLinear`, and `scaleOrdinal`, with `onMouseEnter` and `onMouseOut` events for interactivity, and renders axes, legend, and marks as SVG elements.

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, 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

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

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

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

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 visualizes the Iris dataset, plotting petal length against sepal width for three species. A color legend allows users to hover over species names, dimming all other points to highlight the selected group. The visualization uses React with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. SVG circles render the marks, while mouse events on the legend trigger state changes that adjust opacity via the fadeOpacity prop.

Wwindwaver

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. Hovering over the color legend highlights points of the selected species while fading the opacity of others, using React state to manage the hovered value. The visualization is built with React and d3.v5, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and an SVG-based color legend with `onMouseEnter` and `onMouseOut` handlers.

CChen Ding

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. An interactive color legend on the right highlights points of a selected species while fading all others. Built with React and D3, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles. Mouse events on the legend trigger a re-render that filters the data into separate highlighted and faded point layers.

WWei-Che Chang

95% match