Skip to main content
SimilarExport ZIP
100%

Fork of Penguin Data set scatter Plot

✓ Published0🌍 Public
VVAbhiram99
Last edited Apr 6, 2023
Created on Apr 6, 2023

This scatter plot visualizes penguin data, showing flipper length against body mass for individual penguins, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization also encodes bill length and depth as the x and y radii of each circular mark, creating variable-sized points. Built with D3 v5 and React, the code uses `d3.csv` to load the dataset, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes with custom styling.

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

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length and body mass as the primary x and y axes while encoding bill length and bill depth into circle radii. Data is loaded from a CSV file and parsed using d3.csv, with scales created via d3.scaleLinear and axes rendered using d3.axisLeft and d3.axisBottom. Each point’s color indicates species (yellow for Adelie, green for Gentoo, brown for others), and the SVG circles are joined to data using d3’s selectAll and join pattern. The rendering uses d3.v5 within a React-free plain HTML document.

Rradhadevarapu
97% 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
97% 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 data, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or other). The visualization uses D3 v5 and React, rendering with SVG. It loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for axes, and draws circles with `data.join`. Axis labels and a title are added using D3’s `axisLeft`, `axisBottom`, and text elements.

Ssnehareddygurram
96% 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 visualization displays a scatter plot of penguin measurements from a CSV dataset, plotting flipper length against body mass for individual penguins. The color of each point indicates the penguin species, with Adelie shown in red, Gentoo in yellow, and the remaining species in black. The code uses D3 v5 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create scales, and render SVG circles. Axis labels and a chart title are added as text elements, with custom styling applied to tick fonts.

Ssivamani
96% 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