Public
Edited
Jan 30, 2024
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.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
energy = FileAttachment("us_energy.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [Plot.line(energy, { x: "year", y: "quadrillion_btu", z: "type" })]
})
Insert cell
Plot.plot({
marks: [Plot.dot(energy, { x: "year", y: "quadrillion_btu" })]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(energy, {
x: "year",
y: "quadrillion_btu",
stroke: "type"
}),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
fill: "type",
r: 2
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
r: "flipper_length_mm"
})
],
r: {
domain: d3.extent(penguins, (d) => d.flipper_length_mm),
range: [0, 10]
},
color: {
legend: true,

domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "orange", "red"]
}
})
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