Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
Aamari.urquhart@gmail.com
Last edited Feb 6, 2024
Created on Feb 6, 2024

This fork visualizes the Penguins Dataset as a scatter plot, mapping bill length to the x-axis and flipper length to the y-axis. It uses D3’s `scaleLinear` and `axisLeft` to position axes, along with custom axis label utilities from `@curran/axis-labels`. The `selectAll().join()` pattern renders rectangles for the background and circles for each penguin, with fixed radius and opacity values to show data density in the plot.

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 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
95% 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 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
91% match
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
90% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguin dataset using a scatter plot that maps two numerical variables onto x- and y-axes. It leverages D3's `scaleLinear`, `extent`, and axis functions to create scales and render axes. The code draws a background rectangle, then places circles with fixed radius and opacity, using the `xValue` and `yValue` accessors to position each point. The plot includes axis labels via the `@curran/axis-labels` helper, making the data relationships clear.

CChaturyaAkhilaPallem@my.unt.edu
89% match
Loading thumbnail…

Fork of Simple Scatter Plot

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.

Ssridhardubala106@gmail.com
89% match
Loading thumbnail…

Fork of Penguin Scatter Plot (Part 2)

This fork of the Penguin Scatter Plot displays bill length against bill depth for individual penguins from the @subh3ndu/penguins dataset, with points rendered as semi-transparent circles on a gray plot background. Using D3.js v7, it builds linear scales with `scaleLinear` and `extent` to map data to pixel coordinates. The visualization imports `axisLeft` and `axisBottom` for axes, while the core scatterplot logic and separate axes-module handle mark placement and labeled gridlines, respectively. The example demonstrates a modular D3 structure where the chart, axes, and data are split into distinct files.

SSubhendu Karmakar
88% match
Loading thumbnail…

Fork of Penguins Dataset Scatter Plot

This fork of the Penguins Dataset Scatter Plot displays each penguin as an ellipse-shaped point, mapping flipper length and body mass to the x- and y-axes while encoding bill length and depth as the rx and ry radii. The visualization uses D3 v6 with scaleLinear, extent, axisBottom, and axisLeft to render an SVG scatter plot. Data is loaded from a CSV via d3.csv, with species colored distinctly—Adelie in orange, Gentoo in red, and others in blue—across a full-screen canvas.

Ssiddu7147
87% match