Skip to main content
SimilarExport ZIP
100%

Scatter Plot, Color & Interactive Legend

✓ Published1🌍 Public
AAndre J Denais
Last edited Oct 28, 2020
Created on Oct 8, 2020

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.

AI-generated description

An attempt at a scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive 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.

FFulvio Vigilante
96% match
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
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, Slightly Stylized with Color & Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris flowers. Each data point is rendered as a colored circle in an SVG, with colors assigned by species using a d3.scaleOrdinal color scale. The chart includes custom React components for axes, marks, and a color legend, with d3.linear scales mapping data to pixel coordinates. A tooltip appears on hover, displaying the petal length value.

AAndre J Denais
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…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the axes and encoding species with color. Hovering over a legend item highlights the corresponding species’ points while dimming others. Built with React and D3 v5, it uses `scaleOrdinal` for color, `scaleLinear` for positions, and custom React components for axes, marks, and the interactive legend. Data is loaded as CSV and rendered as SVG circles with tooltips.

NNelson M
95% 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
95% match
Loading thumbnail…

Scatter Plot with Color with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing sepal width against petal length for different Iris species. Data points are rendered as circles with colors mapped to each species, accompanied by a legend that identifies the color-to-species correspondence. Built with React and D3.v5 utilities including `scaleLinear`, `scaleOrdinal`, and `extent`, the visualization uses SVG for rendering. The color legend communicates the species mapping, while tooltips display the petal length value for each point.

Yyejichun@naver.com
95% match