Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published0🌍 Public
Nnithish-1999
Last edited Mar 7, 2022
Created on Mar 7, 2022

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. Each circle represents one iris, colored by its species to reveal clustering patterns. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Axis labels and a color legend are rendered using SVG elements and the d3-legend library’s `legendColor` component.

AI-generated description

A scatter plot with D3. 2017 style.

This visualization shows The Iris Dataset. It's designed to emphasize clustering by Petal Length and Sepal Length by Species.

Each circle represents an iris flower.

Ported from Bl.ocks.org: Stylized Scatter Plot with Color Legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length with points colored by species. A circular color legend identifies the three species categories. The visualization uses D3 v5 with the `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and the `d3.legendColor` library for the legend. Grid lines extend across the chart via tick size settings, and axis labels are rotated for the y-axis. The data is loaded from a CSV file via `d3.csv`.

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

Scatter Plot with Color Legend

This scatter plot visualizes the iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point represents a flower specimen, colored by species using an ordinal color scale, with a legend showing the species categories. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for scales, `extent` for domain calculation, and custom SVG components for axes, marks, and the color legend. Data is loaded asynchronously from a remote CSV using D3’s `csv` method.

MMorgan Worrell
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Wwenleicao
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with a color legend for species. The d3.v7 scales (scaleLinear, scaleOrdinal) position circles within an SVG rendered via React. Axis components handle tick generation, while d3.csv loads and parses the data. A color scale assigns distinct hues to the three iris species, with a legend generated from the color domain.

BBen Seebeck
94% match
Loading thumbnail…

Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, displaying clusters of iris flowers by petal length against sepal length, with color distinguishing species. Each circle represents a flower, and a color legend identifies the three species. Built with D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. The `d3.legendColor` plugin renders the circular legend, while CSV data is loaded via `d3.csv` and rendered as SVG circles with opacity.

CCurran Kelleher
94% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, with each circle representing an iris flower colored by species to emphasize clustering patterns between sepal length and petal length. The SVG visualization uses D3 v5 with d3.scaleLinear for axes and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. It incorporates the d3-legend library to generate a color legend, while axes are rendered using d3.axisBottom and d3.axisLeft with gridlines and rotated labels. Data loads asynchronously from a CSV via d3.csv.

Kkranthireddyskr
93% 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
93% match