Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color

✓ Published0🌍 Public
Gg_ivaska@coloradocollege.edu
Last edited May 8, 2024
Created on May 8, 2024

This example visualizes the classic Iris Dataset as a scatter plot, showing sepal length on the x-axis and petal length on the y-axis. Each of the 150 data points is colored by species using a categorical color scale, with a legend indicating the meaning of each color. The visualization is built with D3 v7, using `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.selection.join` for dynamic element updates. The axes and color legend are implemented as reusable functions that render SVG circles and text elements.

AI-generated description

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

See also:

MIT Licensed

Similar vizzes

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
97% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point is colored by species using a categorical scale, with a color legend identifying setosa, versicolor, and virginica. The visualization uses D3.js APIs including `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for rendering axes. Data is loaded from a CSV file and parsed with `csvParse`.

RRyan Offstein
96% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species and a color legend for identification. The visualization uses D3 v7 with `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legends. It employs `selection.join` for dynamic element updates and loads data asynchronously via `fetch`, parsing the CSV with `csvParse`. The chart renders in a full-screen SVG with labeled axes and a categorical legend positioned in the plot area.

Ssnehareddygurram
96% match
Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length. Each point is colored by species using a categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization includes labeled axes and a color legend for species identification. The implementation uses `d3.scaleLinear` for positioning, `d3.extent` for domain calculation, and the `d3.selection` API for declarative rendering. Data is loaded from a CSV file and parsed with `d3.csvParse`.

Bbillmccabeusa@hotmail.com
96% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example displays the classic Iris Dataset, plotting sepal length against petal length for 150 flowers and using color to distinguish the three species: setosa, versicolor, and virginica. It includes labeled axes and a color legend. The visualization is built with D3.js, using `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and the `.join()` pattern to manage SVG elements. The code also modularizes reusable components for rendering axes and the color legend.

CCora
96% 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
95% 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
95% match
Loading thumbnail…

Fork of Scatter Plot with Color

A scatter plot of the Iris Dataset maps sepal length to petal length, with each of the three species (setosa, versicolor, virginica) encoded by a distinct color from the categorical `d3.scaleOrdinal` scheme. The visualization includes labeled x- and y-axes, a color legend with tick marks for species names, and circular markers rendered as SVG elements. Built with D3.js, the code uses `d3.extent`, `d3.scaleLinear`, and `d3.schemeCategory10` to scale data and colors, while custom modules `axes.js` and `colorLegend.js` construct the coordinate system and legend via selection joins.

Jjt23346059@gmail.com
95% match