Skip to main content
SimilarExport ZIP
100%

Interactive Colour Legend

✓ Published0🌍 Public
KKevin McMorrow
Last edited Oct 27, 2021
Created on Oct 27, 2021

This interactive scatterplot displays the Iris dataset, plotting two selectable attributes against each other. An interactive colour legend on the right allows users to hover over a species to highlight only those points, fading the rest. The visualization uses D3.js scales and axes with React components for rendering SVG circles and the legend. Dropdowns use the React Dropdown library to change the plotted attributes.

AI-generated description
MIT Licensed

Similar vizzes

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

Interactive Color Legend

An interactive scatterplot of the Iris flower dataset, where users can select which attributes to plot on the X and Y axes via React dropdowns. Hovering over the color legend highlights points of a specific species, dimming all others. The visualization uses React with D3 v5 for scales and SVG rendering, with axes and marks built from reusable components. Data is loaded via `d3.csv` from a remote gist.

Ccynichole
94% match
Loading thumbnail…

Interective Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements via dropdown menus that control the x and y axes. A color legend for species enables filtering through mouse hover, which fades non-matching points to reveal only the selected category. The visualization is built with React and D3 v5, using SVG rendering with scales from d3.scaleLinear and d3.scaleOrdinal, while the dropdown component comes from React Dropdown.

NNikita Toropov
94% match
Loading thumbnail…

Iris Scatterplot With Interactive Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to compare any two of the four measured attributes via dropdown menus. Hovering over the color legend highlights only the corresponding species, dimming the others through opacity changes. The visualization is built with React and D3 v7, using `scaleLinear` for axes, `scaleOrdinal` for species colors, and SVG rendering for marks and interactive legend elements.

JJames Rhodes
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which flower attributes appear on the X and Y axes. Hovering over a color legend entry highlights the points for that species while fading all others to 20% opacity. The visualization uses React state management with D3 scales for positioning and color, rendering SVG circles that respond to mouse events on the legend.

DDeborah Ong
94% 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
94% match