19  Unit 4: Climate Change - Unit Opening

How do natural factors contribute to changes in Earth’s temperature?

20 Anchor Phenomenon

20.1 🌍 Earth’s Temperature Is Rising

Earth’s temperature is rising, reversing the cooling trend that occurred over the past 2,000 years, putting millions of people in harm’s way, yet the public is not convinced of the risks.

20.1.1 Essential Questions:

• How do natural factors contribute to changes in Earth’s temperature?
• What are 99.9% of climate scientists seeing in historical climate data that makes them so sure humans are the cause of climate change today?
• Why does it matter?

21 The Reality of Climate Change

21.1 Global Temperature Trends

Let’s examine how Earth’s temperature has changed over time using real data.

Plot = require("@observablehq/plot")

// Temperature anomaly data (NASA GISTEMP simplified)
tempData = [
  {year: 1880, anomaly: -0.16}, {year: 1890, anomaly: -0.33},
  {year: 1900, anomaly: -0.08}, {year: 1910, anomaly: -0.42},
  {year: 1920, anomaly: -0.25}, {year: 1930, anomaly: -0.14},
  {year: 1940, anomaly: 0.12}, {year: 1950, anomaly: -0.17},
  {year: 1960, anomaly: -0.01}, {year: 1970, anomaly: -0.01},
  {year: 1980, anomaly: 0.26}, {year: 1990, anomaly: 0.45},
  {year: 2000, anomaly: 0.42}, {year: 2010, anomaly: 0.72},
  {year: 2020, anomaly: 1.02}, {year: 2024, anomaly: 1.29}
]

viewof yearRange = Inputs.range([1880, 2024], {
  step: 10,
  value: 2024,
  label: "Explore data up to year:"
})

filteredData = tempData.filter(d => d.year <= yearRange)

Plot.plot({
  title: "Global Temperature Anomaly (°C relative to 1951-1980 average)",
  width: 700,
  height: 400,
  y: {label: "Temperature Anomaly (°C)", domain: [-0.6, 1.5]},
  x: {label: "Year"},
  marks: [
    Plot.ruleY([0], {stroke: "#ccc", strokeDasharray: "4,4"}),
    Plot.line(filteredData, {x: "year", y: "anomaly", stroke: "steelblue", strokeWidth: 2,
        tip: true}),
    Plot.dot(filteredData, {x: "year", y: "anomaly", fill: d => d.anomaly > 0 ? "red" : "blue", r: 5,
        tip: true}),
    Plot.text(filteredData.slice(-1), {x: "year", y: "anomaly", text: d => `${d.anomaly}°C`, dy: -15, fontSize: 14, fontWeight: "bold"})
  ]
})

