Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Mar 28, 2021

Created on Mar 28, 2021

A scatter plot of the Iris dataset visualizes petal length against sepal width, with a categorical color legend encoding species. Each circle represents a flower, and hovering reveals its exact petal length via a native SVG `<title>` tooltip. The visualization is built with React components and D3 scales, using `scaleLinear` for axes, `scaleOrdinal` for colors, and `extent` for domains. Axes and legends are custom SVG components, rendered within a fixed 960×500 viewport with margins and labeled axes.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is colored by species using a categorical ordinal scale, with a custom color legend placed to the right. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. The SVG rendering includes custom React components for axes, marks, and the legend, with tooltips showing formatted petal length values.

TTaweewat Somboonpanyakul

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each data point is a circle colored by species, with a color legend positioned to the right displaying the three species categories. The visualization is rendered as a React component using SVG, with axes and marks generated through custom code that leverages D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `extent`. The axes are drawn with reusable `AxisBottom` and `AxisLeft` components, and hovering reveals a tooltip with the formatted x-value.

Jjwlam83

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax

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

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each point colored by species. The visualization uses D3 v6's scaleLinear and scaleOrdinal to map quantitative and categorical data, while React components render SVG axes, circles, and a color legend. The color legend displays distinct species categories, and hovering over points reveals their petal length values. Data is loaded via d3.csv from a remote URL, and the entire chart adapts to the browser window size.

BbeauMarko

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis, sepal width on the y-axis, and encoding species with color. Each point is rendered as an SVG circle using React components, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The visualization includes axes built via `xScale.ticks()`, a color legend generated with `colorScale.domain()`, and tooltips using SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a public gist.

Aaakarsh satyam

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length versus sepal width for individual flowers. A color legend on the right encodes species membership using an ordinal color scale. Built with D3 v5 and React, the visualization uses SVG for rendering. The axes are generated by custom components using D3’s scaleLinear, while the legend and marks are rendered with React components that map data to SVG circles.

CCurran Kelleher

96% match