Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Color Legend

✓ Published0🌍 Public
陳陳泰元
Last edited Oct 1, 2022
Created on Oct 1, 2022

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width for different iris species. Hovering over a species in the color legend highlights matching data points and fades the rest, using `onMouseEnter` and `onMouseOut` events. Built with React and D3 v5, it renders as an SVG with `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `Marks`, and `ColorLegend` components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

JJONATHAN SIMON
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species label in the color legend fades non-matching points to 20% opacity while highlighting the selected group. Built with React and D3 v5, the code uses `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, rendering SVG circles and axes via reusable components. The color legend triggers hover events through React state to dynamically filter and emphasize data points.

MMatthew Talty Colvard
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species name in the color legend fades all non-matching data points while highlighting the selected species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. All marks and axes are rendered as SVG elements, with CSS transitions controlled by React state handling hover interactions.

Ddr-rompecabezas
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with points colored by species. A color legend on the right allows users to hover over a species name, which fades all non-matching points to 20% opacity while highlighting the selected group. The visualization uses React for the interface, d3.v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders as SVG. The code also includes native tooltips showing the x-axis value on hover.

TTOLBA Rafik
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. A React-driven color legend allows users to hover over species names, which highlights matching data points and fades all others using opacity transitions. Built with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and SVG circles rendered through React components, the visualization responds to hover events via useState and onMouseEnter handlers to filter and re-render marks dynamically.

Llucas-langlois
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. A React-driven color legend allows users to hover over species names, which highlights matching data points and fades all others using opacity transitions. Built with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and SVG circles rendered through React components, the visualization responds to hover events via useState and onMouseEnter handlers to filter and re-render marks dynamically.

Llucas-langlois
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width, with each species colored and listed in a hoverable color legend. Hovering over a species name in the legend fades non-matching points to a low opacity while highlighting the corresponding data. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color mapping, with SVG rendering for all marks and interactive legend elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Iihevs
95% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species in the color legend highlights only that species’ points while dimming the others. Built with D3 v5 scales and React components, the visualization uses SVG circles for marks and implements hover interactions through React state and mouse events. The color legend uses `d3.scaleOrdinal` and supports opacity fading via the `fadeOpacity` prop.

JJoshuoYang
95% match