Public
Edited
Dec 27, 2022
1 fork
// Plot.plot({
// y: {
// grid: true
// },
// caption: "Yearly Temperatures",
// marks: [
// Plot.lineY(data, {
// x: "date",
// y: selectedColumn,
// curve,
// interval: d3.utcYear,
// reduce: "mean"
// }),
// Plot.dot(
// data,
// Plot.binX(
// { y: "mean" },
// {
// x: "date",
// y: selectedColumn,
// interval: d3.utcYear,
// fill: slate["400"]
// }
// )
// )
// ]
// })
// Plot.plot({
// width,
// caption: "Monthly Temperatures",
// marks: [
// Plot.lineY(data, {
// x: "date",
// y: selectedColumn,
// curve,
// interval: d3.utcMonth,
// reduce: "mean"
// })
// ]
// })
// {
// function computeAnomalyValue(d) {
// const month = d.date.getUTCMonth();
// const normalValue = normalDataMonthMap.get(month)[selectedColumn];
// return d[selectedColumn] - normalValue;
// }
// return Plot.plot({
// width,
// caption: "Monthly Temperature Anomalies",
// marks: [
// // Plot.lineY(dataByMonth, {>
// // x: "date",
// // y: selectedColumn,
// // curve
// // }),
// Plot.rectY(dataByMonth, {
// x: "date",
// interval: d3.utcMonth,
// y: computeAnomalyValue,
// fill: (d) => (computeAnomalyValue(d) >= 0 ? red["400"] : blue["400"])
// })
// ]
// });
// }
// {
// function computeAnomalyValue(d) {
// const month = d.date.getUTCMonth();
// const normalValue = normalDataMonthMap.get(month)[selectedColumn];
// return d[selectedColumn] - normalValue;
// }
// return Plot.plot({
// width: 300,
// caption: "Monthly Temperature Anomalies",
// facet: {
// data: dataByMonth,
// y: (d) => d.date.getUTCFullYear()
// },
// marks: [
// Plot.barY(dataByMonth, {
// x: (d) => d.date.getUTCMonth(),
// // interval: d3.utcMonth,
// y: computeAnomalyValue,
// fill: (d) => (computeAnomalyValue(d) >= 0 ? red["400"] : blue["400"])
// })
// ]
// });
// }
// {
// function computeAnomalyValue(d) {
// const normalValue = normalDataDateMap.get(dateMapKey(d))[selectedColumn];
// return d[selectedColumn] - normalValue;
// }
// return Plot.plot({
// width,
// caption: "Daily Temperature Anomalies",
// marks: [
// Plot.areaY(data, {
// x: "date",
// y: computeAnomalyValue,
// fill: (d) => (computeAnomalyValue(d) >= 0 ? red["400"] : blue["400"]),
// curve: "step"
// })
// ]
// });
// }
// Plot.plot({
// width,
// marks: [
// Plot.lineY(data, {
// x: (d) => dayOfYear(d.date),
// y: selectedColumn,
// z: (d) => d.date.getUTCFullYear(),
// strokeOpacity: 0.1
// })
// ]
// })
// Plot.plot({
// caption: "Number of Hot Days (>= threshold) per Year",
// marks: [
// Plot.rectY(
// data,
// Plot.binX(
// { y: "count", thresholds: d3.utcYear },
// {
// x: "date",
// filter: (d) => d[selectedColumn] >= threshold
// }
// )
// )
// ]
// })
// Plot.plot({
// height: 800,
// width,
// y: {
// round: false,
// domain: d3.range(0, 366),
// ticks: null
// },
// fx: {
// axis: "top"
// },
// facet: {
// data,
// x: (d) => d.date.getUTCFullYear()
// },
// marks: [
// Plot.cell(data, {
// y: (d) => dayOfYear(d.date),
// // interval: d3.utcDay,
// fill: (d) => (d[selectedColumn] >= threshold ? red["300"] : slate["300"]),
// inset: 0
// })
// ]
// })
Calendar(data, {
// width: 500,
date: (d) => d.date,
value: (d) =>
d[selectedColumn1] - normalDataDateMap.get(dateMapKey(d))[selectedColumn1],
color: {
type: "diverging",
scheme: "rdbu",
reverse: true,
legend: true
}
})
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
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
};
});
}
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.
