Interractive Color Legend

100%

Interractive Color Legend

✓ Published0🌍 Public

Last edited Mar 23, 2022

Created on Mar 23, 2022

This interactive scatterplot displays the Iris flower dataset, plotting petal length against sepal width and coloring each point by species. A custom SVG color legend allows hovering over species names to highlight matching points while dimming others through opacity changes. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and a `ColorLegend` component with `onMouseEnter` and `onMouseOut` event handlers. Data is loaded asynchronously via `d3.csv`, with points rendered as SVG circles.

AI-generated description

aerg

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris flower dataset, mapping petal length and sepal width on the axes while coloring each point by species. A custom color legend uses d3.scaleOrdinal to encode species categories, and hovering over a legend item highlights only the corresponding points while fading the rest. The visualization is built with React and d3.v5, rendering to SVG, with a d3.scaleLinear for axes and a d3.csv data loader.

NNikhil Reddy Manda

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

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species. The color legend on the right filters and highlights points by species when hovered, while non-matching species fade to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for marks, axes, and the legend. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and all elements are rendered as SVG.

Mmuhammadshumas

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot explores the Iris dataset, mapping petal length against sepal width and encoding species by color. A custom color legend built with React and D3 scales allows users to hover over a species name, which highlights corresponding data points and fades the rest, revealing patterns in species separation. The visualization uses D3’s `scaleOrdinal` for color assignment and `scaleLinear` for axes, with SVG circles rendered as marks. Hovering also triggers a tooltip via the native SVG `<title>` element, providing precise values for each point.

GGiovanniD_

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights points of a selected species by dimming all others to 20% opacity when the mouse hovers over a legend entry. The visualization is built with React and d3.v5, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data. SVG rendering handles both the marks and legend interactions.

AAjayyy

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

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

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses React and D3.js to visualize the Iris dataset, displaying petal length against sepal width. A color legend maps each species to a distinct color, and hovering over a legend entry highlights data points of that species while fading all others to 20% opacity. The visualization employs D3's `scaleLinear` for axes, `scaleOrdinal` for the color mapping, and SVG circles for data marks, with axes generated by custom React components from the provided files.

Xxiaoma1002

95% match