Skip to main content
SimilarExport ZIP
100%

Creating Scatter Plot with Penguin Data

✓ Published0🌍 Public
Sshiiva-surya
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from HTML Starter

This example renders a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species. It loads data from a CSV file using `d3.csv`, parses numeric fields, and positions circles with `scaleLinear` and `extent` domains. The code uses D3 v5 with SVG, appending axes via `axisLeft` and `axisBottom`, and draws circles with `selectAll().data().join()`, also setting non-visible `rx` and `ry` attributes from culmen dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot of Penguin Dataset

This scatterplot visualizes the Penguin Dataset, plotting flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes. SVG circles are positioned using the linear scales, with fill colors assigned per species via a custom marker function, and includes axis labels and a title.

HHemanthh81
93% match
Loading thumbnail…

Penguin scatter Plot

This example shows a scatter plot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5 to fetch CSV data from a GitHub gist, parse it, and render SVG circles scaled by bill length and depth within each circle's radius. The plot includes axis labels and a title, with axes generated via `d3.axisLeft` and `d3.axisBottom`.

VVAbhiram99
93% match
Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes penguin data, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie in blue, Gentoo in pink, and Chinstrap in black). The code uses D3 v5 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub Gist, map the quantitative values to pixel coordinates, and render SVG circles with a fixed radius. Additional bill measurements are stored as attributes (`rx`, `ry`) on each circle but are not visually encoded. Axis labels and a title are added as SVG text elements.

KKiran Jyothi Bodduluri-11604571
92% match
Loading thumbnail…

Penguin Data set scatter Plot

A scatter plot of penguin measurements encodes flipper length on the x-axis and body mass on the y-axis, with color distinguishing species (Adelie, Gentoo, and Chinstrap). It also maps bill length and depth to the circles' `rx` and `ry` attributes, creating elliptical marks. Built with D3 v5 (`d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`) inside a React app, it renders to SVG using `d3.csv` to load the PenguinData.csv file. The plot fills the window and includes positioned labels and a title.

AAISWARYAMARAPATLA1999
92% match
Loading thumbnail…

Penguin Data Scatter Plot

This visualization displays a scatter plot of penguin data, comparing flipper length on the x-axis against body mass on the y-axis. Each circle represents a penguin, colored by species (orange for Adelie, gray for Gentoo, black for the default species), with a fixed radius of 5 pixels. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG elements in a React framework. Axis labels are added via appended text, with the title "Scatter Plot" displayed near the top.

EEshwarreddyt
92% match
Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot displays penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG visualization in a React environment. The circles also encode bill length and depth via unused `rx`/`ry` attributes, though the fixed radius keeps them uniform. Data comes from a GitHub-hosted CSV file, parsed with numeric coercion.

RReyden Harris
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and coloring each point by species (Adelie, Gentoo, and Chinstrap). The code loads data from a CSV URL using `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to build the axes. SVG circles are appended to the DOM with radius and fill attributes derived from bill dimensions and species, respectively.

LLakshmanRangisetti
92% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example shows a scatter plot of penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with points colored by species (Adelie, Gentoo, or other). The visualization loads a CSV from a GitHub gist using `d3.csv`, parses numeric fields, and renders SVG circles positioned via `d3.scaleLinear` and `d3.extent`. It uses `d3.axisBottom` and `d3.axisLeft` for axes, with cursive font styling and custom labels. The code also applies `rx` and `ry` attributes from bill measurements, though these do not visibly alter the circle shape.

Ssivamani
92% match