d3.quantile(
data.map((d) => d["Maximum Temperature (°C)"]),
0.99
)
allMaxTemps = [
...d3
.rollup(
data,
(v) => ({
date: v[0]["Date"],
maxTemp: d3.max(v, (d) => d["Maximum Temperature (°C)"])
}),
(d) => d["Date"]
)
.values()
]
allMaxTemps.filter((d) => d.maxTemp >= 36)
normalMaxTemps = allMaxTemps.filter(
(d) => d.date.getUTCFullYear() >= 1991 && d.date.getUTCFullYear() <= 2020
)
normalMaxTemp = d3.mean(normalMaxTemps, (d) => d.maxTemp)
d3.quantile(allMaxTemps, 0.995, (d) => d.maxTemp)
0.995 * 100
15796 / 365
15796 * 0.05
365 * 2
yesterdaysTemps = [
{ date: new Date(Date.UTC(2023, 3, 11)), maxTemp: 36 },
...allMaxTemps.filter(
(d) => d.date.getUTCDate() === 11 && d.date.getUTCMonth() === 3
)
]
yesterdayNormalTemp = d3.mean(
yesterdaysTemps.filter(
(d) => d.date.getUTCFullYear() >= 1991 && d.date.getUTCFullYear() <= 2020
),
(d) => d.maxTemp
)
Plot.plot({
height: 1000,
width,
marks: [Plot.dot(allMaxTemps, Plot.dodgeY({ x: "maxTemp", r: 0.5 }))]
})
{
const toHighlight = (d) => d.date.getUTCFullYear() === 2023;
return Plot.plot({
// caption:
// "Distribution of Maximum Temperatures (deg C) across the past 12th of Aprils",
height: 250,
width: 500,
color: {
type: "diverging",
scheme: "burd",
pivot: yesterdayNormalTemp
// legend: true
},
y: {
axis: null
},
x: {
label: "→ deg C",
ticks: 10,
grid: true
},
marks: [
Plot.text(
[
{
text: "11th Apr's maximum temperature",
y: 0,
x: 36
// textAnchor: "top"
// dx: 100
}
],
{
text: "text",
x: "x",
y: "y",
lineWidth: 10,
textAnchor: "start",
dx: 10
}
),
Plot.dot(
yesterdaysTemps,
Plot.dodgeY({
x: "maxTemp",
anchor: "middle",
// r: (d) => (toHighlight(d) ? 6 : 6),
r: 10,
fill: "maxTemp",
strokeWidth: (d) => (toHighlight(d) ? 4 : 0),
stroke: "black"
})
)
]
});
}
Plot.plot({
// caption:
// "Distribution of Daily Maximum Temperatures (deg C) over the past 40 years",
height: 500,
width,
// color: {
// scheme: "inferno"
// },
color: {
type: "diverging",
scheme: "burd",
pivot: normalMaxTemp
// legend: true
},
x: {
label: "deg C →"
},
y: {
label: "↑ Number of Days",
ticks: 10
},
marks: [
Plot.rectY(
allMaxTemps,
Plot.binX({ y: "count" }, { x: "maxTemp", fill: "maxTemp" })
),
Plot.ruleX([36], { strokeWidth: 2 }),
Plot.text(
[
{
text: "Maximum temperature reached over the last two days",
x: 36,
y: 300
},
{
text: "Only 0.5% of days have exceeded this temperature",
x: 36,
y: 200
}
],
{
text: "text",
x: "x",
y: "y",
lineWidth: 10,
textAnchor: "start",
dx: 10
}
),
Plot.ruleY([0], { stroke: slate["400"] })
]
})
data@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
temps = FileAttachment("11-04-2023-temps.json").json()
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.
