Scatterplot with Color Legend

100%

Scatterplot with Color Legend

✓ Published1🌍 Public

Last edited Dec 17, 2021

Created on Dec 17, 2021

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.

AI-generated description

A scatterplot of the Iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, the visualization uses `scaleLinear` to map data coordinates to SVG positions and `scaleOrdinal` to assign species colors. The SVG rendering includes custom axes, a color legend, and circle marks that display tooltips with formatted values on hover.

KKolezhannochka

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

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

WWolfgang

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

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 Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic

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 species of Iris flowers. A color legend identifies each species with a distinct color, and hovering over a data point displays its value in a tooltip. The visualization is built with React and D3 v5, relying on `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and `extent` for the data domain. The chart uses SVG rendering with custom components for axes, marks, and the legend.

FFulvio Vigilante

96% match