Scatter Plot with Color

100%

Scatter Plot with Color

✓ Published40🌍 Public

Last edited Oct 9, 2025

Created on Sep 28, 2019

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each point is colored by species using a d3.scaleOrdinal with a categorical color range. The visualization uses React components for rendering SVG elements, with d3.scaleLinear for the x and y axes. Axes are constructed manually from d3 scale ticks, and hover tooltips display the petal length value via SVG title elements.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale with distinct hues. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG for rendering. Hovering reveals tooltips via native SVG `<title>` elements.

Ssophburke

98% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each point is colored by species using a d3.scaleOrdinal with a categorical color range, and the plot includes labeled axes with tick marks formatted using d3.format. The visualization is built with React, rendering SVG elements through reusable AxisBottom, AxisLeft, and Marks components that leverage d3.scaleLinear for positioning and d3.extent for domain calculation.

Jjwlam83

98% match

Loading thumbnail…

Scatter Plot with Color

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point is colored by species using a d3.scaleOrdinal with a categorical color range. The visualization is rendered as an SVG using React, with axes generated by custom AxisBottom and AxisLeft components that use d3.scaleLinear and tick formatting via d3.format. Tooltips display the petal length value for each circle.

WWill Carter

97% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. The visualization uses React to render SVG elements, with d3.scaleLinear for positioning and d3.scaleOrdinal for categorical color mapping. Custom React components for axes and marks handle the rendering, while d3.csv loads and parses the dataset. A d3.format function formats tick labels, and the color scheme distinguishes the three iris species.

BBen Brophy

97% match

Loading thumbnail…

Scatterplot with color

This scatterplot visualizes the Iris dataset, displaying petal length against sepal width for different iris species. Each circle represents a flower, with color encoding its species via a categorical ordinal scale. The visualization is built using React and D3 v5, leveraging the `scaleLinear`, `scaleOrdinal`, and `extent` APIs to map data to SVG coordinates and colors. Axes are rendered as custom React components, with tick marks and labels styled through CSS. Data originates from the classic Iris dataset, loaded asynchronously via D3’s CSV parser, and tooltips show values on hover.

Llaplantalaplanta

97% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each data point colored by species using an ordinal color scale. It uses React with D3 v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders circles in SVG. Tooltips reveal exact petal length values, and the axes include formatted tick labels and clear axis titles.

Cching-tw

97% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal width against petal length for individual flowers. Each circle is colored by species using a D3 ordinal color scale, with a tooltip revealing the petal length on hover. The visualization is built with React and rendered as an SVG, using D3’s scaleLinear for axes and scaleOrdinal for categorical colors. Axis components and data marks are structured as modular React components, and the dataset is loaded via D3’s csv parser.

Nnpelliccia

97% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three iris species colored distinctly. The visualization uses React with D3 v5, employing d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping. Data is loaded via d3.csv from a GitHub gist, and axes are rendered as custom React components. SVG circles represent individual flowers, with native `<title>` elements providing tooltips on hover.

MMilena Belianovich Holtman

97% match