lineSimple = Plot.plot({
marks:[
Plot.lineY(data, {
x:"date",
y:"temperature",
tip: "xy",
z:"year",
stroke: "#808080",
strokeOpacity:.5,
}),
Plot.axisX({ticks: "3 months" ,tickFormat:" %b"})
]
})
lineComposition = Plot.plot({
x:{interval: d3.utcDay},
marks:[
Plot.areaY(dataSummary, {
x:"date",
y1:"minus",
y2:"plus",
fill: "#e0e0e0"
}),
Plot.tickY(data,{
x: "date",
y: "temperature",
z: "year",
stroke:"#BDBDBD"
}),
Plot.lineY(dataSummary, {
x:"date",
y:"mean",
stroke: "#003366",
strokeWidth: 2
}),
Plot.axisX({ticks: "3 months" ,tickFormat:" %b"})
]
})
linesFacetted = Plot.plot({
width: width,
x:{interval: d3.utcDay, tickFormat: "%b"},
facet: {
data: data,
y: "decade",
x: (d)=> (d.year - 1980) % 10,
},
marks:[
Plot.lineY(data,{
x: "date",
y:"temperature",
tip:"xy"
}),
Plot.frame()
]
})
heatmapishThingy = Plot.plot({
width: width,
marks: [
Plot.tickX(data,
{y:"year",x:"temperature"}),
Plot.ruleX(d3.mean())
]
})
data = {
const dataZ = [];
raw
.filter((d) => d.name.length === 4)
.forEach((yearData) => {
const decade = Math.floor(yearData.name / 10) * 10 + "s";
yearData.data.forEach((temperature, index) => {
if (temperature !== null) {
const date = new Date(
d3.max(raw.map((d) => parseInt(d.name))) + 1,
0,
index
);
dataZ.push({
index,
year: yearData.name,
date,
decade,
temperature
});
}
});
});
return dataZ;
}
dataSummary = {
const dataZ = [];
const meanData = raw.find((d) => d.name === "1982-2011 mean").data;
const plusData = raw.find((d) => d.name === "plus 2σ").data;
const minusData = raw.find((d) => d.name === "minus 2σ").data;
meanData.forEach((mean, index) => {
if (mean !== null) {
const date = new Date(
d3.max(raw.map((d) => parseInt(d.name))) + 1,
0,
index
);
dataZ.push({
date,
mean,
plus: plusData[index] !== null ? plusData[index] : undefined,
minus: minusData[index] !== null ? minusData[index] : undefined
});
}
});
return dataZ;
}
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.
