Observable Plot: Symbol Scatterplot

100%

Observable Plot: Symbol Scatterplot

✓ Published0🌍 Public

Last edited Jan 24, 2024

Created on Jan 24, 2024

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.

AI-generated description

This example was ported from Observable: Symbol Scatterplot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Observable Plot Scatterplot

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.

CCurran Kelleher

91% match

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

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

90% match

Loading thumbnail…

Fork of reusable Scatter Plot

This fork of the classic scatter plot visualizes the Palmer Penguins dataset, encoding each penguin as a point in a 2D space. The plot maps bill length and bill depth on the x- and y-axes, with points colored by species and shaped by sex, while the island of origin is encoded through point color intensity. The SVG-rendered chart uses a light grid, axis labels, and a legend to distinguish the three penguin species across multiple categorical dimensions. The example is built with the v3 Observable runtime and released under the MIT license.

Mmadipadiga.raviteja@gmail.com

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

74% match

Loading thumbnail…

Reusable Scatter Plot

This visualization demonstrates a reusable scatter plot of penguin measurements, comparing body mass against bill length across three species. The chart animates through different x-axis variables—bill length, bill depth, flipper length, and body mass—in a cycling interval. Built with D3.js v6, it loads data from a remote CSV, uses the `scatterPlot` reusable module with `scaleLinear` and `axisLeft`/`axisBottom`, and renders SVG circles with color-coded species. The example also includes manual legend labels and adds rotated axis text.

Ssrikkanth05

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

74% match

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot explores relationships between penguin measurements, cycling through four numerical variables on the x-axis while body mass remains on the y-axis. Built with D3 v6, it loads CSV data from a GitHub gist and uses a reusable scatterPlot module with scaleLinear scales and axisLeft/axisBottom. The visualization includes color-coded species markers (Adelie, Gentoo, Chinstrap) with a custom legend, using setInterval to rotate the x-axis variable every few seconds. SVG circles render the data points with species-specific colors and elliptical shapes.

Ssuryavamsi00024

74% match