Public
Edited
Jul 25, 2024
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 0,
color: {
className: "large-font",
legend: true,
opacity: 0.9,
domain: [
"China",
"Europe",
"Americas",
"Asia (excl. China)",
"Oceania",
"Africa"
],
range: ["#ef1620", "#00309a", "#972c90", "#d7477a", "#f77b68", "#ffb56b"]
},
style: { fontSize: "14px" },
title: html`<h1>Most of the world's new renewable capacity comes from <span style = 'color: #ef1620'>China</span></h1>`,
subtitle: html`<h3 style='color: grey'>Renewables, Net Additions (GW)<h3>`,
caption: "Source: IRENA • Graphic: Yusuf Imaad Khan / @yusuf_i_k",
legend: { swatchHeight: 50 },
x: {
type: "band",
nice: true,
ticks: [
new Date("2001-01-01"),
new Date("2006-01-01"),
new Date("2011-01-01"),
new Date("2016-01-01"),
new Date("2021-01-01"),
new Date("2023-01-01")
]
},
y: {
nice: true,
ticks: 4,
label: null,
domain: [0, 500]
},
marks: [
Plot.axisY({ anchor: "right", label: null, nice: true }),
Plot.frame({ anchor: "right" }),
Plot.rectY(data, {
x: "year",
y: "value",
fill: "name",
tip: true,
stroke: "white",
order: "sum",
reverse: true,
opacity: 0.9
}),
Plot.text(
[
`"Looking at global renewables growth rates is hugely misleading. There is not one single energy transition but a series of regional transitions of widely varying form, pace and scope. The outsized materiality of one — China’s — means global figures veil more than they reveal. They currently look impressive because, and only because, China’s do."\n\n — Brett Christophers`
],
{
frameAnchor: "top-left",
dx: 14,
dy: 20,
fontSize: 18,
lineWidth: 30,
lineHeight: 1.3,
fill: "black",
stroke: "white",
strokeWidth: 3
}
),
Plot.ruleY([0])
]
})
Insert cell
parseDate = d3.timeParse("%Y")
Insert cell
data = FileAttachment("irena-data.csv") // https://www.irena.org/-/media/Files/IRENA/Agency/Publication/2024/Jul/IRENA_Stats_extract_2024-H2.xlsx?rev=a59cc4f471de4865be047e8f59e94c53 Wrangled/cleaned in R...sorry
.csv({
typed: true
})
.then((data) => {
data.forEach((d) => {
d.year = parseDate(d.year);
});
return data;
})
Insert cell
<style>
.large-font-swatches {
font-size: 18px;
margin-top: 20px;
}
</style>
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