Skip to main content
SimilarExport ZIP
100%

Interactive color legend

✓ Published0🌍 Public
Ddumbdataguy@gmail.com
Last edited Jan 28, 2024
Created on Jan 27, 2024

This interactive scatterplot visualizes the iris flower dataset, mapping petal length and sepal width for three species distinguished by color. Hovering over a species in the ordinal color legend dims non-matching points via React state and a fade opacity, while the selected species’ marks remain highlighted. Built with React and D3 v5, the SVG chart uses `scaleLinear`, `scaleOrdinal`, and reusable axis and legend components, with data loaded async from a CSV via `useEffect` and `d3.csv`.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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, mapping petal length and sepal width across three species. Users can hover over the ordinal color legend to highlight points of a selected species while fading others, using React state to manage hover interactions. The visualization is rendered with SVG elements, with axes and scales built using d3.scaleLinear and d3.scaleOrdinal, while d3.csv loads the dataset.

TTatyana Milanova
95% 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
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 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 visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias
95% match
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
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Wwenleicao
95% match