Warmer, wetter, hotter, drier, harder, better, faster, stronger

Out of curiosity, I decided to roughly remake/build on an FT Climate Graphic from early March using ggplot2, Observable Plot, and D3.

---

Global temperatures continue run of record highs

Difference between global 2-metre temperatures from 1980 to 2024 and pre-industrial* average (C)

{
  const margin = { top: 30, right: 40, bottom: 30, left: 25 };
  const totalWidth = 960;
  const height = 350 - margin.top - margin.bottom;
  const dataByDecade = d3.group(data, (d) => d.decade);
  const dur = 1400;

  // label
  const data2023 = data.filter((d) => d.year === 2023);
  const lastData2023 = data2023[data2023.length - 1];
  const data2024 = data.filter((d) => d.year === 2024);
  const lastData2024 = data2024[data2024.length - 1];

  const svg = d3
    .create("svg")
    .attr("viewBox", `0 0 ${totalWidth} ${height + margin.top + margin.bottom}`)
    .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

  let facetWidth =
    (totalWidth - margin.left - margin.right) / dataByDecade.size;

  const y = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.ano_pi)])
    .range([height, 0]);

  const minAnoPi = d3.min(data, (d) => d.ano_pi);
  const maxAnoPi = d3.max(data, (d) => d.ano_pi);

  const x = d3
    .scaleTime()
    .domain(d3.extent(data, (d) => d.dummy_date))
    .range([0, facetWidth - margin.right]);

  const xSuperimposed = d3
    .scaleTime()
    .domain(d3.extent(data, (d) => d.dummy_date))
    .range([0, totalWidth - margin.left - margin.right]);

  const lineGenerator = d3
    .line()
    .x((d) => x(d.dummy_date)) // Initially set to use the 'x' scale
    .y((d) => y(d.ano_pi));

  let isMerged = false;

  function updateFacets() {
    facetWidth = isMerged
      ? totalWidth - margin.left - margin.right
      : (totalWidth - margin.left - margin.right) / dataByDecade.size;

    const currentXScale = isMerged ? xSuperimposed : x;
    lineGenerator.x((d) => currentXScale(d.dummy_date));

    svg
      .selectAll(".facet")
      .transition()
      .duration(dur)
      .attr("transform", (_, i) =>
        isMerged
          ? `translate(${margin.left}, ${margin.top})`
          : `translate(${margin.left + i * facetWidth}, ${margin.top})`
      );

    svg
      .selectAll(".decade-label")
      .transition()
      .duration(dur)
      .style("opacity", isMerged ? 0 : 1); // Hide labels when merged

    svg
      .selectAll(".twentythree-label")
      .transition() 
      .duration(dur)
      .attr("x", currentXScale(lastData2023.dummy_date)) // Use currentXScale for positioning
      .attr("y", y(lastData2023.ano_pi));

    svg
      .selectAll(".twentyfour-label")
      .transition() 
      .duration(dur)
      .attr("x", currentXScale(lastData2024.dummy_date)) // Use currentXScale for positioning
      .attr("y", y(lastData2024.ano_pi));

    // Hide or show y-axis gridlines based on isMerged
    svg
      .selectAll(".facet .tick line") // Assuming facetGroup has the class "facet"
      .transition()
      .duration(dur)
      .style("opacity", isMerged ? 0 : 1);

    svg
      .selectAll(".x-axis")
      .transition()
      .duration(dur)
      .call(
        d3
          .axisBottom(currentXScale)
          .tickFormat(d3.timeFormat("%B"))
          .tickValues([
            new Date("2000-01-01"),
            new Date("2000-06-01"),
            new Date("2000-12-01")
          ])
      )
      .call((g) => g.select(".domain").attr("stroke", "none")) //.remove())
      .call((g) => g.selectAll(".tick line").attr("stroke", "#777"));

    svg
      .selectAll(".line")
      .transition()
      .duration(dur)
      .attr("d", (d) => lineGenerator(d)); // Pass original data points

    // Debugging console.log statements
    console.log("Facet Width:", facetWidth);
    console.log("Is Merged:", isMerged);
  }

  //svg.on("click", function () {
    //isMerged = !isMerged;
    //updateFacets();
  //});

  setInterval(() => {
     isMerged = !isMerged; // Toggle 
     updateFacets(); // Update the facets according to the new state
   }, 3000);

  dataByDecade.forEach((values, decade, i) => {
    const xOffset = margin.left + i * facetWidth;

    const facetGroup = svg
      .append("g")
      .attr("class", "facet")
      .attr("transform", `translate(${xOffset}, ${margin.top})`);

    facetGroup
      .append("text")
      .attr("class", "decade-label")
      .attr("x", facetWidth / 2) // Center the label
      .attr("y", 0 - margin.top / 2) // Adjust y position
      .text(decade + "s")
      .style("font-size", "16px") // Adjust font size
      .attr("text-anchor", "middle");

    facetGroup
      .append("g")
      .attr("class", "x-axis")
      .attr("transform", `translate(0, ${height})`)
      .call(
        d3
          .axisBottom(x)
          .tickFormat(d3.timeFormat("%b"))
          .tickValues([
            new Date("2000-01-01"),
            new Date("2000-06-01"),
            new Date("2000-12-01")
          ])
      )
      .call((g) => g.select(".domain").remove())
      .call((g) => g.selectAll(".tick line").attr("stroke", "#777"));

    facetGroup
      .append("g")
      .call(d3.axisLeft(y).tickValues([0, 0.5, 1, 1.5, 2]))
      .call((g) => g.select(".domain").remove())
      .call((g) => g.selectAll(".tick line").attr("stroke", "#777"))
      .call((g) =>
        g
          .selectAll("line")
          .attr("x2", facetWidth - margin.right)
          .attr("stroke", "#ddd")
      );

    const line = d3
      .line()
      .x((d) => x(d.dummy_date))
      .y((d) => y(d.ano_pi));

    // Set the gradient
    const gradient = svg
      .append("linearGradient")
      .attr("id", "line-gradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0)
      .attr("y1", y(minAnoPi))
      .attr("x2", 0)
      .attr("y2", y(maxAnoPi))
      .selectAll("stop")
      .data([
        { offset: "5%", color: "#CCCCCC" },
        { offset: "15%", color: "#FFC300" },
        { offset: "40%", color: "#FF5733" },
        { offset: "70%", color: "#C70039" },
        { offset: "90%", color: "#900C3F" },
        { offset: "98%", color: "#581845" }
      ])
      .enter()
      .append("stop")
      .attr("offset", function (d) {
        return d.offset;
      })
      .attr("stop-color", function (d) {
        return d.color;
      });

    const dataByYearWithinDecade = d3.group(values, (d) => d.year);

    dataByYearWithinDecade.forEach((yearValues, year) => {
      // For each year within the decade, create a separate line
      facetGroup
        .selectAll(`.line-${year}`)
        .data([yearValues])
        .join("path")
        .attr("class", `line line-${year}`)
        .attr("fill", "none")
        .attr("stroke", "url(#line-gradient)")
        .attr("d", lineGenerator);
    });

    // Check if this facet includes the year 2023 or 2024, and then redraw those lines
    if (decade === 2020) {
      // Assuming this matches how your decades are determined
      const highlightYears = [2024]; // Define which years to highlight
      highlightYears.forEach((year) => {
        const yearData = data.filter((d) => d.year === year);
        if (yearData.length > 0) {
          // Draw the wider white line (outline)
          facetGroup
            .selectAll(`.line-outline-${year}`)
            .data([yearData])
            .join("path")
            .attr("class", `line line-outline-${year}`)
            .attr("fill", "none")
            .attr("stroke", "white") // White outline
            .attr("stroke-width", 6) // Make this line wider than the colored line
            .attr("d", lineGenerator);
          facetGroup
            .selectAll(`.line-highlight-${year}`)
            .data([yearData])
            .join("path")
            .attr("class", `line line-highlight-${year}`)
            .attr("fill", "none")
            .attr("stroke", "url(#line-gradient)")
            .attr("stroke-width", 3.5) // Make the line wider
            //.style("filter", "url(#drop-shadow)")
            .attr("d", lineGenerator);
        }
      });
    }

    if (decade === 2020) {
      facetGroup
        .append("text")
        .attr("class", "twentythree-label")
        .attr("x", x(lastData2023.dummy_date)) // Position at the last data point's date
        .attr("y", y(lastData2023.ano_pi)) // Position at the last data point's value
        .attr("dy", "0px")
        .attr("dx", "5px")
        .attr("text-anchor", "start") 
        .style("font-size", "16px")
        .style("fill", "black")
        .style("font-weight", "bold")
        .text("2023");

      facetGroup
        .append("text")
        .attr("class", "twentyfour-label")
        .attr("x", x(lastData2024.dummy_date)) 
        .attr("y", y(lastData2024.ano_pi)) 
        .attr("dy", "0px") 
        .attr("dx", "5px") 
        .attr("text-anchor", "start") 
        .style("font-size", "16px")
        .style("fill", "black")
        .style("font-weight", "bold")
        .style(
          "text-shadow",
          "-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff"
        )
        .text("2024");
    }
  });

  updateFacets();
  return svg.node();
}

*1850-1900
Source: Copernicus Climate Change Service
Graphic: Yusuf Imaad Khan / @yusuf_i_k - riffing on a chart from Steven Bernard (FT)

DaFT Punk

Last month the FT read like a messed up Daft Punk parody - “Warmer, wetter, hotter, drier — February caps unending stretch of record temperatures”. You can almost hear that vocoder when you read the headline. An article from earlier this week shows the records have continued for March.¹

--- Bing Image Creator “Daft Punk French electronic music duo, you can see a reflection of a burning earth in their helmet visors, digital art”

---

Last month’s FT article from Kenza Bryan and Steven Bernard also included this impressive chart² putting February into context: