Public
Edited
Apr 5, 2023
3 forks
23 stars
Insert cell
Insert cell
alphabet = FileAttachment("alphabet.csv").csv({typed: true})
Insert cell
Plot.plot({
x: {
label: null
},
y: {
grid: true,
label: "↑ Frequency (%)",
transform: d => d * 100
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.text(alphabet, {x: "letter", y: "frequency", text: d => (d.frequency * 100).toFixed(1), dy: -5}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
driving = FileAttachment("driving.csv").csv({typed: true})
Insert cell
Plot.plot({
grid: true,
x: {
label: "Miles driven (per capita per year) →"
},
y: {
label: "↑ Price of gas (average per gallon, adjusted)"
},
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: d => `${d.year}`, dy: -8})
]
})
Insert cell
Insert cell
travelers = FileAttachment("travelers.csv").csv({typed: true})
Insert cell
Plot.plot({
y: {
grid: true,
nice: true,
label: "↑ Travelers per day (millions)",
transform: d => d / 1e6
},
marks: [
Plot.ruleY([0]),
Plot.line(travelers, {
x: "date",
y: "previous",
stroke: "#bab0ab"
}),
Plot.line(travelers, {
x: "date",
y: "current"
}),
Plot.text(travelers.slice(0, 1), {
x: "date",
y: "previous",
text: ["2019"],
fill: "#8a817c",
dy: "-0.5em"
}),
Plot.text(travelers.slice(0, 1), {
x: "date",
y: "current",
text: ["2020"],
dy: "1.2em"
})
]
})
Insert cell
travelers.slice(0, 1)
Insert cell
Insert cell
caltrain = FileAttachment("caltrain.csv").csv()
Insert cell
Plot.plot({
width: 240,
axis: null,
y: {
domain: d3.range(4, 25).map(String)
},
color: {
domain: "NLB",
range: ["currentColor", "peru", "brown"],
legend: true
},
marks: [
Plot.text([[1, "4"]], {
text: ["Northbound"],
textAnchor: "start"
}),
Plot.text([[-1, "4"]], {
text: ["Southbound"],
textAnchor: "end"
}),
Plot.text(new Set(caltrain.map(d => d.hours)), {
x: 0,
y: d => d,
text: d => `${(d - 1) % 12 + 1}${(d % 24) >= 12 ? "p": "a"}`
}),
Plot.text(caltrain, Plot.stackX2({
filter: d => d.orientation === "N",
x: 1,
y: "hours",
text: d => d.minutes.padStart(2, "0"),
title: d => `${d.time} ${d.line}`,
fill: "type",
textAnchor: "start"
})),
Plot.text(caltrain, Plot.stackX2({
filter: d => d.orientation === "S",
x: -1,
y: "hours",
text: d => d.minutes.padStart(2, "0"),
title: d => `${d.time} ${d.line}`,
fill: "type",
textAnchor: "end"
})),
Plot.ruleX([-0.5, 0.5])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
points = Array.from({length: 10}, (_, i) => [1.2 - Math.sin(1 + i / 5), Math.cos(i / 6)])
Insert cell
Plot.plot({
grid: true,
x: {
domain: [0, 1]
},
y: {
domain: [0, 1]
},
marks: [
Plot.line(points),
Plot.dot(points, {fill: "white", r: 6}),
Plot.text(points)
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 200,
marks: [
Plot.frame(),
Plot.text([`This Is Just To Say
William Carlos Williams, 1934

I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold`], {frameAnchor: "middle"})
]
})
Insert cell
Insert cell
Plot.plot({
height: 200,
marginBottom: 12,
x: { type: "point", align: 0, axis: "top", tickSize: 0 },
marks: [
Plot.text(
[
"Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before cof\xadfin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.",
"There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.",
"Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?"
],
{
frameAnchor: "top",
fontSize: 9,
x: (d, i) => 1 + i, // paragraph number
lineWidth: 20,
textAnchor: "start",
lineHeight: 1.3,
// monospace: true,
clip: true
}
)
]
})
Insert cell
Insert cell
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