Skip to main content
SimilarExport ZIP
100%

Color Legends

✓ Published0🌍 Public
11993-INDALKAR
Last edited Nov 12, 2021
Created on Nov 3, 2021
Forked from Color Scatter Plot

This interactive scatterplot displays measurements from the Iris flower dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React components with D3 scales, including d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Hovering over a color legend item dims non-matching data points while highlighting the selected species, demonstrating interactive filtering through React state management and SVG circle elements with tooltips.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Legends

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

Llefat92
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays Iris flower measurements, comparing petal length against sepal width. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) to render SVG elements. A color legend allows hovering to highlight specific species: when a legend item is moused over, points of other species fade to 20% opacity while the selected species remains fully visible. Data comes from the classic Iris dataset loaded via d3.csv.

Aaakarsh satyam
96% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width for three species. Hovering over a category in the color legend highlights the corresponding data points while fading all others, using React state to track the hovered value. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders with SVG, and leverages React components like Marks and ColorLegend to manage the interactive behavior.

Yyejichun@naver.com
95% match
Loading thumbnail…

Color Legend

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between four measurements: sepal length, sepal width, petal length, and petal width. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes the three iris species using an ordinal color scale. Built with React and D3 v5, the visualization uses svg circles with tooltips showing the x-axis value on hover, and employs `scaleLinear`, `scaleOrdinal`, and the `csv` data loader from d3.

EEugenio2192
95% match
Loading thumbnail…

Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. A color legend categorizes the three iris species, and hovering over a legend item highlights the corresponding points while fading the rest. The visualization uses React with ReactDOM, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders SVG circles with tooltips. Data is loaded asynchronously via `csv`, and interactivity is managed through React state hooks.

AAnthony Zornig
94% 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
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 scatter plot visualizes the Iris dataset, mapping petal length and sepal width for three flower species. Hovering over a species in the color legend highlights those data points while fading all others, using React state for hover interactions and D3 scales for positioning. The visualization renders as SVG, with marks as circles and a custom legend built from D3’s ordinal color scale.

CCurran Kelleher
94% match