// --- Collapsible quiz builder (file-scoped) ---
buildQuiz = function(id, title, questions) {
  const outer = html`<div id="${id}" style="margin:18px 0 24px 0;text-align:center;">
    <button style="
      display:inline-flex;align-items:center;gap:7px;
      background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
      color:#fff;border:none;padding:9px 22px;border-radius:50px;
      font-size:.95em;font-weight:700;cursor:pointer;
      box-shadow:0 3px 12px rgba(102,126,234,.45);
      transition:transform .15s,box-shadow .15s;"
      onmouseover="this.style.transform='scale(1.04)';this.style.boxShadow='0 5px 18px rgba(102,126,234,.55)'"
      onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 3px 12px rgba(102,126,234,.45)'"
    >
      <span style="font-size:1.1em;">📝</span> ${title}
      <span class="chevron" style="transition:transform .3s;">▼</span>
    </button>

    <div class="quiz-body" style="
      max-height:0;opacity:0;overflow:hidden;
      transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin-top .3s ease;
      margin-top:0;text-align:left;">

      <button class="close-btn" style="
        display:block;margin:0 auto 10px auto;
        background:rgba(102,126,234,.12);color:#667eea;border:none;
        padding:5px 18px;border-radius:50px;font-size:.85em;
        font-weight:600;cursor:pointer;">Hide Quiz</button>
      <p style="text-align:center;color:#718096;font-style:italic;font-size:.9em;margin-bottom:12px;">
        Select an answer for each question.</p>
    </div>
  </div>`;

  const toggle = outer.querySelector("button");
  const chevron = toggle.querySelector(".chevron");
  const body   = outer.querySelector(".quiz-body");
  const closeBtn = body.querySelector(".close-btn");

  function expand(){  body.style.maxHeight="2000px";body.style.opacity="1";body.style.marginTop="14px";chevron.style.transform="rotate(180deg)"; }
  function collapse(){ body.style.maxHeight="0";body.style.opacity="0";body.style.marginTop="0";chevron.style.transform="rotate(0)"; }
  toggle.onclick = () => body.style.maxHeight === "0px" || body.style.maxHeight === "" ? expand() : collapse();
  closeBtn.onclick = collapse;

  questions.forEach((qq, qi) => {
    const card = document.createElement("div");
    card.style.cssText = "background:#fff;border-radius:12px;padding:16px 20px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.08);";
    card.innerHTML = `<p style="font-weight:700;margin:0 0 10px;">${qi+1}. ${qq.q}</p>`;
    qq.options.forEach((opt, oi) => {
      const btn = document.createElement("button");
      btn.textContent = opt;
      btn.style.cssText = "display:block;width:100%;text-align:left;padding:10px 14px;margin:6px 0;border:2px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;font-size:.95em;transition:border-color .2s,background .2s;";
      btn.onmouseover = () => { if(!card.dataset.answered){ btn.style.borderColor="#667eea";btn.style.background="#f0f0ff"; }};
      btn.onmouseout  = () => { if(!card.dataset.answered){ btn.style.borderColor="#e2e8f0";btn.style.background="#fff"; }};
      btn.onclick = () => {
        if(card.dataset.answered) return;
        card.dataset.answered = "true";
        card.querySelectorAll("button").forEach(b => { b.style.cursor="default"; b.onmouseover=null; b.onmouseout=null; });
        if(oi === qq.correct){
          btn.style.borderColor="#48bb78";btn.style.background="#f0fff4";
          fb.innerHTML = "✅ Correct! " + qq.explanation;
          fb.style.color="#276749";fb.style.background="#f0fff4";
        } else {
          btn.style.borderColor="#fc8181";btn.style.background="#fff5f5";
          card.querySelectorAll("button")[qq.correct].style.borderColor="#48bb78";
          card.querySelectorAll("button")[qq.correct].style.background="#f0fff4";
          fb.innerHTML = "❌ " + qq.explanation;
          fb.style.color="#9b2c2c";fb.style.background="#fff5f5";
        }
        fb.style.padding="10px 14px";fb.style.marginTop="8px";
      };
      card.appendChild(btn);
    });
    const fb = document.createElement("div");
    fb.style.cssText = "border-radius:8px;font-size:.9em;transition:all .3s;";
    card.appendChild(fb);
    body.appendChild(card);
  });
  return outer;
}

buildQuiz("temp-anomaly-quiz", "Check Your Understanding — Temperature Trends", [
  {
    q: "Based on the Global Temperature Anomaly chart, what overall pattern is visible from 1880 to 2024?",
    options: [
      "A) Temperatures have remained flat",
      "B) Temperatures gradually decreased",
      "C) Temperatures show a clear warming trend, especially after 1980",
      "D) Temperatures peaked in 1940 and then declined"
    ],
    correct: 2,
    explanation: "The chart shows mostly negative anomalies before 1980 and a rapid rise to over +1°C by 2024, indicating accelerating warming."
  },
  {
    q: "Around what decade did global temperature anomalies begin staying consistently above the baseline (0°C)?",
    options: [
      "A) The 1920s",
      "B) The 1940s",
      "C) The 1980s",
      "D) The 2000s"
    ],
    correct: 2,
    explanation: "The 1980s mark the point where anomalies consistently stayed above 0°C and continued climbing, reflecting the acceleration of human-caused warming."
  }
])

21.2 NASA Climate Vital Signs Widget

Explore real-time climate data from NASA:

21.3 Climate Displacement Data

Millions of people have already been displaced due to climate-related events.

