Published
Edited
Jan 7, 2022
Insert cell
Insert cell
aapl = FileAttachment("aapl.csv").csv({typed: true})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.line(aapl, {x: "Date", y: "Close"})
]
})
Insert cell
Insert cell
points = aapl.map(d => [d.Date, d.Close])
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Plot.plot({
marks: [
Plot.line(points)
]
})
Insert cell
Insert cell
Plot.plot({
x: {
axis: null
},
marks: [
Plot.lineY(d3.cumsum({length: 600}, d3.randomNormal()))
]
})
Insert cell
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.line(d3.shuffle(aapl.slice(0, 100)), {
// sort: "Date", // uncomment to fix
x: "Date",
y: "Close"
})
]
})
Insert cell
Insert cell
tdf = FileAttachment("tdf-stage-8-2017.csv").csv({typed: true})
Insert cell
Plot.plot({
x: {
label: "Distance from stage start (km) →"
},
y: {
label: "↑ Elevation (m)",
grid: true
},
marks: [
Plot.line(tdf, {x: "distance", y: "elevation"}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
driving = FileAttachment("driving.csv").csv({typed: true})
Insert cell
Plot.plot({
inset: 10,
grid: true,
x: {
label: "Miles driven (per person-year) →"
},
y: {
label: "↑ Cost of gasoline ($ per gallon)"
},
marks: [
Plot.line(driving, {x: "miles", y: "gas", curve: "catmull-rom"}),
Plot.dot(driving, {x: "miles", y: "gas", fill: "currentColor"}),
Plot.text(driving, {filter: d => d.year % 5 === 0, x: "miles", y: "gas", text: "year", dy: -6})
]
})
Insert cell
Insert cell
bls = FileAttachment("bls-metro-unemployment.csv").csv({typed: true})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {x: "date", y: "unemployment", z: "division"})
]
})
Insert cell
Insert cell
goog = FileAttachment("GOOG.csv").csv({typed: true})
Insert cell
amzn = FileAttachment("AMZN.csv").csv({typed: true})
Insert cell
ibm = FileAttachment("IBM.csv").csv({typed: true})
Insert cell
stocks = [["AAPL", aapl], ["AMZN", amzn], ["GOOG", goog], ["IBM", ibm]]
.flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})))
Insert cell
Insert cell
Plot.plot({
style: "overflow: visible;",
y: {
type: "log",
grid: true,
label: "↑ Change in price (%)",
tickFormat: formatChange
},
marks: [
Plot.ruleY([1]),
Plot.line(stocks, Plot.normalizeY({
x: "Date",
y: "Close",
stroke: "Symbol"
})),
Plot.text(stocks, Plot.selectLast(Plot.normalizeY({
x: "Date",
y: "Close",
z: "Symbol",
text: "Symbol",
textAnchor: "start",
dx: 3
})))
]
})
Insert cell
Insert cell
formatChange = {
const format = d3.format("+d");
return x => format((x - 1) * 100);
}
Insert cell
Insert cell
Plot.plot({
x: {
label: null
},
y: {
grid: true,
label: "↑ Unemployment (%)"
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {
x: "date",
y: "unemployment",
z: "division",
stroke: "unemployment" // varies within z; not recommended!
})
]
})
Insert cell
Insert cell
function highlight(d) {
return /, MI /.test(d.division);
}
Insert cell
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
color: {
domain: [false, true],
range: ["#ccc", "red"]
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {
x: "date",
y: "unemployment",
z: "division",
sort: highlight,
stroke: highlight
})
]
})
Insert cell
Insert cell
Insert cell
sftemps = FileAttachment("sf-temperatures.csv").csv({typed: true})
Insert cell
Plot.plot({
y: {
grid: true,
label: "↑ Temperature (°F)"
},
marks: [
Plot.line(sftemps, Plot.windowY({k: 14, x: "date", y: "low", stroke: "#4e79a7"})),
Plot.line(sftemps, Plot.windowY({k: 14, x: "date", y: "high", stroke: "#e15759"})),
Plot.ruleY([32]) // freezing
]
})
Insert cell
Insert cell
someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.lineY(aapl, {x: "Date", y: someCloses})
]
})
Insert cell
Insert cell
someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.lineY(someAapl, {x: "Date", y: "Close"})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(gary, {x: "date", y: "unemployment", curve, strokeWidth: 1})
]
})
Insert cell
gary = bls.filter(d => d.division === "Gary, IN Met Div")
Insert cell
Insert cell
Insert cell
Insert cell
import {Plot, d3} from "@observablehq/plot"
Insert cell
import {Select} from "@observablehq/inputs"
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