Skip to main content
SimilarExport ZIP
100%

Fork of Penguin Data set scatter Plot

✓ Published0🌍 Public
SSANEEM MOHAMMAD
Last edited Mar 11, 2023
Created on Mar 11, 2023

This example shows a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis. Each circle is colored by species (Chinstrap, Gentoo, or Adelie) and also encodes bill length and depth via non-standard `rx` and `ry` attributes. The visualization loads CSV data from a GitHub gist using `d3.csv`, and renders SVG circles with `d3.scaleLinear` scales and `d3.axisLeft`/`d3.axisBottom` axes. The code uses D3 v5 and positions elements based on the browser viewport 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…

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

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with points colored by species (blue for Chinstrap, gray for Adelie, black for others). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to fetch data from a GitHub gist, parse numeric fields, and render SVG circles with fixed radius. Axis labels are added as text elements, while circle attributes include unconventional `rx` and `ry` properties set to bill and flipper lengths, though these do not affect circle rendering.

Ssiddu7147
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot displays penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). The code uses D3 v5’s `csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circle marks are drawn via SVG, with each point’s fill color mapped from species. The plot uses a fixed radius of 5 pixels, and the visualization adapts to the full browser window size.

Ssiddu7147
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, plotting flipper length against body mass and coloring each point by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to load and map data from a remote CSV file, rendering circular marks with SVG. Each circle also encodes bill length and depth as its horizontal and vertical radii, creating an elliptical distortion that layers additional dimensions onto the standard scatter plot.

SSharanya1307
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping flipper length to body mass for each individual. Three species—Adelie, Gentoo, and Chinstrap—appear as yellow, green, and brown circles, respectively. The code loads data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders SVG circles using `select` and `join`. Axis labels and a title are added with `axisLeft`, `axisBottom`, and SVG `text` elements.

SSANEEM MOHAMMAD
96% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping flipper length to body mass for each individual. Three species—Adelie, Gentoo, and Chinstrap—appear as yellow, green, and brown circles, respectively. The code loads data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders SVG circles using `select` and `join`. Axis labels and a title are added with `axisLeft`, `axisBottom`, and SVG `text` elements.

SSANEEM MOHAMMAD
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 Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap) using yellow, green, and brown. The code loads CSV data via `d3.csv`, parses numeric fields, and renders SVG circles using `d3.scaleLinear` for axes and `d3.axisLeft` and `d3.axisBottom` for ticks. React and D3 v5 drive the full-window responsive layout, with axis labels and a title appended as SVG text.

Bbhanuteja1807@gmail.com
96% match