Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend

✓ Published0🌍 Public
SSerind Joshua McCue
Last edited Aug 21, 2022
Created on Aug 21, 2022

This interactive scatterplot displays the classic Iris flower dataset, plotting petal and sepal measurements against each other with points colored by species. Users can switch the X and Y axes via dropdown menus and hover over the color legend to highlight a particular species while fading the others. The visualization uses React with D3's `scaleLinear` and `scaleOrdinal` for axes and color encoding, rendered as SVG circles with hover-based opacity transitions on the legend items.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can change the X and Y axes via dropdown menus, and hovering over the color legend highlights points from a selected species while dimming others. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data, with the legend and marks responding to mouse events through React state.

KKazushige Okuma
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, encoding sepal and petal measurements along the x and y axes with species indicated by color. Users can dynamically change the plotted attributes via dropdown menus. Hovering over a color legend item fades all points of other species, allowing for focused comparison. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and renders points as SVG circles.

JJun Suzuki
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch between different attributes for the x and y axes, while a color legend enables hovering to highlight specific species and fade the others via opacity changes. The visualization uses React with D3 scales and SVG rendering, employing D3's `scaleLinear` for positioning and `scaleOrdinal` for categorical color mapping.

SSai Phaltankar
96% match
Loading thumbnail…

Interactive Color Legend III

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users can switch the X and Y axes via dropdown menus, while a color legend distinguishes the three iris species. Hovering over a legend item fades non-matching points and highlights the selected species. The visualization uses React with D3.js scales (scaleLinear, scaleOrdinal) for positioning and coloring, the react-dropdown library for axis selection, and renders SVG circles with tooltips.

Nnexus1058
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the classic Iris flower dataset, with dropdown menus to select which measurement (sepal length, sepal width, petal length, petal width, or species) appears on each axis. The species of each flower determines the circle’s color using an ordinal color scale. The visualization, built with React and D3 v5, renders as SVG, with reusable axis and marks components. The axes are constructed with `scaleLinear`, while dropdown interactions update the scales and marks based on the selected attributes.

EEast007
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. Hovering over a species in the color legend highlights only the corresponding data points while fading the others. The visualization is built with React and D3 v7, using `scaleLinear`, `scaleOrdinal`, and SVG elements for rendering.

RRichardPearce60
95% match
Loading thumbnail…

Interactive Color Legend

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.

Yyptang5488
95% match