Notebooks 2.0 is here.

Read the preview announcement
The avatar for @isinkosemenchartchallenge
Isin Kosemen Chart Challenge
Public
Edited
Oct 29, 2023
Fork of Session 2: Introduction to Observable Plot (Follow-along version)
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.dot(salamanders, {
x:"totalLength",
y:(d) =>d.weight,
opacity:0.5,
fill:"creekSection",
tip:true
})
],
y:{type:"pow", exponent: 0.5, grid:true},
x:{domain: [0,400], reverse:true, ticks:5, tickFormat:".2f"},
color:{range:["cyan", "purple"]}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
X
date
Y
mean
totalLength
Color
mean
totalLength
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ fill: "mean", y: "mean" },
{ x: "date", y: "totalLength", fill: "totalLength", tip: true, interval:"5 years" }
)
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
X
—
Y
creekSection
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.barX(
salamanders,
Plot.groupY({ x: "count" }, { y: "creekSection", tip: true, fill:"creekSection" })
),
Plot.ruleX([0])
],
color: {range:["purple", "magenta"]}
})
Insert cell
Insert cell
Insert cell
monoYearly
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(monoYearly, Plot.normalizeY({x: "year", y: "volume", basis:"mean"}))
],
marginLeft:100
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {monoYearly} from "@observablehq/keep-saving-mono-lake"
Insert cell
mackCreekVertebrates.csv
SELECT
SAMPLEDATE as date
, SECTION as creekSection
, SPECIES as species
, LENGTH2 as totalLength
, WEIGHT as weight
FROM "mackCreekVertebrates"
WHERE SPECIES='DITE'
Insert cell
import { showMe } from "@observablehq/show-me"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more