100%

testing

✓ Published0🌍 Public

Last edited Sep 15, 2024

Created on Sep 14, 2024

This example presents two scatter plots of the Penguins dataset, one comparing sepal length to sepal width and another comparing bill length to flipper length. The code uses D3's `scaleLinear`, `extent`, and axis components imported from `@curran/axis-labels` to render the plots. It leverages D3's `.join` operator for efficient incremental updates of SVG circles, with adjustable radius and opacity. The visualization is driven by the `viz` function, which takes column selectors and margin configuration as parameters, allowing simple reuse for multiple attribute pairs.

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

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

84% match

Loading thumbnail…

Fork of Simple Scatter Plot

This fork of a simple scatter plot visualizes the Penguins Dataset, plotting bill length against flipper length for individual penguins. The chart uses D3’s `scaleLinear` to map data values to pixel coordinates, with axes and labels from the `@curran/axis-labels` library. The `viz` function renders a gray inner rectangle and steelblue circles with fixed radius and opacity. The dataset is imported from `@curran/penguins`, and the code demonstrates how to customize the visualization by adding a configurable `circleColor` parameter to the existing scatter plot structure.

Hhailiwang@my.unt.edu

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

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

83% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example demonstrates a scatter plot of the Penguins dataset, displaying bill length against flipper length for individual penguins. The visualization is rendered using D3.js primitives like `select` and `join` to create SVG elements, with scales and axes computed via `scaleLinear` and `axisLeft`. The plot includes labeled axes and a gray inner rectangle to frame the data points, which are drawn as semi-transparent circles. The code structure separates the rendering logic into a customizable `viz` function, making it easy to adapt the chart for other datasets.

Xx900.cs11@nycu.edu.tw

83% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example displays the relationship between bill length and flipper length in the Penguins dataset, plotting each penguin as a semi-transparent circle that reveals the overall distribution and correlation between the two measurements. The visualization uses D3.js, leveraging functions like `scaleLinear` for axis scaling, `axisLeft` for the y-axis, and the custom `viz` function to render axes, labels, and data points. The code implements a scatter plot programmatically, importing the dataset from `@curran/penguins` and styling the plot with a light gray inner rectangle and adjustable circle radius and opacity.

MMahbub hussain

82% match

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Penguins Dataset, mapping bill length to the x-axis and flipper length to the y-axis for each penguin observation. The code uses D3’s `scaleLinear` to create scales from the data extents, then renders axes via the `axisLeft` function and custom `xAxis` and `yAxis` helpers from `@curran/axis-labels`. Circles are drawn with D3’s `selectAll` and `join` pattern, with configurable radius and opacity. The visualization is built using data imported from `@curran/penguins`.

LLê Minh Bằng

82% match