Wartplot: Winter temperature trend in U.S. cities / Climate Lab

Climate Lab

Visualizing a changing planet for The Washington Post

Workspace

Public

Edited

Mar 1, 2024

1 star

graphic = () => {

const wrapper = d3.create("div");

const chart = wrapper.selectAll(".chart")

.data(dataMultiples)

.join("div")

.attr("class", "chart");

chart.append("div")

.attr("class", "region-label")

.style("margin-bottom", (_, i) => `-${20 + (i ? 0 : marginTopExtraFirstChart)}px`)

.text(d => d[0]);

chart.each((data, i, e) => {

d3.select(e[i]).call(sel => chartGenerator(sel, data, i))

})

return wrapper.node();

}

marginTopExtraFirstChart = 45

chartGenerator = (chart, data, index) => {

const margin = ({left: 10, right: 10, top: 5 + (index ? 0 : marginTopExtraFirstChart), bottom: 24})

const regionsOrdered = data[1];

const cities = regionsOrdered.map(d => d.entries).flat();

const chartheight = (24 + maxR) * regionsOrdered.length;

const y = d3.scaleBand(regionsOrdered.map(d => d.subregion), [0, chartheight]);

const svg = chart.append("svg")

.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]})`);

g.append("g")

.call((g) => axisGenerator(g, chartheight, y, index));

g.selectAll(".subregion-label")

.data(regionsOrdered)

.join("text")

.attr("class", "subregion-label")

.attr("y", d => y(d.subregion) + y.bandwidth() / 2)

.text(d => d.subregion);

const statesProp = chartwidth <= 520 ? "states_abbr" : "states";

const statesY = chartwidth <= 350 ? 16 : chartwidth <= 520 ? 18 : 20;

const statesDy = chartwidth <= 350 ? 13 : chartwidth <= 520 ? 14 : 16;

g.selectAll(".states-label")

.data(regionsOrdered)

.join("text")

.attr("class", "states-label")

.attr("y", d => y(d.subregion) + y.bandwidth() / 2 + statesY)

.html(d => {

if (d.states.length < 5) {

return d[statesProp].join(", ");

}

else {

const grouper = Math.ceil(d.states.length / 2);

const groups = d3.groups(d[statesProp], (_, i) => i < grouper);

return groups.map((group, i) => `<tspan x=0 dy=${i * 16}>${group[1].join(", ")}</tspan>`)

}

})

g.selectAll(".baseline")

.data(regionsOrdered)

.join("line")

.attr("stroke", "#ccc")

.attr("shape-rendering", "crispEdges")

.attr("transform", d => `translate(0, ${y(d.subregion) + y.bandwidth()})`)

.attr("x2", chartwidth);

g.append("g")

.attr("class", "warts")

.selectAll(".wart")

.data(cities)

.join("path")

.attr("class", "wart")

.attr("d", d => semicircle(x(d.decadal_change), y(d.subregion), r(d.population)))

.attr("fill", d => colorScale(d.decadal_change))

.attr("fill-opacity", 0.8)

.attr("stroke", d => d3.color(colorScale(d.decadal_change)).darker(0.2))

.attr("transform", `translate(0, ${y.bandwidth()})`);

const cityLabel = g.selectAll(".city-label")

.data(dataCityLabels.filter(d => data[0] === d.region))

.join("g")

.attr("class", "city-label")

.attr("transform", d => {

const cx = x(d.decadal_change);

const cy = y(d.subregion) + y.bandwidth();

const radius = r(d.population);

return `translate(${geometric.pointTranslate([cx, cy], d.angle(chartwidth), radius)})`;

})

cityLabel.append("polyline")

.attr("points", d => {

return [[0, 0], geometric.pointTranslate([0, 0], d.angle(chartwidth), 5)]

})

.attr("stroke", d => d3.color(colorScale(d.decadal_change)).darker(0.2))

.style("display", d => d.display ? d.display(chartwidth) : "block")

cityLabel.append("text")

.attr("text-anchor", d => d.textAnchor(chartwidth))

.attr("transform", d => {

return `translate(${geometric.pointTranslate([0, 0], d.angle(chartwidth), 7)})`

})

.text(d => d.city);

return chart;

}

axisGenerator = (g, chartheight, y, i) => {

const tickValues = d3.range(-0.5, 1.5, 0.5);

const top = d3.axisTop(x)

.tickFormat(d => "")

.tickSize(chartheight - y.bandwidth())

.tickValues([0]);

const bottom = d3.axisBottom(x)

.tickFormat(d => `${d > 0 ? "+" : ""}${d}°F`)

.tickSize(10)

.tickValues(tickValues);

if (i === 0){

const axisTitle = g.append("text")

.attr("class", "axis-title")

.attr("transform", `translate(${x(0)}, -${marginTopExtraFirstChart - 12})`)

.html("<tspan>Winter temperature change</tspan><tspan x=0 dy=20>per decade, 1980-2024</tspan>")

const axisLabel = g.selectAll(".axis-label")

.data(["Colder", "Warmer"])

.join("text")

.attr("class", "axis-label")

.attr("fill", (_, i) => i === 0 ? "#6ea4c1" : "#d76935")

.attr("text-anchor", (_, i) => i ? "start" : "end")

.attr("transform", `translate(${x(0)}, -6)`)

.attr("x", (_, i) => (i * 2 - 1) * 10)

.attr("y", 12)

.text(d => d);

}

const axisTop = g.append("g")

.attr("class", "axis axis-top")

.attr("transform", `translate(0, ${chartheight})`)

.call(top)

.selectAll(".tick line")

.attr("y2", d => -top.tickSize() - (i === 0 ? 4 : 0) - (d ? 0 : y.bandwidth()))

const axisBottom = g.append("g")

.attr("class", "axis axis-bottom")

.attr("transform", `translate(0, ${chartheight})`)

.call(bottom);

return g;

}

heatValues = [0.083, 0.167, 0.25, 0.333, 0.417, 0.5, 0.583, 0.667, 0.75, 0.833, 0.917, 1, 1.083, 1.167, 1.25, 1.333, 1.417, 1.5]

heatColors = [

"#f8f4e2", "#f9e9ce", "#fadfbb", "#fad5a7", "#f9ca94", "#f7c081", // 0.5

"#fd9c63", "#f69259", "#ee8850", "#e77d47", "#df733e", "#d76935", // 1

"#cc0000", "#bf0018", "#b20124", "#a5042b", "#980730", "#8b0a34", // 1.5

]

coldValues = [-0.083, -0.167, -0.25, -0.333, -0.417, -0.5, -0.583, -0.667, -0.75, -0.833, -0.917, -1]

coldColors = [

"#eff4e9", "#e0ede6", "#d2e5e1", "#c4deda", "#b6d7d2", "#a9d0ca", // -0.5

"#9fc4d7", "#95bed3", "#8cb7ce", "#82b1ca", "#78aac6", "#6ea4c1", // -1

]

colorScale = value => {

if (value < 0) {

let index = -1;

for (let i = 0, l = coldValues.length; i < l; i++) {

const v = coldValues[i];

if (value > v) {

index = i;

break;

}

return coldColors[index];

}

else {

let index = -1;

for (let i = 0, l = heatValues.length; i < l; i++){

const v = heatValues[i];

if (value < v) {

index = i;

break;

}

return heatColors[index]

}

css = `

.chart {

margin-bottom: 20px;

}

.axis .domain {

display: none;

}

.axis .tick line {

stroke: #ccc;

}

.axis .tick text {