displacementData = [
  {year: 2018, displaced: 17.2, type: "Weather-related"},
  {year: 2019, displaced: 24.9, type: "Weather-related"},
  {year: 2020, displaced: 30.0, type: "Weather-related"},
  {year: 2021, displaced: 23.7, type: "Weather-related"},
  {year: 2022, displaced: 32.6, type: "Weather-related"},
  {year: 2023, displaced: 26.4, type: "Weather-related"}
]

Plot.plot({
  title: "People Displaced by Weather-Related Disasters (Millions)",
  width: 600,
  height: 350,
  x: {label: "Year", tickFormat: d => d.toString()},
  y: {label: "People Displaced (Millions)", domain: [0, 40]},
  marks: [
    Plot.barY(displacementData, {x: "year", y: "displaced", fill: "#e74c3c",
        tip: true}),
    Plot.text(displacementData, {x: "year", y: "displaced", text: d => d.displaced + "M", dy: -10, fontSize: 11})
  ]
})

buildQuiz("displacement-quiz", "Check Your Understanding — Climate Displacement", [
  {
    q: "According to the bar chart, which year had the highest number of people displaced by weather-related disasters?",
    options: [
      "A) 2019 — 24.9 million",
      "B) 2020 — 30.0 million",
      "C) 2022 — 32.6 million",
      "D) 2023 — 26.4 million"
    ],
    correct: 2,
    explanation: "2022 saw the highest displacement at 32.6 million people, driven by severe flooding in Pakistan and other extreme weather events."
  },
  {
    q: "What does the displacement data suggest about the trend of weather-related disasters from 2018 to 2023?",
    options: [
      "A) Displacement is steadily decreasing each year",
      "B) Displacement stays constant at about 20 million per year",
      "C) Displacement generally remains high (above 17 million) with year-to-year variability",
      "D) Displacement only increases during El Niño years"
    ],
    correct: 2,
    explanation: "The data shows consistently high displacement (17–33 million annually) with variability, indicating that weather-related disasters remain a major humanitarian challenge."
  }
])

22 Scientific Consensus

22.1 What Do Scientists Say?

consensusData = [
  {group: "Climate Scientists", agree: 99.9, disagree: 0.1},
  {group: "General Public (US)", agree: 57, disagree: 43}
]

99.9%

of climate scientists agree humans are causing climate change

57%

of the US public believes humans are the primary cause

22.1.1 🤔 Driving Question

Why is there such a large gap between scientific consensus and public perception? What evidence convinces scientists that humans are causing climate change?

23 The 2,000-Year Cooling Trend

23.1 Interactive: Long-Term Temperature Record

Before recent warming, Earth had been gradually cooling for about 2,000 years.

longTermData = [
  {year: 0, temp: 0.1}, {year: 200, temp: 0.05},
  {year: 400, temp: -0.1}, {year: 600, temp: -0.15},
  {year: 800, temp: -0.05}, {year: 1000, temp: 0.05},
  {year: 1200, temp: -0.1}, {year: 1400, temp: -0.3},
  {year: 1600, temp: -0.4}, {year: 1700, temp: -0.35},
  {year: 1800, temp: -0.3}, {year: 1850, temp: -0.25},
  {year: 1900, temp: -0.2}, {year: 1950, temp: -0.05},
  {year: 1980, temp: 0.15}, {year: 2000, temp: 0.4},
  {year: 2020, temp: 1.0}
]

Plot.plot({
  title: "2,000 Years of Global Temperature Change",
  subtitle: "Temperature anomaly relative to 1961-1990 average",
  width: 700,
  height: 400,
  x: {label: "Year (CE)", domain: [0, 2025]},
  y: {label: "Temperature Anomaly (°C)", domain: [-0.6, 1.2]},
  marks: [
    Plot.ruleY([0], {stroke: "#999", strokeDasharray: "4,4"}),
    Plot.areaY(longTermData.filter(d => d.year <= 1850), {x: "year", y: "temp", fill: "#3498db", fillOpacity: 0.3,
        tip: true}),
    Plot.areaY(longTermData.filter(d => d.year >= 1850), {x: "year", y: "temp", fill: "#e74c3c", fillOpacity: 0.3,
        tip: true}),
    Plot.line(longTermData, {x: "year", y: "temp", stroke: "#2c3e50", strokeWidth: 2,
        tip: true}),
    Plot.text([{x: 900, y: -0.45, text: "Natural Cooling Trend"}], {x: "x", y: "y", text: "text", fill: "#3498db", fontSize: 12}),
    Plot.text([{x: 1950, y: 0.7, text: "Industrial Era Warming"}], {x: "x", y: "y", text: "text", fill: "#e74c3c", fontSize: 12})
  ]
})

