100%

Simple Scatter Plot

✓ Published0🌍 Public

Last edited May 7, 2024

Created on May 7, 2024

This scatter plot visualizes the Penguins dataset, mapping measurements of penguin species onto X and Y axes. The visualization renders circles with adjustable radius and opacity, set against a colored inner rectangle. Built with D3.js, the code utilizes `scaleLinear` for axis scaling and `extent` to determine data ranges. Custom axis label functions add text annotations to the plot. The example is intended as a reusable template, inviting users to adapt it to their own data by modifying the data source and axis configurations.

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

This simple scatter plot visualizes the Penguins Dataset, mapping distance on the x-axis and radius on the y-axis. Built with D3, it uses `scaleLinear` for axes, `xAxis` and `yAxis` for ticks, and custom axis label helpers. The plot draws gray circles with fixed radius and opacity, over a light gray inner rectangle, within margins defined by `marginTop`, `marginBottom`, `marginLeft`, and `marginRight`. Data comes from a referenced external dataset, and the code is structured for easy modification to display new data.

PParth Shroff

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

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

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

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

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

86% match

Loading thumbnail…

Fork of Simple Scatter Plot

This fork of the Simple Scatter Plot visualizes the Penguins Dataset, plotting bill length against flipper length for individual penguin specimens. The D3 visualization uses `scaleLinear` and `extent` to map data values to pixel coordinates, rendering circles with configured radius and opacity settings against a light gray inner rectangle. The code leverages `xAxis` and `yAxis` from D3, along with custom axis label components, to present the measured biological attributes. The example demonstrates how to adapt a template visualization with custom data mappings and axis configurations for different datasets.

Ccolesaint123@gmail.com

86% match

Loading thumbnail…

Scatter Plot

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.

Hhaozhou334@gmail.com

86% match