100%

Fork of Simple Scatter Plot_drb

✓ Published0🌍 Public

Last edited Apr 12, 2024

Created on Apr 8, 2024

This example visualizes the relationship between bill length and flipper length in the Palmer Penguins dataset, with each point representing an individual penguin. The scatter plot uses D3's `scaleLinear` and `axisLeft` to map data values to positions, and `selectAll` with data joins to render circles with uniform radius and opacity. The code imports the dataset from `@curran/penguins`, configures axis labels via `@curran/axis-labels`, and supports customization of margins, chart dimensions, and circle appearance through its `viz` function.

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

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

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…

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

92% match

Loading thumbnail…

Fork of Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length in penguins, using data from the Palmer Penguins dataset. Each circle represents an individual penguin, with a gray interior rectangle framing the plotting area. The visualization is built using D3.js v7, employing `scaleLinear` for axes, `extent` to compute data domains, and `selectAll().join()` patterns for rendering SVG elements. Axes and labels are added via the `@curran/axis-labels` library, while styling parameters such as circle radius and opacity are configured through the main script.

Ssanthoshdachepally333@gmail.com

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

92% match

Loading thumbnail…

Fork of Simple Scatter Plot

This fork of the simple scatter plot visualizes the relationship between bill length and flipper length in the Penguins Dataset, with each circle representing an individual penguin. The code uses `scaleLinear` to map data values to pixel coordinates, and draws axes, axis labels, and a background rectangle via the `@curran/axis-labels` library. Circles are rendered with D3's `selectAll` and `join` API, showing a clear pattern of measurement correlation across species. The example serves as a template for users to adapt with their own data by modifying the `xValue` and `yValue` functions.

Aanilthapa1.at23@gmail.com

92% match

Loading thumbnail…

Fork of Simple Scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping bill length against flipper length with each point representing an individual penguin. The visualization uses D3.js to render the plot, employing `scaleLinear` for axis scaling and `axisLeft` along with the `@curran/axis-labels` library for axis construction and labeling. Data is loaded from `@curran/penguins`, and the chart dynamically resizes to fit its container while displaying translucent circles to show overlapping data points. The example demonstrates a reusable chart architecture where both the visualization logic and user interface are clearly separated.

MMahbub hussain

91% match