buildQuiz("2000yr-temp-quiz", "Check Your Understanding — 2,000-Year Temperature Record", [
  {
    q: "What was the overall temperature trend for most of the last 2,000 years, before the Industrial Era?",
    options: [
      "A) Temperatures were rapidly increasing",
      "B) Temperatures stayed perfectly constant",
      "C) Temperatures were gradually cooling",
      "D) Temperatures fluctuated with no pattern"
    ],
    correct: 2,
    explanation: "For about 1,800 years, Earth experienced a slow, natural cooling trend driven by gradual changes in orbital parameters (Milankovitch cycles)."
  },
  {
    q: "Why is the sharp temperature rise in the last ~200 years especially significant when viewed against the 2,000-year record?",
    options: [
      "A) It matches previous natural warming cycles",
      "B) It reverses a long cooling trend at a speed not seen in the natural record",
      "C) It is smaller than the Medieval Warm Period",
      "D) It was predicted by ancient astronomers"
    ],
    correct: 1,
    explanation: "The recent warming is unprecedented because it sharply reverses a multi-century cooling trend. The rate of change far exceeds anything in the natural record, pointing to human-caused factors."
  }
])

23.1.1 💡 Key Ideas from the Unit Opening

• Over the past 2,000 years, Earth had been cooling, until about 200 years ago
• Millions of people have been displaced because of weather-related incidents
• The scientific consensus is that humans are causing climate change and that it is a big deal
• The public is less certain that humans are causing climate change

24 Student Questions

Based on what you’ve observed, what questions do you have?

24.0.1 Questions to Investigate in This Unit:

1. Why was Earth’s temperature cooling before but is rising now?
2. Why are people being displaced by climate factors?
3. Why are scientists sure that humans are causing climate change?
4. Has the climate ever changed before, and if so, how did it impact populations?
5. How will climate change affect people now and in the future?
6. Why are scientists so sure that climate change is a big deal?

25 Performance Task Preview

25.1 📋 Your Mission

Throughout this unit, you will analyze and interpret data related to changes in climate in the past in order to:

1. Understand how we are so confident humans are the cause of current climate change
2. Communicate this information to educate others in your community about the risks
3. Predict how climate factors will be affected in the future
4. Explain how populations will be impacted

By the end of this unit, you will create a communication piece for someone in your community that explains: - Why scientists are certain humans are causing climate change - How climate factors will be affected - How populations will be impacted

26 Initial Ideas Activity

26.1 What natural factors might cause climate change?

Brainstorm: Natural Climate Factors

Before we investigate, record your initial ideas about what natural factors could have caused changes in climate in the past:

• Changes in the Sun's energy output
• Volcanic eruptions
• Changes in Earth's orbit
• Ocean current changes
• What else?

---

26.2 📝 Unit Opening Quiz

