Skip to main content
SimilarExport ZIP
100%

Interactive color legend

✓ Published1🌍 Public
AAndrea Picciau
Last edited Dec 1, 2021
Created on Nov 3, 2021

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while colors distinguish species. A custom color legend enables highlighting individual species by hovering, which fades non-matching points to reveal patterns. Built with React and D3 v5, it uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG circles rendered from CSV data loaded via d3.csv.

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, allowing users to explore relationships between different flower measurements. Hovering over a species in the color legend highlights all corresponding data points, while fading the opacity of others for focused comparison. The visualization uses d3.v5 for scales and axes, rendered as SVG within a React framework, with dropdown menus to switch the x and y attributes. Data is loaded from a CSV via d3.csv.

FFonda Irena Santoso
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between four flower measurements by selecting X and Y axes via dropdown menus. A color legend for species on the right serves as a filter: hovering over a species name highlights its corresponding data points while fading the others to 20% opacity. The visualization renders SVG circles with React, using d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, with axis components built from d3 scale ticks.

AAudrey
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes map to the x and y axes via React dropdown menus. A color legend for species acts as a filter: hovering over a legend item fades non-matching points and highlights those of the selected species. The visualization uses React state for UI interactions, D3 scales and axes for rendering the SVG marks (d3.scaleLinear, d3.scaleOrdinal), and the d3.csv utility for loading data.

CChristian Potdevin
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, letting viewers change the x-axis attribute via a dropdown and hover over a color legend to highlight points of a selected species. The React-based visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders all marks as SVG circles. Hovering the legend dims non-matching species while emphasizing the filtered data through a separate overlay layer built with array filtering.

AAnimesh Nautiyal
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements by selecting attributes for the X and Y axes via dropdown menus. The color of each point represents the flower species. Hovering over a species in the color legend dims all other points, making it easy to isolate and compare that group. The visualization is built with React and D3, using `scaleLinear` and `scaleOrdinal` for scales and rendering SVG circles.

PPedro Henrique Vanali
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to dynamically select which flower attributes to plot on the x and y axes via React dropdown menus. Colored by species, the plot displays circles with a supplementary legend and axis labels. Built with React, the visualization leverages D3 v5 for scales, axes, and CSV data loading, rendering to SVG. Users can explore relationships between sepal and petal measurements across three iris species.

MMario Ibarra
95% match
Loading thumbnail…

Interactive Color Legend with menu and legend

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between different flower measurements. Users can change the X and Y axes via dropdown menus to compare sepal and petal dimensions. A color legend for species (setosa, versicolor, virginica) enables highlighting; hovering over a legend item fades all other data points for focused comparison. The visualization is built with React, utilizing d3.scaleLinear and d3.scaleOrdinal for scales, with SVG circles rendered through custom components.

FFloorNummer
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris dataset, allowing viewers to explore relationships between flower measurements by selecting different attributes for the X and Y axes via dropdown menus. Hovering over the color legend highlights points of a specific species while dimming others. The visualization is built with D3 scales for positioning and color, rendered as SVG within a React application, with interactive components managed through React state.

LLove Wessman
95% match