Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep35 - 27. Interactive Color Legend

✓ Published0🌍 Public
MMinwoo Pak
Last edited Jul 20, 2021
Created on Jul 20, 2021

This scatter plot of the Iris dataset shows how petal and sepal dimensions vary across three species. An interactive color legend allows hovering over a species label to isolate its data points while dimming the others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping and SVG circles for marks. The dropdown menus let users select which quantitative attributes to plot on the x and y axes.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2020_Ep34 - 26. Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four physical measurements (sepal and petal dimensions) by selecting which variable appears on each axis via dropdown menus. D3.scaleLinear maps the numeric attributes to screen coordinates, while d3.scaleOrdinal assigns categorical colors to the three Iris species, displayed in a custom color legend rendered as SVG circles. The visualization uses React hooks to manage state, D3’s csv parser to load the data, and SVG marks with tooltips for each point.

MMinwoo Pak
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. A color legend categorizes data points by species, and hovering over a legend item highlights the corresponding points while fading others to 20% opacity. The visualization is built with React and D3 v5, using `scaleOrdinal` for color mapping and programmatically generated SVG components for axes and marks.

Vvmonney
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses React and D3.js to visualize the Iris dataset, displaying petal length against sepal width. A color legend maps each species to a distinct color, and hovering over a legend entry highlights data points of that species while fading all others to 20% opacity. The visualization employs D3's `scaleLinear` for axes, `scaleOrdinal` for the color mapping, and SVG circles for data marks, with axes generated by custom React components from the provided files.

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

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width with points colored by species. The color legend on the right is interactive: hovering over a species name fades all other points to 20% opacity, highlighting the selected group. The visualization uses React and D3 v6, leveraging `scaleOrdinal` for categorical colors, `scaleLinear` for axes, and SVG circles. Hovering over data points reveals tooltips via SVG `<title>` elements, while the legend’s `onMouseEnter` and `onMouseOut` handlers drive the filtering logic.

TTaweewat Somboonpanyakul
93% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, showing petal length against sepal width with points colored by species. A color legend on the right highlights points of a selected species by dimming all others to 20% opacity when the mouse hovers over a legend entry. The visualization is built with React and d3.v5, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data. SVG rendering handles both the marks and legend interactions.

AAjayyy
93% match