The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Observable Plot Course
Edited
Oct 26, 2023
47 forks
5 stars
1
Observable Plot Course
Session 1: Introduction to Observable Plot (Code key)
Session 1: Introduction to Observable Plot (Follow-along version)Session 2: Introduction to Observable Plot (Code key)Session 2: Introduction to Observable Plot (Follow-along version)Session 3: Introduction to Observable Plot (Code key)Session 3: Introduction to Observable Plot (Follow-along version)Session 4: Introduction to Observable Plot (Code key)Session 4: Introduction to Observable Plot (Follow-along version)
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.cell(weather.slice(-365), {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max"
})
]
})
Insert cell
Insert cell
Insert cell
energy = FileAttachment("us_energy.csv").csv({typed: true})
Insert cell
Insert cell
energy
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(energy, {x: "year", y: "quadrillion_btu"})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.line(energy, { x: "year", y: "quadrillion_btu", stroke: "type"}),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
fill: "type",
stroke: "white",
tip: true,
r: 4
}),
Plot.frame()
],
x: { tickFormat: "Y", type: "linear", label: "Year"},
y: { domain: [0, 45], label: "Quadrillion BTU"},
color: {scheme: "Accent", legend: true},
grid: true
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "body_mass_g",
y: "flipper_length_mm",
r: "flipper_length_mm",
fill: "species"
})
],
r: {
domain: d3.extent(penguins, (d) => d.flipper_length_mm),
range: [1, 10]
},
color: {
domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "teal", "orange"]
}
})
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