simpsons = FileAttachment("simpsons.csv").csv({typed: true})
Plot.plot({
height: 640,
padding: 0.05,
grid: true,
x: {
axis: "top",
label: "Season"
},
y: {
label: "Episode"
},
color: {
scheme: "PiYG"
},
marks: [
Plot.cell(simpsons, {
x: "season",
y: "number_in_season",
fill: "imdb_rating",
// rx: 20 // uncomment for circles
}),
Plot.text(simpsons, {
x: "season",
y: "number_in_season",
text: d => d.imdb_rating?.toFixed(1),
title: "title"
})
]
})
DJI = FileAttachment("^DJI.csv").csv({typed: true})
Plot.plot({
height: 1400,
x: {
axis: null,
padding: 0,
},
y: {
padding: 0,
tickFormat: Plot.formatWeekday("en", "narrow"),
tickSize: 0
},
fy: {
reverse: true
},
facet: {
data: DJI,
y: d => d.Date.getUTCFullYear()
},
color: {
type: "diverging",
scheme: "PiYG"
},
marks: [
Plot.cell(DJI, {
x: d => d3.utcWeek.count(d3.utcYear(d.Date), d.Date),
y: d => d.Date.getUTCDay(),
fill: (d, i) => i > 0 ? (d.Close - DJI[i - 1].Close) / DJI[i - 1].Close : NaN,
title: (d, i) => i > 0 ? ((d.Close - DJI[i - 1].Close) / DJI[i - 1].Close * 100).toFixed(1) : NaN,
inset: 0.5
})
]
})
seattle = FileAttachment("seattle-weather.csv").csv({typed: true})
Plot.plot({
height: 300,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
marks: [
Plot.cell(seattle, Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}))
]
})
Plot.plot({
x: {
round: false,
ticks: simpsons.filter(d => d.number_in_season === 1).map(d => d.id),
tickFormat: i => simpsons.find(d => d.id === i).season,
label: "Season →",
labelAnchor: "right"
},
color: {
scheme: "PiYG"
},
marks: [
Plot.cell(simpsons, {x: "id", fill: "imdb_rating"})
]
})
alphabet = FileAttachment("alphabet.csv").csv({typed: true})
Plot.plot({
x: {
label: null
},
color: {
scheme: "YlGnBu"
},
marks: [
Plot.cell(alphabet, {x: "letter", fill: "frequency"})
]
})
hadcrut = (await FileAttachment("hadcrut-annual.txt").text())
.trim().split(/\n/g) // split into lines
.map(line => line.split(/\s+/g)) // split each line into fields
.map(([year, anomaly]) => ({ // extract the year and median anomaly
year: +year, // convert to number
anomaly: +anomaly // convert to number
}))
Plot.plot({
x: {
round: false,
ticks: d3.ticks(...d3.extent(hadcrut, d => d.year), 10),
domain: d3.range(d3.min(hadcrut, d => d.year), d3.max(hadcrut, d => d.year) + 1),
label: null
},
color: {
type: "diverging",
scheme: "BuRd"
},
marks: [
Plot.cell(hadcrut, {x: "year", fill: "anomaly"})
]
})
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.
