Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 5, 2020

Created on Oct 5, 2020

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. The chart uses color-encoded circles to represent different iris species, with hover interactions on the legend highlighting data points of a selected species. Built with React and D3 (d3.scaleLinear, d3.scaleOrdinal), the visualization renders as SVG, featuring both full and filtered data marks with faded opacity for non-selected categories.

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, showing petal length against sepal width with species encoded by color. Hovering over a color legend entry highlights the corresponding species’ circles while dimming all others. Built with React and D3 v5, the code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent for scales, while rendering SVG circles via custom components. The legend triggers hover states that filter data for emphasis, and axes are generated with d3-format for tick labels.

Jjuanmy400

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

97% match

Loading thumbnail…

Interactive Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width, with points colored by species. The visualization includes an interactive color legend on the right that allows users to highlight specific species by hovering over the legend items. When a legend item is hovered, the corresponding species’ points remain at full opacity while all other points fade to 20% opacity. The chart is built using React with D3 scales (`d3.scaleLinear`, `d3.scaleOrdinal`), rendered as SVG, and includes custom axis components for tick marks and labels.

RRajat Dangat

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width and coloring each point by species. Using React and d3.scaleOrdinal, hovering over a color legend entry highlights that species’ circle by raising its opacity from 0.2 to full strength, while dimming the others. The chart includes axis labels and a formatted tick axis using d3.format.

CCarloGato

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

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. The color legend, implemented using d3.scaleOrdinal, indicates species. When hovering over a legend item, a React state variable filters the data to highlight only the selected species, dimming all other points through an opacity change. The chart is rendered as an SVG using React, with axes built from d3.scaleLinear.

RRudy Shayganfar

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width across three species. Hovering over a species in the color legend highlights points of that species while fading all others to 20% opacity. The visualization uses React components with d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, rendering as SVG. The color legend responds to mouse events via onMouseEnter and onMouseOut handlers, demonstrating a linked-highlight interaction pattern.

Wwhiteswallow87

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

97% match