Skip to main content
SimilarExport ZIP
100%

dv.35 - interactive color legend

✓ Published4🌍 Public
Zzach b.
Last edited Mar 18, 2021
Created on Nov 9, 2020

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes via React dropdowns or swapping them with a button. The visualization uses D3 scales for positioning and an ordinal color scale to encode species, rendered as SVG circles. An interactive color legend highlights points of a selected species by fading others, implemented with React state and mouse event handlers.

AI-generated description

A scatter plot of The Iris Dataset.

--
Datavis 2020 #35

MIT Licensed

Similar vizzes

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

Interactive Color Legend

An interactive scatterplot of the Iris dataset lets users explore relationships between sepal and petal measurements, with colored dots representing species. A clickable color legend on the right highlights points of a selected species while dimming the others, using React state to track the hovered value. Built with React and D3 v5, the plot renders as SVG and uses scales from `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Dropdown menus allow switching which measurements appear on the x- and y-axes.

TThe-World-Muda
94% match
Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species. Users can select which attributes appear on the x and y axes via React Dropdown menus or swap them with the AxisSwap button. Hovering over the color legend highlights circles of that species by reducing the opacity of others. The visualization uses React with D3 v6 scales (scaleLinear, scaleOrdinal), SVG rendering, and custom axis and legend components.

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

interactive color legend

This interactive scatterplot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend highlights all matching data points while fading the others to 50% opacity. The visualization uses React for UI state management, d3.scaleLinear and d3.scaleOrdinal for scaling, and renders SVG circles with tooltips for exact values.

BBlake McCarty
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore the relationships between sepal and petal dimensions through dropdown menus. The visualization uses React, a D3 component architecture, and SVG rendering to display data points colored by species. Hovering over the interactive color legend highlights points from a particular species while fading the others, using React state management and mouse event handlers to dynamically adjust opacity. The plot features D3's linear scales for axes and an ordinal color scale for categorical species assignment.

TThe-World-Muda
93% match
Loading thumbnail…

interactive color legend iris scatter plot

This interactive scatter plot displays the classic Iris dataset, mapping sepal and petal measurements along user-selectable x and y axes. A color legend categorizes the three iris species, and hovering over a species name dims the other points to highlight the selected group. Built with React and D3 v5, the visualization uses dropdown menus to swap axes and D3 scales (scaleOrdinal, scaleLinear) to position circles and assign colors. SVG rendering handles the marks and axes, while the legend’s mouse events filter and emphasize data by species.

GGuitong Li
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 using dropdown menus to select variables for the x and y axes. The color legend for species is interactive: hovering over a legend item fades all other points to 20% opacity, highlighting the selected species in SVG circles rendered with React. The visualization uses d3-scale for linear and ordinal scales, d3-format to tick labels, and react-dropdown for the axis selectors, with CSV data fetched from a GitHub gist.

Ssurikmeetr
93% match