Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Dec 8, 2021

Created on Nov 23, 2021

Forked from Scatterplot with 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.

AI-generated description

A scatter plot of the Iris Dataset.

MIT Licensed

Similar vizzes

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

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

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Hovering over a color legend item fades all other species’ data points, highlighting the selected category. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color, with React components for rendering SVG marks and interactive state management.

Jjwlam83

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can change the X and Y axes via dropdown menus, and hovering over the color legend highlights points from a selected species while dimming others. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data, with the legend and marks responding to mouse events through React state.

KKazushige Okuma

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

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. The chart uses color-encoded circles to represent different iris species, with hover interactions on the legend highlighting data points of a selected species. Built with React and D3 (d3.scaleLinear, d3.scaleOrdinal), the visualization renders as SVG, featuring both full and filtered data marks with faded opacity for non-selected categories.

Yyptang5488

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width with species encoded by color. Hovering over a color legend entry highlights the corresponding species’ circles while dimming all others. Built with React and D3 v5, the code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent for scales, while rendering SVG circles via custom components. The legend triggers hover states that filter data for emphasis, and axes are generated with d3-format for tick labels.

Jjuanmy400

96% match

Loading thumbnail…

Interactive color legend

This interactive scatterplot displays the Iris dataset, mapping sepal and petal measurements against each other. Users can select which attributes appear on the x- and y-axes via dropdown menus, while a color legend encodes species. Hovering over a legend item temporarily fades and isolates the corresponding species’ points. The visualization uses React for state management, D3’s scaleLinear, scaleOrdinal, and csv loader, and renders SVG circles and axes.

LLewis Ward

96% match