Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color

✓ Published31🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Feb 23, 2023
Forked from Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, with sepal length on the x-axis and petal length on the y-axis. The three species (setosa, versicolor, virginica) are distinguished by color using a categorical color scale with a legend. The visualization is built with D3.js, using `scaleLinear` for axes, `scaleOrdinal` and `schemeCategory10` for color mapping, and the selection `.join` pattern to manage SVG elements. Separate modules for axes and color legend keep the code modular.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris Dataset displays sepal length against petal length, with points colored by species. A color legend identifies setosa, versicolor, and virginica. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legend rendering. Data is loaded from a CSV file and parsed with `csvParse`.

BBhanu Siva Kumar Kommana
95% match
Loading thumbnail…

scatter plot with color

This scatter plot visualizes the Iris Dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three flower species represented by a distinct color from d3.schemeCategory10. A custom color legend identifies the species categories. The visualization loads the CSV data using d3.csvParse and renders the plot with d3.scaleLinear for both axes, while axes and legend components are built using reusable function modules.

KKhatera Alizada
94% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each of the 150 points is colored by species—setosa, versicolor, or virginica—using an ordinal color scale with `d3.scaleOrdinal` and `schemeCategory10`. A color legend displays the species labels, while axes with custom labels are rendered via reusable `axes` and `colorLegend` functions. The visualization uses `d3.csvParse` to load data and selection joins to bind circles to the dataset.

Aadityaraoh
93% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the classic Iris dataset as a scatter plot, using sepal length on the x-axis and petal length on the y-axis. Each point’s color encodes the flower species, with a categorical color legend identifying setosa, versicolor, and virginica. The visualization is built using D3.js, leveraging `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for the color mapping, and the `selection.join` API for declarative SVG creation. A custom `axes` and `colorLegend` module handle the chart’s annotations.

SSaiipriiya
93% match
Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping sepal length and petal length on the x- and y-axes while coloring each point by species. A color legend distinguishes setosa, versicolor, and virginica flowers. Built with D3 v7, the visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 to position and color the circles. Data loads asynchronously from a CSV file using d3.csvParse, and the axes and legend are generated through custom reusable functions leveraging d3.axisLeft, d3.axisBottom, and selection.join.

NNYCUBK201
93% match
Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping sepal length and petal length on the x- and y-axes while coloring each point by species. A color legend distinguishes setosa, versicolor, and virginica flowers. Built with D3 v7, the visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 to position and color the circles. Data loads asynchronously from a CSV file using d3.csvParse, and the axes and legend are generated through custom reusable functions leveraging d3.axisLeft, d3.axisBottom, and selection.join.

NNYCUBK201
93% match
Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, illustrating the relationship between sepal length and petal length, with each of the three flower species distinguished by color. The visualization includes labeled axes for the measurements and a color legend identifying the species. Built with D3.js version 7, the example uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` from the `d3-scale-chromatic` library to map data to positions and colors. The axes and legend are constructed programmatically using the `axisLeft` and `axisBottom` functions, while data is loaded asynchronously from a CSV file.

Rradhadevarapu
93% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset with a scatter plot mapping sepal length to the x-axis and petal length to the y-axis. Dots are colored by species using a categorical color scale, with a legend positioned in the upper right. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `selection.join` for rendering. Axes and labels are added via custom modules, and data is loaded asynchronously from a CSV file and parsed with `csvParse`.

NNicoA
93% match