Public
Edited
May 30, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
berlinColorScale = {
const absMax = d3.max(
d3
.extent(anomalyDataByYear, (d) => d.meanTempAnomaly)
.map((d) => Math.abs(d))
);

return {
type: "diverging",
interpolate: interpolateBerlin,
legend: true,
domain: [-absMax, 0, absMax]
};
}
Insert cell
bgColor = d3.hcl("#0F0F32")
// bgColor = d3.hcl(291.67, 25.1, 5.79)
// bgColor = d3.hcl("#27241D")
// bgColor = d3.hcl("black")
// bgColor = colorMid
Insert cell
// colorMid = d3.hcl("#102A43")
colorMid = bgColor
Insert cell
// colorEnd = d3.hcl("#FCEFEE")
// colorEnd = d3.hcl(25.87, 4.89, 95.46)
// colorEnd = d3.hcl(25.87, 10, 95.46)
// colorEnd = d3.hcl("#EE9E92")
colorEnd = d3.hcl("#FFACAC")
Insert cell
// colorStart = d3.hcl("#5057FF")
// colorStart = d3.hcl(294.57, 94.57, 45.19)
// colorStart = d3.hcl(294.57, 94.57, 95.46)
// colorStart = d3.hcl(294.57, 10, 95.46)
// colorStart = d3.hcl("#F0F4F8")
colorStart = d3.hcl("#9EB0FF")
Insert cell
Insert cell
dateMapKey = (d) => `${d.date.getUTCMonth()}-${d.date.getUTCDate()}`
Insert cell
Insert cell
function dayOfYear(date) {
return d3.utcDay.count(d3.utcYear(date), date);
}
Insert cell
// divergingColorScale = ({
// type: "diverging",
// // scheme: "rdbu",
// // reverse: true,
// range: [colorStart, colorMid, colorEnd],
// interpolate: "hcl",
// legend: true
// })
divergingColorScale = ({
type: "diverging",
scheme: "rdbu",
reverse: true,
legend: true
})
Insert cell
function computeMonthAnomalyValue(d) {
const month = d.date.getUTCMonth();
const normalValue = normalDataMonthMap.get(month)[selectedColumn];

return d[selectedColumn] - normalValue;
}
Insert cell
function computeDateAnomalyValue(d) {
const normalValue = normalDataDateMap.get(dateMapKey(d))[selectedColumn];

return d[selectedColumn] - normalValue;
}
Insert cell
// During the reference period
temps = ({
warmDay: d3.quantile(normalData, 0.9, (d) => d.maxTemp),
coolDay: d3.quantile(normalData, 0.1, (d) => d.maxTemp),
warmNight: d3.quantile(normalData, 0.9, (d) => d.minTemp),
coolNight: d3.quantile(normalData, 0.1, (d) => d.minTemp)
})
Insert cell
isWarmDay = (d) => d.maxTemp >= temps.warmDay
Insert cell
isCoolDay = d => d.maxTemp <= temps.coolDay
Insert cell
isWarmNight = d => d.minTemp >= temps.warmNight
Insert cell
isCoolNight = (d) => d.minTemp <= temps.coolNight
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
normalData = {
let output = data;

output = data.filter(
(d) =>
d.date.getUTCFullYear() >= basePeriod[0] &&
d.date.getUTCFullYear() <= basePeriod[1]
);

return output;
}
Insert cell
basePeriod
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
anomalyData = {
return data.map((d) => {
const meanNormalValue = normalDataDateMap.get(dateMapKey(d)).meanTemp;
const minNormalValue = normalDataDateMap.get(dateMapKey(d)).minTemp;
const maxNormalValue = normalDataDateMap.get(dateMapKey(d)).maxTemp;

return {
...d,
meanTempAnomaly: d.meanTemp - meanNormalValue,
minTempAnomaly: d.minTemp - minNormalValue,
maxTempAnomaly: d.maxTemp - maxNormalValue
};
});
}
Insert cell
anomalyDataByMonth = {
return dataByMonth.map((d) => {
const month = d.date.getUTCMonth();

const meanNormalValue = normalDataMonthMap.get(month).meanTemp;
const minNormalValue = normalDataMonthMap.get(month).minTemp;
const maxNormalValue = normalDataMonthMap.get(month).maxTemp;

return {
...d,
meanTempAnomaly: d.meanTemp - meanNormalValue,
minTempAnomaly: d.minTemp - minNormalValue,
maxTempAnomaly: d.maxTemp - maxNormalValue
};
});
}
Insert cell
anomalyDataByYear = {
return dataByYear.map((d) => {
return {
...d,
meanTempAnomaly: d.meanTemp - normalDataYear.meanTemp,
minTempAnomaly: d.minTemp - normalDataYear.minTemp,
maxTempAnomaly: d.maxTemp - normalDataYear.maxTemp
};
});
}
Insert cell
meanTemp1983To1992 = d3.mean(
anomalyDataByYear.filter(
(d) => d.date.getUTCFullYear() >= 1983 && d.date.getUTCFullYear() <= 1992
),
(d) => d.meanTemp
)
Insert cell
meanTemp2013To2022 = d3.mean(
anomalyDataByYear.filter(
(d) => d.date.getUTCFullYear() >= 2013 && d.date.getUTCFullYear() <= 2022
),
(d) => d.meanTemp
)
Insert cell
meanTemp2013To2022 - meanTemp1983To1992
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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