Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
Ddaneslutzky
Last edited Oct 5, 2021
Created on Oct 5, 2021

This interactive scatterplot visualizes Iris flower measurements, plotting sepal length against sepal width for three species. The React-based interface uses D3.js scales (scaleLinear, scaleOrdinal) to position and color each circle. A custom ColorLegend component responds to mouse hover events, highlighting the selected species by fading all other points to 20% opacity. Hovering a legend item filters the visible marks, while tooltips display exact values. Data loads asynchronously from a CSV file using d3.csv.

AI-generated description

A program that loads data about CSS named colors and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays Iris flower measurements, comparing petal length against sepal width. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) to render SVG elements. A color legend allows hovering to highlight specific species: when a legend item is moused over, points of other species fade to 20% opacity while the selected species remains fully visible. Data comes from the classic Iris dataset loaded via d3.csv.

Aaakarsh satyam
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against sepal width with points colored by species. Hovering over the color legend highlights the corresponding species by increasing the opacity of its data points while fading others. The visualization uses React with D3 v7 scales and SVG rendering, including custom AxisBottom, AxisLeft, Marks, and ColorLegend components. The color legend employs mouse events to trigger the hover state, with the ordinal color scale mapping three distinct species to individual colors.

SSong Tao Chen
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width. Users can hover over the color legend to highlight data points of a specific species, which fade all other points to 20% opacity. The visualization uses D3.js scales for positions and colors, rendered as SVG through React components. The legend is built using D3's `scaleOrdinal` domain mapping, with hover events managed by React's `useState` hook.

Aafcchilders
95% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris Dataset displays sepal length against sepal width, with points colored by species via a categorical scale. Hovering over the color legend highlights that species' points while fading others to 20% opacity. The visualization uses React with d3-scale for linear and ordinal scales, rendering SVG circles and axes with custom components. Data loads from a CSV via d3.csv, and interactivity relies on React state for hovered values.

GGayan Priyadarshana
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 scatterplot displays the Iris dataset, plotting sepal and petal measurements against each other with species encoded by color. Hovering over a species in the color legend dims all other data points while highlighting the selected species. Users can change the X and Y axes via dropdown menus. The visualization uses React with D3 scales for positioning and coloring, rendering SVG circles and axis ticks through custom React components.

Ssmile2git
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

AAnthony Ynami
95% match