Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
Yyejichun@naver.com
Last edited Dec 21, 2021
Created on Dec 21, 2021

This interactive scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width for three species. Hovering over a category in the color legend highlights the corresponding data points while fading all others, using React state to track the hovered value. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders with SVG, and leverages React components like Marks and ColorLegend to manage the interactive behavior.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width for three flower species. Hovering over a species in the color legend highlights those data points while fading all others, using React state for hover interactions and D3 scales for positioning. The visualization renders as SVG, with marks as circles and a custom legend built from D3’s ordinal color scale.

CCurran Kelleher
98% 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 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 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 interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Hovering over a color legend item fades all other species’ data points, highlighting the selected category. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color, with React components for rendering SVG marks and interactive state management.

Jjwlam83
97% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore the relationships between sepal and petal dimensions through dropdown menus. The visualization uses React, a D3 component architecture, and SVG rendering to display data points colored by species. Hovering over the interactive color legend highlights points from a particular species while fading the others, using React state management and mouse event handlers to dynamically adjust opacity. The plot features D3's linear scales for axes and an ordinal color scale for categorical species assignment.

TThe-World-Muda
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
96% 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
96% match