8:29 interactive legend

100%

8:29 interactive legend

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

This interactive scatterplot lets users explore the Iris flower dataset by changing the X and Y axes through dropdowns. Hovering over the color legend fades out all data points except those of the selected species, and the legend itself highlights the hovered category. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data, rendering circles as SVG marks.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

8:14 Scatter Plot + legend

This interactive scatter plot visualizes the Iris flower dataset, with dropdown menus to select which measurements appear on the x and y axes. A color legend distinguishes the three plant species. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and D3’s `csv` loader to fetch and parse the data. SVG circles with tooltips render each data point, while custom React components handle the axes and legend.

Uumgi

94% 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

93% 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

93% match

Loading thumbnail…

interactive color legend

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between flower measurements through dropdown menus that select the X and Y axes. The visualization uses D3.js v5 scales and React state to manage selections, while the color legend for species is interactive—hovering over a species name highlights only those data points and fades the others. All marks render as SVG circles, with the legend built from ordinal color scales and hover event handlers that filter the displayed data.

MMarco Malvicini

93% match

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

93% 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

93% match

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris flower dataset, where users can switch the X and Y axes between four quantitative measurements via dropdown menus. Hovering over a species in the color legend highlights only that group’s circles, dimming the rest. React manages the interactive state, while D3 v5’s `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scales, and formatting. The visualization renders as SVG, with axis components built from D3 scales and React elements.

Ppnlinyz

93% 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

92% match