Observable Plot Scatterplot

100%

Observable Plot Scatterplot

✓ Published2🌍 Public

Last edited Jan 22, 2024

Created on Jan 22, 2024

This example uses Observable Plot to render a scatterplot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis. The plot includes a grid, an inset margin, and automatically sizes to fit its container. The code imports the `Plot` library and a penguins dataset, then calls `Plot.plot` with a `Plot.dot` mark to visualize the data.

AI-generated description

This example was ported from Observable: Scatterplot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Observable Plot Scatterplot with Color

This example displays a scatterplot of penguin measurements, with each dot positioned by flipper length and body mass, and colored by species. Built using Observable Plot’s `Plot.plot` API, it renders dots via `Plot.dot` and includes a legend, grid, and margins configured through the `color` and `inset` options. The chart reads data from the `@curran/penguins` package and dynamically resizes to its container’s dimensions.

CCurran Kelleher

94% match

Loading thumbnail…

Observable Plot Scatterplot with Color

This example shows how penguin body mass and flipper length relate, with points colored by species using the Observable Plot library. It plots the penguins dataset from @curran/penguins, rendering dots with `Plot.dot` and mapping the `stroke` channel to the `species` field, while a legend appears via a `color` option. The chart is sized to its container and includes a grid and inset padding. The code also handles hot reloading by replacing the existing DOM node, and it overrides default figure margins in CSS.

CCurran Kelleher

92% match

Loading thumbnail…

Observable Plot: Symbol Scatterplot

This example uses Observable Plot 0.6.13 to render a symbol scatterplot of penguin measurements from the `@curran/penguins` dataset. It plots body mass against flipper length, with both the stroke color and symbol shape encoding the species. The plot includes a legend for symbols, a grid, and labeled axes. The chart is sized to its container and supports hot reloading by replacing the existing DOM node. The code imports from `@observablehq/plot` and uses the `Plot.dot` and `Plot.plot` APIs.

CCurran Kelleher

91% match

Loading thumbnail…

Scatterplot

This example displays a scatterplot of penguin measurements, plotting flipper length on the x-axis against body mass on the y-axis for each individual in the dataset. The plot uses a simple grid background with an inset margin to frame the points. It is built using the Observable Plot library, with the `Plot.dot` mark generating the circles from data imported from a CSV file hosted on GitHub.

FFremont

90% match

Loading thumbnail…

Creating Scatter Plot with Penguin Data

This example renders a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species. It loads data from a CSV file using `d3.csv`, parses numeric fields, and positions circles with `scaleLinear` and `extent` domains. The code uses D3 v5 with SVG, appending axes via `axisLeft` and `axisBottom`, and draws circles with `selectAll().data().join()`, also setting non-visible `rx` and `ry` attributes from culmen dimensions.

Sshiiva-surya

79% match

Loading thumbnail…

Penguin Data Scatter Plot

This visualization displays a scatter plot of penguin data, comparing flipper length on the x-axis against body mass on the y-axis. Each circle represents a penguin, colored by species (orange for Adelie, gray for Gentoo, black for the default species), with a fixed radius of 5 pixels. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG elements in a React framework. Axis labels are added via appended text, with the title "Scatter Plot" displayed near the top.

EEshwarreddyt

78% match

Loading thumbnail…

Penguin scatter Plot

This example shows a scatter plot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5 to fetch CSV data from a GitHub gist, parse it, and render SVG circles scaled by bill length and depth within each circle's radius. The plot includes axis labels and a title, with axes generated via `d3.axisLeft` and `d3.axisBottom`.

VVAbhiram99

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

77% match