Visualizing a changing planet for The Washington Post
Public
Edited
Jul 18, 2024
1 star
css = `
.chart text {
fill: #2a2a2a;
font-family: ${franklinLight};
font-size: 16px;
}
.chart text.highlight {
font-weight: bold;
}
.chart rect {
fill: #d5d5d5;
}
.chart rect.highlight {
fill: #2a2a2a;
}
`
labelFormat = (d, i) => {
const text = d.replace("Point-Source ", "");
const label = `${text[0].toUpperCase()}${text.slice(1).toLowerCase()}`;
if (i == 3) {
const tspans = ["Carbon transport", "and storage"]
return `<tspan y=${y(d) + 11}>${tspans.join("</tspan><tspan>")}</tspan>`
}
return label
}
valueFormat = d => d >= 1e9 ? `$${(d / 1e9).toFixed(1)}B` : `$${Math.round(d / 1e6)}M`
chart = () => {
const svg = d3.create("svg")
.attr("class", "chart")
.attr("width", chartwidth + margin.left + margin.right)
.attr("height", chartheight + margin.top + margin.bottom);
svg.append("style").html(css);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
const rect = g.selectAll("rect")
.data(dataFunding)
.enter().append("rect")
.classed("highlight", d => d.technology === "Geothermal")
.attr("width", d => x(d.funding))
.attr("height", barHeight)
.attr("y", d => y(d.technology));
const labelText = g.selectAll(".label")
.data(dataFunding)
.enter().append("text")
.attr("class", "label")
.attr("dy", y.bandwidth() / 2 + 2)
.attr("x", -margin.left)
.attr("y", d => y(d.technology))
.classed("highlight", d => d.technology === "Geothermal")
.html((d, i) => labelFormat(d.technology, i))
.selectAll("tspan")
.attr("x", -margin.left)
.attr("dy", (_, i) => i * 16);
const valueText = g.selectAll(".value")
.data(dataFunding)
.enter().append("text")
.attr("class", "value")
.attr("dx", 5)
.attr("dy", y.bandwidth() / 2 + 2)
.attr("x", d => x(d.funding))
.attr("y", d => y(d.technology))
.text(d => valueFormat(d.funding))
.classed("highlight", d => d.technology === "Geothermal")
return svg.node();
}
// These figures were provided by the Department of Energy
doe = `Geothermal 0.08
Direct Air Capture 3.5
Point-Source Carbon Capture 3.58
Carbon Transport & Storage 4.6
Energy Storage 7.78
Hydrogen 9.5
Nuclear 10.05`
dataFunding = doe
.split("\n")
.map(d => {
const [ technology, value ] = d.split("\t");
return {
technology,
funding: +value * 1e9
}
})
x = d3.scaleLinear()
.domain([0, d3.max(dataFunding, d => d.funding)])
.range([0, chartwidth])
y = d3.scaleBand()
.domain(dataFunding.map(d => d.technology))
.range([0, chartheight])
margin = ({ left: 126, right: 55, top: 0, bottom: 0 })
chartwidth = Math.min(width, 640) - margin.left - margin.right
barHeight = 26
barPadding = 10
chartheight = barHeight * dataFunding.length + barPadding * (dataFunding.length - 2)
import { toc } from "@climatelab/toc@45"
import { franklinLight } from "@climatelab/fonts@46"
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.
