The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Oct 3, 2024
17 forks
66 stars
6
Observable Plot
Observable PlotMarks and ChannelsScalesAxesTransformsFacetsLegendsProjectionsArea MarkArrow MarkAuto MarkBar MarkBox MarkCell MarkContour MarkDelaunay MarkDensity MarkDot MarkImage MarkGeo MarkLine MarkLinear Regression MarkLink MarkRaster MarkRect MarkRule MarkText MarkTick MarkTree MarkVector MarkFrame MarkGroup TransformBin TransformStack TransformMap TransformWindow TransformSelect TransformInterval TransformDodge TransformCentroid TransformHexbin Transform
Plot Cheatsheets
(6)
ShorthandMappingExtended Projections
Plot from ggplot2
Plot for Matplotlib Users: Overview
Also listed in…
Hands-on Tutorials
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({

marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
symbol: "species",
opacity: 0.7,
r: 4
})
],

symbol: {legend: true},
facet: {data: penguins, x: "island"},
// color: {legend: true}, // Legend is redundant if already covered by symbol legend!
x: {label: "Flipper length (mm)"},
y: {label: "Body mass (g)"},

grid: true

})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(penguins,
Plot.binX({y: "count"},
{x: "flipper_length_mm"}))
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {domain: [150, 250]},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g"}
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {reverse: true},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g"}
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {scheme: "viridis"},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "body_mass_g"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: {data: penguins, x: "species"},
marks: [
Plot.rectY(penguins,
Plot.binX(
{y: "count"},
{x: "flipper_length_mm",
thresholds: 12})
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {label: "Flipper length (mm)"},
y: {label: "Body mass (g)"},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"}
)
]
})
Insert cell
Insert cell
Plot.plot({
color: {legend: true},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"})
]
})
Insert cell
Insert cell
Plot.plot({
color: {legend: true, scheme: "dark2"},
x: {label: "Penguin body mass (grams)"},
y: {label: "Count"},
marks: [
Plot.rectY(penguins,
Plot.binX(
{y: "count"},
{x: "body_mass_g",
thresholds: 30, // Updates bin number for histogram
fill: "species"}))
]
})
Insert cell
Insert cell
viewof sizeInput = Inputs.range(d3.extent(penguins, d => d.body_mass_g),
{label: "Choose minimum penguin mass (g):",
step: 1})
Insert cell
Plot.plot({
marks: [
Plot.tickY(penguins,
{x: "species",
y: "body_mass_g",
filter: d => d.body_mass_g > sizeInput, // Filter to only include observations where body mass exceeds the value of the sizeInput slider!
stroke: "species"}
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more