Public
Edited
Sep 27, 2023
3 stars
htl.html`<div id=facetChart style="display: flex; flex-wrap: wrap; line-height: 0px;">
${d3
.groups(data, (d) => d.labels)
.map(
([facet, data]) =>
htl.html`<figure>
${Plot.plot({
// Dimensions
width: 199,
height: 170,
marginBottom: 20,
marginLeft: 35,
marginTop: 24,
// Font size
style: { fontSize: "12px" },
// x axis features
x: {
label: null,
nice: false,
ticks: [
new Date("1750-01-01"),
new Date("1950-01-01"),
new Date("2010-01-01")
],
domain: [new Date("1750-01-01"), new Date("2010-01-01")]
},
// y axis features
y: {
nice: true,
ticks: 4,
grid: true,
tickSize: 0,
domain: d3.extent(data, (d) => d.values),
labelArrow: "none",
label: `${d3
.groups(data, (d) => d.yAxisLabels)
.map(([yAxisLabels, data]) => yAxisLabels)}` //genuinely can't believe this worked
},
// remove legend
color: { legend: false },
// actual components of shaded area chart
marks: [
// Add gradient - Credit Mike Bostock again - https://observablehq.com/@observablehq/plot-area-chart-with-gradient
() => htl.svg`<defs>
<linearGradient id="gradientBlue" gradientTransform="rotate(0)">
<stop offset="25%" stop-color="white" stop-opacity="0" />
<stop offset="100%" stop-color="#3f6bee" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="gradientRed" gradientTransform="rotate(0)">
<stop offset="25%" stop-color="white" stop-opacity="0" />
<stop offset="100%" stop-color="#e61f00" stop-opacity="0.7" />
</linearGradient>
</defs>`,
// add a y rule for surface temp 0 value
Plot.ruleY(data, {
y: 0,
stroke: "black",
strokeWidth: (d) =>
d.labels === "Surface Temperature" ? 0.5 : 0, // x position and clipping is different for surface temp data
clip: "frame"
}),
// add dashed line for 1950
Plot.ruleX([new Date("1950-01-01")], {
stroke: "black",
strokeDasharray: "5,3",
strokeOpacity: 0.8
}),
// add area chart
Plot.areaY(data, {
x: "year",
y: "values_all_else",
fill: (d) =>
d.trend_type === "Socio-economic Trends"
? "url(#gradientBlue)"
: "url(#gradientRed)", //"#3f6bee" : "#e61f00"
clip: true,
curve: "natural"
}),
// add area chart for surface temp (different because goes below 0)
Plot.areaY(data, {
x: "year",
y1: "min",
y2: "values_temp",
fill: (d) =>
d.trend_type === "Socio-economic Trends"
? "url(#gradientBlue)"
: "url(#gradientRed)",
clip: true,
curve: "natural"
}),
// add white line behind line to make it clearer
Plot.line(data, {
x: "year",
y: "values",
z: "trend_type",
stroke: "#FFFFFF",
clip: true,
strokeWidth: 3,
curve: "natural"
}),
// add line to emphasise area chart
Plot.line(data, {
x: "year",
y: "values",
z: "trend_type",
stroke: (d) =>
d.trend_type === "Socio-economic Trends"
? "#3f6bee"
: "#e61f00",
clip: true,
strokeWidth: 1.5,
curve: "natural"
}),
// add a y rule for when starting y axis at 0
Plot.ruleY(data, {
y: 0,
stroke: "black",
strokeWidth: (d) =>
d.labels === "Surface Temperature" ? 0 : 2.1, // put a hard axis rule for all starting at 0
clip: "frame"
}),
// add the y axis part of frame just for some separation between plots
Plot.frame({ anchor: "left" }),
// add text labels on each small multiple so we know what indicator it is
Plot.text(
[
`${d3
.groups(data, (d) => d.labels)
.map(([labels, data]) => labels)}`
],
{
frameAnchor: "top-left",
dx: 2.5,
dy: 4,
lineWidth: 5,
fontSize: "16.5px",
fontWeight: "bold",
fill: "black",
stroke: "#FFFFFF"
}
)
]
})}
</figure>`
)}
</div>`
//Parse time
parseTime = d3.utcParse("%Y");
data = FileAttachment("igbp_combined_df@1.csv").csv({ typed: true }) // need to say "typed: true" instead of like in Quarto where you use transpose
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.
