Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
Ssridhardubala106@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This example visualizes the Palmer Penguins dataset, plotting bill length against flipper length for individual penguins. The scatter plot encodes each penguin as a semi-transparent circle, revealing the distribution and correlation between the two measured traits across species. The visualization is built using D3.js, leveraging `scaleLinear`, `axisLeft`, and `extent` to construct scales and axes, while custom axis-label functions from `@curran/axis-labels` add annotations. A light gray background rectangle highlights the plotting area. The code dynamically computes scales from the data extents and uses SVG joins to render circles, axes, and labels, with margins and dimensions set to fit the container.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Palmer Penguins dataset, plotting bill length on the x-axis against flipper length on the y-axis using a simple scatter plot. The internal chart area is rendered as a gray rectangle, with labeled axes and semi-transparent circles representing individual penguins. Built with D3, the code uses `scaleLinear`, `extent`, `axisLeft`, and custom axis-label helpers from the `@curran/axis-labels` library to construct the visualization. Data comes from the `@curran/penguins` import and is drawn into a dynamic SVG sized to the container.

Aanishbudhi@gmail.com
96% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example shows a scatter plot of the Penguins dataset, visualizing bill length against flipper length. Each circle represents a penguin, with its opacity and radius set to fixed values. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and the `@curran/axis-labels` library to render axes and labels. The rendering uses D3’s `select` and `join` operations to update SVG elements efficiently. The data is loaded from `@curran/penguins`, and the plot area is styled with a light gray background.

Mmaheshpolisetty22@gmail.com
92% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguins Dataset by plotting bill length against flipper length. Each circle represents a penguin, with its position determined by these two measurements, and the semi-transparent teal fill reveals overlapping data points. The visualization is built with D3, using `scaleLinear`, `extent`, and axis label helpers to render the scatter plot. It also incorporates `observeResize` from `@RelaxingSoul/res-axis` to handle responsive dimensions, and the SVG elements are managed through D3's `select` and `join` methods.

Oownerofthesoul0000@gmail.com
92% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Penguins dataset from @curran/penguins, mapping bill length against flipper length. It uses D3 scales (scaleLinear), axis-labels from @curran/axis-labels, and SVGs rendered via d3.select. Points are drawn as circles with fixed radius and opacity, positioned using the xValue and yValue accessors. The inner rectangle fill and margins define the chart’s layout. The code is a fork meant for adaptation to other datasets.

Eeschuman20@gmail.com
90% match
Loading thumbnail…

Fork of reusable Scatter Plot

This fork of the classic scatter plot visualizes the Palmer Penguins dataset, encoding each penguin as a point in a 2D space. The plot maps bill length and bill depth on the x- and y-axes, with points colored by species and shaped by sex, while the island of origin is encoded through point color intensity. The SVG-rendered chart uses a light grid, axis labels, and a legend to distinguish the three penguin species across multiple categorical dimensions. The example is built with the v3 Observable runtime and released under the MIT license.

Mmadipadiga.raviteja@gmail.com
90% 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
90% 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
90% 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 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
89% match