Skip to main content
SimilarExport ZIP
100%

Scatterplot with Color and Interactive Color Legend

✓ Published0🌍 Public
Ppranav-vis
Last edited Sep 18, 2021
Created on Sep 14, 2021

This interactive scatterplot visualizes the Iris dataset, plotting sepal width against petal length with points colored by species. The chart includes an interactive color legend; hovering over a legend entry fades non-matching points to 20% opacity and re-renders them in full opacity, allowing users to isolate a species. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the legend, rendering in SVG.

AI-generated description

Rendering CSS named colors from MDN.

MIT Licensed

Similar vizzes

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…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A categorical color legend identifies the three species. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Axis components generate ticks, while hover tooltips display formatted values via the `title` element.

KK3zter
94% 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 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
94% match
Loading thumbnail…

Scatterplot with Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting petal length against sepal width. Users can switch the X and Y axes using dropdown menus, and hover over the color legend to isolate a specific species of iris. The visualization uses D3 to handle data loading, scales, and layout, while React components render the SVG elements, including the axes, data points, and interactive legend.

CChris Knight
93% match