{
  const questions = [
    {
      q: "Based on the temperature data, approximately how much has global temperature increased since 1880?",
      options: ["A) 0.5°C", "B) 1.0°C", "C) 1.5°C", "D) 2.0°C"],
      correct: 2,
      explanation: "Global temperatures have risen approximately 1.5°C since 1880, with most of the warming occurring in the last 50 years."
    },
    {
      q: "What percentage of climate scientists agree that humans are causing climate change?",
      options: ["A) About 57%", "B) About 75%", "C) About 90%", "D) About 99.9%"],
      correct: 3,
      explanation: "Multiple studies confirm that over 99% of climate scientists agree that human activities are causing climate change."
    },
    {
      q: "Before approximately 200 years ago, Earth's temperature had been:",
      options: ["A) Rapidly warming", "B) Staying constant", "C) Gradually cooling", "D) Fluctuating wildly"],
      correct: 2,
      explanation: "Earth had been in a gradual cooling trend for about 2,000 years due to Milankovitch cycles — until industrialization reversed that trend."
    },
    {
      q: "Why is the gap between scientific consensus and public perception important to address?",
      options: ["A) It doesn't matter what the public thinks", "B) Scientists might be wrong", "C) Public support is needed for climate action", "D) The public knows more than scientists"],
      correct: 2,
      explanation: "Addressing climate change requires broad public support for policy changes, which depends on understanding and trusting the science."
    },
    {
      q: "What is the anchor phenomenon for this unit?",
      options: ["A) Ice ages occur every 100,000 years", "B) The Sun's output varies over time", "C) Earth's temperature is rising, reversing a 2,000-year cooling trend", "D) Volcanoes cause climate change"],
      correct: 2,
      explanation: "The anchor phenomenon is that Earth's temperature is rising dramatically, reversing a natural 2,000-year cooling trend driven by orbital cycles."
    }
  ];

  const container = d3.create("div").attr("class", "interactive-quiz");
  container.append("p").style("text-align", "center").style("color", "#718096").style("font-style", "italic")
    .text("Select an answer for each question, then click 'Check Answers' to see your score.");

  const state = { answers: new Array(questions.length).fill(-1), submitted: false };

  questions.forEach((question, qi) => {
    const qDiv = container.append("div").attr("class", "quiz-question");
    qDiv.append("p").style("font-weight", "700").style("margin-bottom", "12px")
      .text(`Question ${qi + 1}: ${question.q}`);

    question.options.forEach((opt, oi) => {
      const label = qDiv.append("label").attr("class", "quiz-option")
        .style("display", "block").style("padding", "10px 16px").style("margin", "6px 0")
        .style("border", "2px solid #e2e8f0").style("border-radius", "8px").style("cursor", "pointer");
      label.append("input").attr("type", "radio").attr("name", `q${qi}`)
        .style("margin-right", "10px")
        .on("change", () => { state.answers[qi] = oi; });
      label.append("span").text(opt);
    });

    qDiv.append("div").attr("class", `feedback-${qi}`);
  });

  const btnDiv = container.append("div").style("text-align", "center").style("margin-top", "20px");
  btnDiv.append("button")
    .style("background", "linear-gradient(135deg, #667eea, #764ba2)").style("color", "white")
    .style("border", "none").style("padding", "12px 36px").style("border-radius", "25px")
    .style("font-size", "1.1em").style("font-weight", "700").style("cursor", "pointer")
    .style("box-shadow", "0 4px 15px rgba(102,126,234,0.4)")
    .text("Check Answers")
    .on("click", function() {
      let score = 0;
      questions.forEach((question, qi) => {
        const fb = container.select(`.feedback-${qi}`);
        fb.html("");
        if (state.answers[qi] === -1) {
          fb.append("div").attr("class", "quiz-feedback incorrect")
            .text("⚠️ Please select an answer.");
          return;
        }
        const isCorrect = state.answers[qi] === question.correct;
        if (isCorrect) score++;
        fb.append("div").attr("class", `quiz-feedback ${isCorrect ? "correct" : "incorrect"}`)
          .html(`${isCorrect ? "✅ Correct!" : "❌ Incorrect. The correct answer is " + question.options[question.correct] + "."}<br><em>${question.explanation}</em>`);
      });
      
      const scoreDiv = container.select(".score-display");
      scoreDiv.html("");
      const pct = Math.round(score / questions.length * 100);
      const emoji = pct === 100 ? "🌟" : pct >= 80 ? "👏" : pct >= 60 ? "👍" : "📚";
      scoreDiv.append("div").attr("class", "quiz-score")
        .text(`${emoji} Score: ${score}/${questions.length} (${pct}%)`);
    });

  container.append("div").attr("class", "score-display");
  return container.node();
}