100%

Scatter Plot

✓ Published0🌍 Public

Last edited Sep 9, 2024

Created on Sep 9, 2024

This scatter plot visualizes the Penguins Dataset, showing the relationship between bill length and flipper length for individual penguins. The chart uses D3’s `scaleLinear` to map data values to pixel coordinates, with axes rendered via `axisLeft` and custom axis-label helpers from `@curran/axis-labels`. Circles represent each penguin, with opacity and radius set to fixed values. The visualization is built using D3’s data join pattern, binding the dataset to SVG circles, and includes a light gray inner rectangle to frame the plotting area.

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…

Simple Scatter Plot

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.

CCurran Kelleher

94% match

Loading thumbnail…

Scatter Plot H/W

A scatter plot visualizes the relationship between bill length and flipper length in the Penguins dataset, with each circle representing an individual penguin. The plot uses D3.js to render axes, labels, and semi-transparent circular marks over a light gray inner rectangle. The code employs `scaleLinear` for axis scaling, `axisLeft` and the custom `xAxis`/`yAxis` functions for ticks, and `@curran/axis-labels` for axis titles. Data flows from `@curran/penguins`, and the visualization updates responsively based on container dimensions.

Wweird_danger

93% match

Loading thumbnail…

Simple Scatter Plot

This example shows a simple scatter plot of the Penguins Dataset, mapping bill length to flipper length for individual penguins. It uses D3’s `scaleLinear` and `extent` to compute scales, then renders axes, labels, and circles via `selectAll().join()`. The chart reads data from `@curran/penguins`, with a light gray inner rectangle and semi-transparent circles. It demonstrates a minimal, reusable visualization pattern that can be forked and customized for other datasets.

Mmelissastrong89@gmail.com

93% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the relationship between bill length and flipper length for penguins, with each circle representing an individual penguin. The scatter plot uses a light gray background for the plotting area and semi-transparent circles to show data density. The code uses d3's `scaleLinear` for axis scaling, `extent` for data range calculation, and axis label functions from the `@curran/axis-labels` library. Data comes from the `@curran/penguins` dataset, and the visualization is built using declarative D3 joins.

Eedw.ext@gmail.com

93% 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

93% match

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Penguins Dataset, showing the relationship between bill length and flipper length across individual penguin specimens. The visualization uses D3.js to render circles scaled through `scaleLinear` and positioned on Cartesian axes, with axis labels added via the `@curran/axis-labels` package. The implementation separates layout configuration from rendering through a reusable `viz` function that handles axis generation, inner rectangle fill, and circle opacity. Data is loaded from `@curran/penguins`, mapping specific dataset fields to x and y coordinates.

Eevonne0930.cs11@nycu.edu.tw

92% match

Loading thumbnail…

simple scatter plot

This scatter plot visualizes the relationship between bill length and flipper length for penguins, using the @drbagwell/penguins dataset. D3's scaleLinear and extent functions map the data to the plot area, with circles positioned via xScale and yScale calls. The visualization includes axes, labels, and an inner rectangle fill, all rendered through SVG joins. Circle radius and opacity are hardcoded values derived from the dimensions, and the plot is built with the viz module from the same author.

DDonald Bagwell

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