Skip to main content
SimilarExport ZIP
100%

Fork of 3D Scatter Plot with Penguin Dataset

✓ Published0🌍 Public
RRupeshGandham
Last edited Jul 7, 2022
Created on Jul 7, 2022

This example displays a 3D scatter plot of the Palmer Penguins dataset, plotting bill length and bill depth on the x and y axes, with the z-axis left unspecified (empty string). Each penguin is represented by a marker, with fixed size, partial opacity, and thin grey outlines. The visualization is built using the Plotly.js library (via the `Plotly.newPlot` function) within a React page, while the data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart is rendered inside a dedicated `<div>` with margins zeroed out for a clean, immersive view.

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 3D Scatter Plot with Penguin Dataset

This example uses Plotly to create a 3D scatter plot of the Palmer Penguins dataset, displaying three measurements—bill length, bill depth, and flipper length—as points in a three-dimensional space. Two nearly identical traces are layered, sharing the same axes and dimensions but differing only in marker styling and opacity, which produces a subtle visual overlay effect. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the rows are unpacked into arrays using a custom function. The chart is rendered into a `<div>` element using `Plotly.newPlot` with minimal margins.

RRupeshGandham
96% match
Loading thumbnail…

Fork of 3D Scatter Plot

This example visualizes the Penguin Dataset as a 3D scatter plot using Plotly.js, mapping bill length, bill depth, and flipper length onto the x, y, and z axes. It renders three nearly identical traces with different marker colors, sizes, and border styles. The code loads the CSV data with d3.csv, then uses Plotly’s `newPlot` to display the interactive scene. The layout removes all margins so the plot fills the page. Data comes from a GitHub-hosted CSV file.

Aachyutanandmishra17@gmail.com
92% 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
89% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each point is colored by species, with circle radii fixed while bill length and depth influence visual encoding through non-standard `rx` and `ry` attributes. The visualization is rendered as an SVG using D3 v5 within a React-free HTML page. It loads CSV data asynchronously, applies linear scales via `scaleLinear`, and generates axes using `axisLeft` and `axisBottom`, with custom cursive font styling.

Ggeethikal
89% match
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 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.

MMounishSeeni
89% 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
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, using flipper length on the x-axis, body mass on the y-axis, and coloring each circle by species (blue for Gentoo, green for Chinstrap, brown for Adelie). It also encodes culmen length and depth as additional attributes on the circles, though the radius is fixed. The code loads CSV data via the Fetch API with `d3.csv`, scales positions with `d3.scaleLinear`, and renders SVG circles using `d3.select` and `.join`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom` in a React-free HTML page.

SSANEEM MOHAMMAD
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length to body mass for each observation. Each data point is drawn as an ellipse, with its horizontal and vertical radii derived from bill length and bill depth, respectively, and colored by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG circles via data joins. Axis labels and a title are appended as SVG text elements.

PPoojaThandra
88% match