Public
Edited
Oct 24, 2023
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
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Insert cell
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
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(energy, {x: "year", y: "quadrillion_btu", z:"type", stroke:"type", tip:true}),
Plot.dot(energy, {x:"year", y:"quadrillion_btu", z:"type", stroke:"white", fill:"type"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", fill:"species", r:"flipper_length_mm"})
],
r:{domain:d3.extent(penguins, d=>d.flipper_length_mm), range:[1,10]},
color:{
legend:true,
domain:["Adelie", "Chinstrap", "Gentoo"],
range:["purple","teal","orange" ]
}
})
Insert cell
Insert cell
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