100%

simple scatter plot

✓ Published2🌍 Public

Last edited Apr 14, 2024

Created on Apr 6, 2024

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.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

MIT Licensed

Similar vizzes

Loading thumbnail…

Responsive scatter plot

This responsive scatter plot visualizes the relationship between bill length and flipper length for penguins from the @drbagwell/penguins dataset. The D3 code uses scaleLinear and extent to map data values to x and y coordinates, with circles rendered at varying positions and opacity. The visualization adapts to container size changes via observable resize handling, redrawing the SVG dimensions and axes accordingly. A gray inner rectangle marks the plotting region, and axis labels are provided by the @drbagwell/axis-labels library.

DDonald Bagwell

93% match

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

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

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

92% match

Loading thumbnail…

HW1_Simple Scatter Plot

This example shows the relationship between bill length and flipper length in the Penguins Dataset, with each penguin represented as a circle positioned by two linear scales. The scatter plot uses D3's `scaleLinear` and `extent` functions to map the data to screen coordinates, along with `axisLeft` for the y-axis. Axes and labels are rendered using the `@curran/axis-labels` library, which adds text for both dimensions. The visualization is built entirely with plain SVG elements (`rect` and `circle`) and reads data from the `@curran/penguins` package.

Ssunnyshih0312@gmail.com

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

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

91% match

Loading thumbnail…

Fork of Simple Scatter Plot_drb

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.

DDonald Bagwell

90% match