Skip to main content
SimilarExport ZIP
100%

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

✓ Published0🌍 Public
Mmanishcheruku
Last edited Mar 10, 2023
Created on Mar 10, 2023

This example displays a scatter plot of the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species. The code uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes into SVG circles. It converts penguin attributes to numeric values via a parse row function and maps species names to fixed colors. Data is fetched from a GitHub gist URL.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis for three penguin species, each color-coded via a custom marker function. It uses D3 v6’s `csv`, `scaleLinear`, and `axisLeft`/`axisBottom` to load and scale the data, rendering circles in SVG with marginal labels. The chart also encodes culmen length and depth as circle attributes `rx` and `ry`, though these do not affect the visible circular marks, which all use a fixed radius. Data comes from an external CSV URL fetched asynchronously.

Mmanishcheruku
97% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This visualization displays a scatter plot of the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, each represented by a distinct color. The plot includes labeled axes for flipper length (mm) and body mass (g), with a title. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render SVG circles. The data comes from a GitHub Gist URL, and the visualization fills the entire browser window, with circles sized at a fixed radius.

Vvryvarma5577@gmail.com
95% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, each color-coded via a custom marker function. The visualization loads CSV data using `d3.csv` and renders circles in an SVG container using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each data point maps flipper length to the x-axis and body mass to the y-axis, with species distinguished by color. The chart includes labeled axes and a title, all rendered within a full-window SVG.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species color-coded (Adelie, Chinstrap, and Gentoo). The visualization loads CSV data via `d3.csv`, parses numeric fields, and renders circles using SVG appended to the body. Scales created with `d3.scaleLinear` map the data to screen coordinates, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart includes a title and axis labels, with circles positioned by `cx` and `cy` attributes and colored by species.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of ICE6 - Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie in green, Gentoo in violet, and Chinstrap in red). The visualization uses D3 v5 within a React framework, rendering circles via SVG. The code leverages `d3.csv` for data loading, `scaleLinear` for axes, and `extent` to compute domains, while also encoding bill length and depth as unused circle radius properties.

SSravaniPosina
94% match
Loading thumbnail…

Fork of ICE-6 (penguin dataset)

This example visualizes the Palmer penguin dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with circles colored by species (Adelie, Gentoo, and Chinstrap). Each circle’s rx and ry attributes encode bill length and depth, though these do not affect the SVG rendering. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.extent for domains, and d3.axisLeft and d3.axisBottom for axes. The SVG is rendered full-screen using d3.select and d3.join.

Nnagasai-gummadi
93% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between culmen length and culmen depth for individual penguins. The visualization uses D3.js v6 to load the inline CSV data, create linear scales for both axes, and render SVG circles for each data point. The code employs `d3.csv` for data ingestion, `scaleLinear` for coordinate mapping, and `axisLeft` and `axisBottom` to generate labeled axes with styled tick text.

Mmanishcheruku
93% match
Loading thumbnail…

Fork of Data Visualization ICE6: Penguins Dataset Scatter Plot

This visualization displays the Palmer Penguins dataset as an interactive scatter plot. It maps flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species (Adelie, Gentoo, or Chinstrap). The visualization uses d3.csv to fetch the data, d3.scaleLinear and d3.extent to scale the axes, and d3.axisLeft and d3.axisBottom to render tick marks. Circle positions are computed using the d3.select and .join methods within an SVG canvas.

Vvamshisoletii
92% match