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]
};
}
bgColor = d3.hcl("#0F0F32")
// bgColor = d3.hcl(291.67, 25.1, 5.79)
// bgColor = d3.hcl("#27241D")
// bgColor = d3.hcl("black")
// bgColor = colorMid
// colorMid = d3.hcl("#102A43")
colorMid = bgColor
// 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")
// 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")
dateMapKey = (d) => `${d.date.getUTCMonth()}-${d.date.getUTCDate()}`
function dayOfYear(date) {
return d3.utcDay.count(d3.utcYear(date), date);
}
// divergingColorScale = ({
// type: "diverging",
// // scheme: "rdbu",
// // reverse: true,
// range: [colorStart, colorMid, colorEnd],
// interpolate: "hcl",
// legend: true
// })
divergingColorScale = ({
type: "diverging",
scheme: "rdbu",
reverse: true,
legend: true
})
function computeMonthAnomalyValue(d) {
const month = d.date.getUTCMonth();
const normalValue = normalDataMonthMap.get(month)[selectedColumn];
return d[selectedColumn] - normalValue;
}
function computeDateAnomalyValue(d) {
const normalValue = normalDataDateMap.get(dateMapKey(d))[selectedColumn];
return d[selectedColumn] - normalValue;
}
// 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)
})
isWarmDay = (d) => d.maxTemp >= temps.warmDay
isCoolDay = d => d.maxTemp <= temps.coolDay
isWarmNight = d => d.minTemp >= temps.warmNight
isCoolNight = (d) => d.minTemp <= temps.coolNight
normalData = {
let output = data;
output = data.filter(
(d) =>
d.date.getUTCFullYear() >= basePeriod[0] &&
d.date.getUTCFullYear() <= basePeriod[1]
);
return output;
}
basePeriod
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
};
});
}
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
};
});
}
anomalyDataByYear = {
return dataByYear.map((d) => {
return {
...d,
meanTempAnomaly: d.meanTemp - normalDataYear.meanTemp,
minTempAnomaly: d.minTemp - normalDataYear.minTemp,
maxTempAnomaly: d.maxTemp - normalDataYear.maxTemp
};
});
}
meanTemp1983To1992 = d3.mean(
anomalyDataByYear.filter(
(d) => d.date.getUTCFullYear() >= 1983 && d.date.getUTCFullYear() <= 1992
),
(d) => d.meanTemp
)
meanTemp2013To2022 = d3.mean(
anomalyDataByYear.filter(
(d) => d.date.getUTCFullYear() >= 2013 && d.date.getUTCFullYear() <= 2022
),
(d) => d.meanTemp
)
meanTemp2013To2022 - meanTemp1983To1992
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.
