Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Penguin Data set scatter Plot

✓ Published0🌍 Public
MMounishSeeni
Last edited Mar 12, 2023
Created on Mar 12, 2023

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length against body mass while coloring each point by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) within a React-free SVG rendering. Circles are positioned via the scales and include custom `rx` and `ry` attributes derived from culmen measurements, though the visual radius remains fixed. The chart also adds cursive axis labels and a title, with the data fetched from a raw 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 Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, 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 also encodes bill length and depth through the circle’s rx and ry attributes, creating elliptical markers. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data and render axes, with SVG circles and text labels styled via CSS.

NNikhilchiguru-8
97% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each species (Adelie, Gentoo, Chinstrap) differently. The code uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to fetch data and render SVG circles. Although the marks are drawn as circles, the code sets `rx` and `ry` attributes on them, which are not valid circle properties. The visualization includes custom axes, axis labels, and a title.

SSANEEM MOHAMMAD
97% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis. Each circle is colored by penguin species (yellow for Adelie, green for Gentoo, brown for Chinstrap) and encoded with bill length and depth as elliptical radii. Built with React and D3 v5, it uses `csv()` to load remote data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG is rendered full-screen, with custom font styling and axis labels displayed prominently.

Ddanilo
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, visualizing flipper length against body mass. Each point is colored by species (Adelie, Gentoo, or Chinstrap), with additional fields for culmen length and depth stored in the data binding. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) to map the dataset, rendering circles as SVG elements with a fixed radius. The code also adds axis labels and a title styled with custom fonts, all within a React-compatible HTML page.

MMounishSeeni
96% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length to body mass and coloring each point by species (Adelie, Gentoo, or Chinstrap) with yellow, green, or brown. It uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load, scale, and render the axes, while appending SVG circles with fixed radius and dynamic fill colors. The visualization also adds rotated and regular text labels for axes and a title, all rendered in an SVG container sized to the full browser window.

Kkarnisrikanth2212
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length to body mass for individual penguins. Each point is colored by species, with Adelie, Gentoo, and Chinstrap penguins shown in yellow, green, and brown respectively. The code loads CSV data via `d3.csv`, scales positions with `scaleLinear` and `extent`, and renders circles using SVG. Additional axes are drawn with `axisLeft` and `axisBottom`, while the chart includes a title and custom tick font sizes.

Yyaswanthsen
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This visualization is a scatter plot of the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis. Each circle’s color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while the circle’s fill attributes of `rx` and `ry` are set to the raw bill length and bill depth values, though the visual radius remains constant. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render SVG axes. The background is the browser window, and the plot includes cursive font labels for both axes.

Vvamshisoletii
96% match
Loading thumbnail…

Fork of Penguins Dataset Scatter plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It uses D3 v6 with `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes, while `selectAll`, `data`, and `join` render SVG circles. The code loads data from a CSV URL via `csv` and attempts to set `rx` and `ry` attributes on circles, though the latter references a non-existent property. The visualization fills the browser window and includes a title text element.

Ddheeraj1509
96% match