Scatter Plot with Interactive Color Legend

100%

Scatter Plot with Interactive Color Legend

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 16, 2021

Forked from Scatter Plot with Color Legend

A scatter plot of the Iris Dataset shows petal length against sepal width, with each point colored by species. The visualization uses React with D3 scales to map data to SVG coordinates. An interactive color legend allows hovering over species labels to highlight only the corresponding points, dimming all others. The code implements this interaction through React state management, re-rendering marks with adjusted opacity when the hovered species changes.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React and d3-scale functions (scaleLinear, scaleOrdinal) to map data to positions and colors. Hovering over the color legend highlights only the points belonging to that species while fading all others, with the legend item and matching data points responding to mouse events. The chart renders as SVG with custom AxisBottom and AxisLeft components.

KKtuzinowski

97% match

Loading thumbnail…

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

AAndre J Denais

96% match

Loading thumbnail…

Scatter Plot with Interactive color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width, with each point colored by species. An interactive color legend allows hovering over a species to highlight its corresponding data points while fading the others. Built with React and D3 v5, the visualization uses SVG for rendering, with scales and axes from `d3.scaleLinear` and `d3.scaleOrdinal`, and custom React components for marks and legends, interacting through hover state to update point opacity.

SSushan Prajapati

96% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements like petal length and sepal width as colored points. Users can explore the data by selecting different attributes from dropdown menus to change the x and y axes, while hovering over the color legend highlights points of a selected species and fades the rest. Built with React and D3 v5, the visualization uses scales and SVG rendering to create the chart, with React state managing attribute selections and hover interactions.

Ee-ines

96% match

Loading thumbnail…

Interactive Scatter Plot With Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width and coloring points by species. A color legend allows users to hover over species labels to highlight only the corresponding data points while dimming others. The visualization is built with React and D3 v5, using d3.scaleLinear for positioning, d3.scaleOrdinal for categorical colors, and custom SVG components for axes and marks. Data loads asynchronously via d3.csv from a GitHub gist.

KKolezhannochka

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. A color legend identifies each species, and hovering over a legend item highlights the corresponding points while fading others. The visualization uses React with D3 v5 for scales and SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the interactive legend.

EElliot Hill

96% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three flower species. Hovering over the color legend highlights points of that species while dimming others, using React state to manage the hovered value and opacity transitions. Built with D3 v6 scales for positioning and color encoding, it renders as SVG through React components, with axis ticks generated by xScale.ticks() and yScale.ticks(), and tooltips provided by native SVG title elements.

WWolfgang

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. The color legend, implemented using d3.scaleOrdinal, indicates species. When hovering over a legend item, a React state variable filters the data to highlight only the selected species, dimming all other points through an opacity change. The chart is rendered as an SVG using React, with axes built from d3.scaleLinear.

RRudy Shayganfar

96% match