Public
Edited
Jul 25, 2024
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])
]
})
parseDate = d3.timeParse("%Y")
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;
})
<style>
.large-font-swatches {
font-size: 18px;
margin-top: 20px;
}
</style>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.