Skip to main content
SimilarExport ZIP
100%

Simple Scatter Plot

✓ Published48🌍 Public
CCurran Kelleher
Last edited Mar 3, 2025
Created on Jan 24, 2024
Forked from Axis Labels

A simple scatter plot visualizes bill length against flipper length for individual penguins from the Penguins Dataset. The plot uses D3 scales to map data values to x and y axes, with each point rendered as a semi-transparent circle. The visualization includes axis labels and a gray inner rectangle behind the data. The code leverages D3's `select`, `scaleLinear`, and `extent` functions to handle the data binding and coordinate mapping.

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

Penguin Scatter Plot

This scatter plot uses the D3.js library to visualize the relationship between bill length and flipper length for penguins from the Palmer Archipelago dataset. The plot renders gray circles with reduced opacity, allowing overlapping points to remain visible. The axes are labeled “Bill Length (mm)” and “Flipper Length (mm),” and the plot includes a light gray background rectangle to delineate the inner plotting area. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and custom axis-label helpers to position the chart elements.

SSubhendu Karmakar
91% 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
89% match
Loading thumbnail…

Penguin Scatter Plot

A penguin scatter plot displays the relationship between bill length and bill depth for individual penguins, with each data point represented as a semi-transparent circle. The chart uses D3.js to create a linear scale for both axes, render the plot marks, and draw labeled axes with directional arrows indicating increasing values. The data comes from the @curran/penguins dataset, and the visualization is built using reusable modules that separate axis rendering, scatter plot logic, and the main visualization setup. The code relies on d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom.

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

Responsive Scatter Plot

This responsive scatter plot visualizes the relationship between bill length and flipper length in penguins, using data from the `@curran/penguins` package. The plot filters out rows with missing values before rendering circles with opacity and radius determined by the code. Built with D3's `scaleLinear` and `axes` from `@curran/responsive-axes`, it dynamically adjusts its width and height to fit its container using `observeResize`. The chart includes labeled axes, a gray inner rectangle, and updates interactively as the viewport changes.

CCurran Kelleher
88% match
Loading thumbnail…

scatter Plot

This scatter plot visualizes penguin data showing flipper length against body mass, with each point colored by species. It also encodes bill dimensions through circle position attributes, though these are not visually distinct. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates. Data is loaded via `csv` from a GitHub gist, and points are rendered as circles with species-based fill colors.

BBala Sai Krishna
87% match