28 Scatter Plot With Interactive Color Legend

100%

28 Scatter Plot With Interactive Color Legend

✓ Published1🌍 Public

Last edited Apr 1, 2021

Created on Apr 1, 2021

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. An interactive color legend highlights data points by species, dimming non-matching points on hover and making the selected species prominent. Built with React and rendered as SVG using D3 scales and axes, the visualization uses `scaleOrdinal` for the color mapping and `scaleLinear` for the spatial coordinates. The legend handles mouse events to filter and focus the display.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

27. Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length versus sepal width, with each point colored by species and a legend identifying the three categories. The visualization uses React components and D3 v5 scales, including `scaleLinear` for axes and `scaleOrdinal` for color mapping. SVG circles are rendered via custom `Marks`, `AxisBottom`, `AxisLeft`, and `ColorLegend` components, with data loaded asynchronously using `d3.csv`.

PPrashish Paudel

95% match

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

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

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

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

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

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

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

93% match