<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      user-select: none;
    }
    .chart-container {
      width: 100%;
      max-width: 580px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .controls {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .pill {
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .pill.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
    }
    .badge-num {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #1e2945;
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }
    .pill.active .badge-num {
      background: #ffffff;
      color: #1e2945;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .axis-line { stroke: #cbd5e1; stroke-width: 1; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 4 3; }
    .axis-text { font-size: 12px; fill: #64748b; font-family: monospace; }
    .line-nominal { stroke: #d97706; stroke-width: 3; fill: none; stroke-linecap: round; }
    .line-real { stroke: #0d9488; stroke-width: 3; fill: none; stroke-linecap: round; }
    .callout-box {
      transition: opacity 0.3s ease, transform 0.3s ease;
      opacity: 0.2;
    }
    .callout-box.highlighted {
      opacity: 1;
    }
    .pulse-ring {
      animation: pulse 2s infinite ease-out;
      transform-origin: center;
    }
    @keyframes pulse {
      0% { r: 6px; opacity: 0.9; }
      100% { r: 16px; opacity: 0; }
    }
  </style>
</head>
<body>

<div class="chart-container">
  
  <div class="controls">
    <button class="pill active" id="btn-all" onclick="setFocus('all')">View All</button>
    <button class="pill" id="btn-1" onclick="setFocus('1')"><span class="badge-num">1</span> Dual Legend</button>
    <button class="pill" id="btn-2" onclick="setFocus('2')"><span class="badge-num">2</span> Shock Band</button>
    <button class="pill" id="btn-3" onclick="setFocus('3')"><span class="badge-num">3</span> Base Index</button>
  </div>

  
  <svg viewBox="0 0 540 320">
    
    
    

    
    <line x1="50" y1="260" x2="500" y2="260" class="axis-line" />
    <line x1="50" y1="205" x2="500" y2="205" class="grid-line" />
    <line x1="50" y1="150" x2="500" y2="150" class="grid-line" />
    <line x1="50" y1="95"  x2="500" y2="95"  class="grid-line" />
    <line x1="50" y1="40"  x2="500" y2="40"  class="grid-line" />

    
    <text x="42" y="264" class="axis-text" text-anchor="end">$24</text>
    <text x="42" y="209" class="axis-text" text-anchor="end">$27</text>
    <text x="42" y="154" class="axis-text" text-anchor="end">$30</text>
    <text x="42" y="99"  class="axis-text" text-anchor="end">$33</text>
    <text x="42" y="44"  class="axis-text" text-anchor="end">$36</text>

    
    <g id="group-2" class="callout-box highlighted">
      <rect x="180" y="40" width="45" height="220" fill="#64748b" fill-opacity="0.12" rx="4" />
      <text x="202.5" y="55" fill="#475569" font-size="11" font-weight="700" text-anchor="middle">2020 SHOCK</text>
      <circle cx="202.5" cy="20" r="10" fill="#22b7ff" />
      <text x="202.5" y="24" fill="#fff" font-size="11" font-weight="700" text-anchor="middle">2</text>
    </g>

    
    <text x="50"  y="280" class="axis-text" text-anchor="middle">2018</text>
    <text x="125" y="280" class="axis-text" text-anchor="middle">2019</text>
    <text x="200" y="280" class="axis-text" text-anchor="middle">2020</text>
    <text x="275" y="280" class="axis-text" text-anchor="middle">2021</text>
    <text x="350" y="280" class="axis-text" text-anchor="middle">2022</text>
    <text x="425" y="280" class="axis-text" text-anchor="middle">2023</text>
    <text x="500" y="280" class="axis-text" text-anchor="middle">2024</text>

    
    
    <path d="M 50 241.7 L 125 223.3 L 200 195.8 L 275 168.3 L 350 131.7 L 425 104.2 L 500 76.7" class="line-nominal" />

    
    
    <path d="M 50 241.7 L 125 227.0 L 200 201.3 L 275 208.7 L 350 219.7 L 425 212.3 L 500 205.0" class="line-real" />

    
    <circle cx="500" cy="76.7" r="4" fill="#d97706" />
    <text x="508" y="80.7" fill="#d97706" font-size="12" font-weight="700">$34</text>
    
    <circle cx="500" cy="205.0" r="4" fill="#0d9488" />
    <text x="508" y="209.0" fill="#0d9488" font-size="12" font-weight="700">$27</text>

    
    <g id="group-3" class="callout-box highlighted">
      <circle cx="50" cy="241.7" r="10" fill="#3b82f6" class="pulse-ring" />
      <circle cx="50" cy="241.7" r="5" fill="#1e2945" />
      
      <rect x="18" y="180" width="80" height="28" rx="6" fill="#1e2945" />
      <text x="58" y="198" fill="#ffffff" font-size="10" font-weight="700" text-anchor="middle">BASE: 2018</text>
      <line x1="50" y1="208" x2="50" y2="234" stroke="#1e2945" stroke-width="1.5" stroke-dasharray="2 2" />
      
      <circle cx="18" cy="180" r="9" fill="#22b7ff" />
      <text x="18" y="183.5" fill="#fff" font-size="10" font-weight="700" text-anchor="middle">3</text>
    </g>

    
    <g id="group-1" class="callout-box highlighted">
      <rect x="255" y="85" width="190" height="52" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.05))" />
      
      <line x1="268" y1="102" x2="288" y2="102" stroke="#d97706" stroke-width="3" stroke-linecap="round" />
      <text x="295" y="106" fill="#1e2945" font-size="11" font-weight="600">Nominal Earnings</text>
      
      <line x1="268" y1="123" x2="288" y2="123" stroke="#0d9488" stroke-width="3" stroke-linecap="round" />
      <text x="295" y="127" fill="#1e2945" font-size="11" font-weight="600">Real (Chained $)</text>
      
      <circle cx="255" cy="85" r="9" fill="#22b7ff" />
      <text x="255" y="88.5" fill="#fff" font-size="10" font-weight="700" text-anchor="middle">1</text>
    </g>
  </svg>
</div>

<script>
  function setFocus(id) {
    // Update button styles
    ['all', '1', '2', '3'].forEach(k => {
      const btn = document.getElementById('btn-' + k);
      if (btn) btn.classList.toggle('active', k === id);
    });

    // Update diagram highlights
    ['1', '2', '3'].forEach(k => {
      const el = document.getElementById('group-' + k);
      if (el) {
        if (id === 'all' || id === k) {
          el.classList.add('highlighted');
        } else {
          el.classList.remove('highlighted');
        }
      }
    });
  }
</script>

</body>
</html>

Extracting Quantitative Data From Economic Reports to Support Policy Analysis

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Pipeline Grid */
    .pipeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: auto 0;
      position: relative;
    }

    @media (max-width: 520px) {
      .pipeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }

    /* Step Card */
    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      user-select: none;
    }

    .step-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.2);
    }

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .step-card.active .step-num {
      background: #22b7ff;
      color: #ffffff;
    }

    .step-icon {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .step-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .step-sub {
      font-size: 12px;
      color: #64748b;
      line-height: 1.2;
      font-weight: 500;
    }

    .step-card.active .step-sub {
      color: #0369a1;
      font-weight: 600;
    }

    /* Live Visual Focus / Status Preview */
    .focus-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      min-height: 48px;
    }

    .focus-text {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .focus-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 700;
      font-size: 12px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .btn-ctrl:active {
      background: #f1f5f9;
    }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="pipeline">
    <div class="step-card active" data-step="0">
      <div class="step-num">1</div>
      <div class="step-icon">📍</div>
      <div class="step-title">Extract</div>
      <div class="step-sub">Units & Endpoints</div>
    </div>

    <div class="step-card" data-step="1">
      <div class="step-num">2</div>
      <div class="step-icon">🧮</div>
      <div class="step-title">Compute</div>
      <div class="step-sub">Absolute & Relative Δ</div>
    </div>

    <div class="step-card" data-step="2">
      <div class="step-num">3</div>
      <div class="step-icon">🌐</div>
      <div class="step-title">Contextualize</div>
      <div class="step-sub">Macro Trends</div>
    </div>

    <div class="step-card" data-step="3">
      <div class="step-num">4</div>
      <div class="step-icon">⚖️</div>
      <div class="step-title">Evaluate</div>
      <div class="step-sub">Claim vs Data</div>
    </div>
  </div>

  
  <div class="focus-panel">
    <div class="focus-text">
      <span id="focusIcon">📍</span>
      <span id="focusDesc">Isolate exact axes, time bounds, and units</span>
    </div>
    <span class="focus-badge" id="focusBadge">Step 1 of 4</span>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="playBtn" aria-label="Toggle pipeline playback">
      <span id="playIcon">⏸</span> Pause
    </button>
    <div class="dots">
      <span class="dot active" data-step="0" aria-label="Step 1"></span>
      <span class="dot" data-step="1" aria-label="Step 2"></span>
      <span class="dot" data-step="2" aria-label="Step 3"></span>
      <span class="dot" data-step="3" aria-label="Step 4"></span>
    </div>
  </div>

  <script>
    const descriptions = [
      { icon: '📍', text: 'Isolate exact axes, time bounds, and units', badge: 'Step 1: Extract' },
      { icon: '🧮', text: 'Calculate absolute points (+2%) vs rate (+50%)', badge: 'Step 2: Compute' },
      { icon: '🌐', text: 'Filter macro shifts, inflation, and population baselines', badge: 'Step 3: Context' },
      { icon: '⚖️', text: 'Cross-check exact claim wording against verified math', badge: 'Step 4: Evaluate' }
    ];

    const cards = $$('.step-card');
    const dots = $$('.dot');
    const focusIcon = $('#focusIcon');
    const focusDesc = $('#focusDesc');
    const focusBadge = $('#focusBadge');
    const playBtn = $('#playBtn');
    const playIcon = $('#playIcon');

    function updateStepUI(index) {
      cards.forEach((card, i) => card.classList.toggle('active', i === index));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
      
      const item = descriptions[index];
      focusIcon.textContent = item.icon;
      focusDesc.textContent = item.text;
      focusBadge.textContent = item.badge;
    }

    const player = new StepPlayer('.step-card', {
      interval: 3200,
      onChange: (idx) => updateStepUI(idx)
    });

    cards.forEach((card, idx) => {
      onTap(card, () => {
        player.pause();
        playIcon.textContent = '▶';
        playBtn.childNodes[1].nodeValue = ' Play';
        player.goTo(idx);
      });
    });

    dots.forEach((dot, idx) => {
      onTap(dot, () => {
        player.pause();
        playIcon.textContent = '▶';
        playBtn.childNodes[1].nodeValue = ' Play';
        player.goTo(idx);
      });
    });

    onTap(playBtn, () => {
      player.toggle();
      playIcon.textContent = player.playing ? '⏸' : '▶';
      playBtn.childNodes[1].nodeValue = player.playing ? ' Pause' : ' Play';
    });

    player.start();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .table-container {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
      text-align: center;
    }

    th {
      background: #f1f5f9;
      color: #475569;
      font-weight: 600;
      padding: 8px 6px;
      border-bottom: 1px solid #cbd5e1;
      font-size: 12px;
      line-height: 1.2;
    }

    td {
      padding: 8px 6px;
      border-bottom: 1px solid #f1f5f9;
      font-variant-numeric: tabular-nums;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    tbody tr {
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    tbody tr:hover {
      background-color: #f8fafc;
    }

    tbody tr.active {
      background-color: #eff6ff;
    }

    tbody tr.active td:first-child {
      font-weight: 700;
      color: #2563eb;
      position: relative;
    }

    tbody tr.active td:first-child::before {
      content: "▶";
      position: absolute;
      left: 4px;
      font-size: 9px;
      top: 50%;
      transform: translateY(-50%);
    }

    .c-nom { color: #0284c7; }
    .c-cpi { color: #d97706; }
    .c-real { color: #16a34a; font-weight: 600; }

    .formula-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .formula-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      flex-wrap: wrap;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
    }

    .numerator {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 2px;
    }

    .denominator {
      padding-top: 2px;
    }

    .badge {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 13px;
    }

    .badge-nom { background: #e0f2fe; color: #0284c7; }
    .badge-cpi { background: #fef3c7; color: #d97706; }
    .badge-real { background: #dcfce7; color: #15803d; }

    .steps-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }

    .step-pill {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      padding: 4px 10px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .step-pill.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="steps-nav">
    <button class="step-pill active" onclick="selectYear(0)">2021</button>
    <button class="step-pill" onclick="selectYear(1)">2022</button>
    <button class="step-pill" onclick="selectYear(2)">2023</button>
  </div>

  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Year</th>
          <th class="c-nom">Nominal<br>Wage</th>
          <th class="c-cpi">CPI<br><span style="font-weight: normal; font-size: 10px;">(2020=100)</span></th>
          <th class="c-real">Real Wage<br><span style="font-weight: normal; font-size: 10px;">($2020)</span></th>
        </tr>
      </thead>
      <tbody id="tableBody">
        <tr id="row-0" class="active" onclick="selectYear(0)">
          <td>2021</td>
          <td class="c-nom">$15.00</td>
          <td class="c-cpi">105.0</td>
          <td class="c-real">$14.29</td>
        </tr>
        <tr id="row-1" onclick="selectYear(1)">
          <td>2022</td>
          <td class="c-nom">$15.00</td>
          <td class="c-cpi">112.0</td>
          <td class="c-real">$13.39</td>
        </tr>
        <tr id="row-2" onclick="selectYear(2)">
          <td>2023</td>
          <td class="c-nom">$15.50</td>
          <td class="c-cpi">118.0</td>
          <td class="c-real">$13.14</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="formula-card">
    <div class="formula-header">Calculation Breakdown</div>
    
    <div class="math-row">
      <span class="badge badge-real" id="calcReal">Real Wage: $14.29</span>
      <span>=</span>
      <span>(</span>
      <div class="fraction">
        <span class="numerator badge badge-nom" id="calcNom">$15.00</span>
        <span class="denominator badge badge-cpi" id="calcCpi">105.0</span>
      </div>
      <span>)</span>
      <span>× 100</span>
    </div>
  </div>

  <script>
    const data = [
      { year: "2021", nom: "$15.00", cpi: "105.0", real: "$14.29" },
      { year: "2022", nom: "$15.00", cpi: "112.0", real: "$13.39" },
      { year: "2023", nom: "$15.50", cpi: "118.0", real: "$13.14" }
    ];

    function selectYear(index) {
      document.querySelectorAll('#tableBody tr').forEach((tr, i) => {
        tr.classList.toggle('active', i === index);
      });
      document.querySelectorAll('.step-pill').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const d = data[index];
      document.getElementById('calcReal').textContent = `Real Wage: ${d.real}`;
      document.getElementById('calcNom').textContent = d.nom;
      document.getElementById('calcCpi').textContent = d.cpi;
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .chart-container {
      width: 100%;
      max-width: 600px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      justify-content: center;
      width: 100%;
    }
    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn.active-cherry {
      background: #dc2626;
      color: #ffffff;
      border-color: #dc2626;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }
    .axis-text {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
    }
    .baseline-line {
      stroke: #0284c7;
      stroke-width: 1.5;
      stroke-dasharray: 4 4;
      opacity: 0.8;
    }
    .full-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity 0.3s ease;
    }
    .cherry-path {
      fill: none;
      stroke: #dc2626;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity 0.3s ease;
    }
    .cherry-rect {
      fill: #fee2e2;
      stroke: #f87171;
      stroke-width: 1;
      stroke-dasharray: 3 3;
      rx: 4;
      transition: opacity 0.3s ease;
    }
    .point-full {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 1.5;
      transition: opacity 0.3s ease;
    }
    .point-cherry {
      fill: #dc2626;
      stroke: #ffffff;
      stroke-width: 1.5;
      transition: opacity 0.3s ease;
    }
    .label-box {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

<div class="chart-container">
  <svg viewBox="0 0 540 320">
    
    <line x1="50" y1="50" x2="510" y2="50" class="grid-line" />
    <line x1="50" y1="110" x2="510" y2="110" class="grid-line" />
    <line x1="50" y1="170" x2="510" y2="170" class="grid-line" />
    <line x1="50" y1="230" x2="510" y2="230" class="grid-line" />

    
    <text x="42" y="54" text-anchor="end" class="axis-text">200k</text>
    <text x="42" y="114" text-anchor="end" class="axis-text">160k</text>
    <text x="42" y="174" text-anchor="end" class="axis-text">120k</text>
    <text x="42" y="234" text-anchor="end" class="axis-text">80k</text>

    
    <line x1="50" y1="270" x2="510" y2="270" class="axis-line" />
    <line x1="50" y1="30" x2="50" y2="270" class="axis-line" />

    
    
    <text x="55" y="286" text-anchor="middle" class="axis-text">'14</text>
    <text x="100" y="286" text-anchor="middle" class="axis-text">'15</text>
    <text x="145" y="286" text-anchor="middle" class="axis-text">'16</text>
    <text x="190" y="286" text-anchor="middle" class="axis-text">'17</text>
    <text x="235" y="286" text-anchor="middle" class="axis-text">'18</text>
    <text x="280" y="286" text-anchor="middle" class="axis-text">'19</text>
    <text x="325" y="286" text-anchor="middle" class="axis-text" font-weight="700" fill="#dc2626">'20</text>
    <text x="370" y="286" text-anchor="middle" class="axis-text" font-weight="700" fill="#dc2626">'21</text>
    <text x="415" y="286" text-anchor="middle" class="axis-text">'22</text>
    <text x="460" y="286" text-anchor="middle" class="axis-text">'23</text>
    <text x="505" y="286" text-anchor="middle" class="axis-text">'24</text>

    
    <g id="baselineGroup">
      <line x1="50" y1="125" x2="510" y2="125" class="baseline-line" />
      <text x="505" y="118" text-anchor="end" font-size="11" fill="#0284c7" font-weight="600">Baseline Trend (~150k)</text>
    </g>

    
    <g id="cherryBox">
      <rect x="305" y="40" width="85" height="225" class="cherry-rect" />
    </g>

    
    <path id="fullPath" class="full-path" d="
      M 55,128
      L 100,122
      L 145,129.5
      L 190,117.5
      L 235,125
      L 280,120.5
      L 325,200
      L 370,110
      L 415,128
      L 460,122
      L 505,125
    " />

    
    <path id="cherryPath" class="cherry-path" d="M 325,200 L 370,110" />

    
    <g id="fullPoints">
      <circle cx="55" cy="128" r="3.5" class="point-full" />
      <circle cx="100" cy="122" r="3.5" class="point-full" />
      <circle cx="145" cy="129.5" r="3.5" class="point-full" />
      <circle cx="190" cy="117.5" r="3.5" class="point-full" />
      <circle cx="235" cy="125" r="3.5" class="point-full" />
      <circle cx="280" cy="120.5" r="3.5" class="point-full" />
      <circle cx="415" cy="128" r="3.5" class="point-full" />
      <circle cx="460" cy="122" r="3.5" class="point-full" />
      <circle cx="505" cy="125" r="3.5" class="point-full" />
    </g>

    
    <g id="cherryPoints">
      <circle cx="325" cy="200" r="4.5" class="point-cherry" />
      <circle cx="370" cy="110" r="4.5" class="point-cherry" />
      <text x="325" y="218" text-anchor="middle" font-size="11" font-weight="700" fill="#dc2626">100k</text>
      <text x="370" y="98" text-anchor="middle" font-size="11" font-weight="700" fill="#dc2626">160k</text>
    </g>

    
    <g id="cherryLabel" class="label-box">
      <rect x="250" y="10" width="200" height="26" rx="4" fill="#dc2626" />
      <text x="350" y="27" text-anchor="middle" font-size="11.5" font-weight="700" fill="#ffffff">Cherry-Picked: +60% Surge!</text>
    </g>
  </svg>

  <div class="controls">
    <button id="btnCherry" class="btn" onclick="showMode('cherry')">Cherry-Picked Window</button>
    <button id="btnFull" class="btn active" onclick="showMode('full')">Full 10-Year Context</button>
  </div>
</div>

<script>
  function showMode(mode) {
    const btnCherry = document.getElementById('btnCherry');
    const btnFull = document.getElementById('btnFull');
    const fullPath = document.getElementById('fullPath');
    const fullPoints = document.getElementById('fullPoints');
    const baselineGroup = document.getElementById('baselineGroup');
    const cherryBox = document.getElementById('cherryBox');
    const cherryLabel = document.getElementById('cherryLabel');

    if (mode === 'cherry') {
      btnCherry.className = 'btn active-cherry';
      btnFull.className = 'btn';
      fullPath.style.opacity = '0.15';
      fullPoints.style.opacity = '0.15';
      baselineGroup.style.opacity = '0.2';
      cherryBox.style.opacity = '1';
      cherryLabel.style.opacity = '1';
    } else {
      btnCherry.className = 'btn';
      btnFull.className = 'btn active';
      fullPath.style.opacity = '1';
      fullPoints.style.opacity = '1';
      baselineGroup.style.opacity = '1';
      cherryBox.style.opacity = '0.7';
      cherryLabel.style.opacity = '1';
    }
  }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 12px;
    }
    .grid {
      display: flex;
      flex-direction: row;
      gap: 16px;
      width: 100%;
      max-width: 580px;
    }
    @media (max-width: 480px) {
      .grid {
        flex-direction: column;
        gap: 12px;
      }
    }
    .panel {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 250px;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .panel.active {
      border-color: #0d9488;
      box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
    }
    .panel-header {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.2px;
      text-align: center;
    }
    .badge {
      font-size: 20px;
      font-weight: 800;
      color: #0d9488;
      background: #f0fdfa;
      border: 1px solid #ccfbf1;
      padding: 4px 12px;
      border-radius: 20px;
      margin-top: 4px;
    }
    .viz-area {
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    /* Left Panel: Vertical Bar with Bracket */
    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 120px;
    }
    .bar-track {
      width: 42px;
      height: 100%;
      background: #f1f5f9;
      border-radius: 6px;
      display: flex;
      flex-direction: column-reverse;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      position: relative;
    }
    .bar-base {
      height: 57%; /* 4% out of 7% max */
      background: #94a3b8;
      width: 100%;
      transition: background 0.2s;
    }
    .bar-diff {
      height: 29%; /* 2% out of 7% max */
      background: #0d9488;
      width: 100%;
      border-bottom: 1.5px dashed #ffffff;
    }
    .bracket-group {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding-top: 14px;
      padding-bottom: 2px;
    }
    .scale-mark {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .scale-mark.top {
      color: #0d9488;
      font-weight: 700;
    }

    /* Right Panel: Ratio Breakdown */
    .ratio-viz {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .ratio-blocks {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .block {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
    }
    .block-base {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #475569;
    }
    .block-add {
      background: #0d9488;
      border: 1.5px solid #0f766e;
      color: #ffffff;
      animation: pulse-border 2.5s infinite ease-in-out;
    }
    @keyframes pulse-border {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    .ratio-sub {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .fraction {
      color: #0d9488;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel active" id="p1" onclick="selectPanel(1)">
      <div>
        <div class="panel-header">Absolute Change</div>
        <div class="badge">+2.0 pp</div>
      </div>
      
      <div class="viz-area">
        <div class="bar-chart">
          <div class="bar-track">
            <div class="bar-base"></div>
            <div class="bar-diff"></div>
          </div>
          <div class="bracket-group">
            <div class="scale-mark top">6.0%</div>
            <div class="scale-mark">4.0%</div>
            <div class="scale-mark">0.0%</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="panel" id="p2" onclick="selectPanel(2)">
      <div>
        <div class="panel-header">Relative Change</div>
        <div class="badge">+50%</div>
      </div>

      <div class="viz-area">
        <div class="ratio-viz">
          <div class="ratio-blocks">
            <div class="block block-base">2%</div>
            <div class="block block-base">2%</div>
            <span style="color:#94a3b8; font-weight:700; font-size:18px;">+</span>
            <div class="block block-add">2%</div>
          </div>
          <div class="ratio-sub">
            <span>2% added on 4%</span>
            <span class="fraction">(½ = 50%)</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectPanel(num) {
      document.getElementById('p1').classList.toggle('active', num === 1);
      document.getElementById('p2').classList.toggle('active', num === 2);
    }
  </script>
</body>
</html>

Reading Charts and Graphs in Historical Sources

Reading Quantitative Data in Historical Analysis

Integrating Quantitative Data With Qualitative Historical Analysis

Combining Statistical Evidence With Narrative Accounts

Determining Whether Evidence Is Sufficient to Support a Claim

Assessing the Strength of Reasoning in Historical Arguments

Identifying Unsupported Claims in Historical Writing

Assessing Whether Evidence Is Sufficient in Informational Text

Detecting Bias and Perspective in Historical Arguments

Assessing Author Credibility in Historical Sources

Integrating Data and Evaluating Arguments in History

What Different Mediums Emphasize or Omit

Comparing a Key Scene in Text and Visual Art

Analyzing a Poem and Its Artistic Inspiration

Analyzing a Subject Across Print and Multimedia

Determining Which Details Are Emphasized in Each Medium

How Medium Choice Affects Interpretation

Evaluating Which Medium Best Conveys Meaning

Comparing Multimedia Adaptations of Informational Texts

Comparing Mediums: Art, Film, and Multimedia

Challenging Textual Claims Using Contradictory Quantitative Data

Translating Complex Verbal Arguments Into Visual and Multimodal Models

Analyzing Semiotic Framing and Visual Rhetoric in Mass Media

Evaluating Socioeconomic and Ideological Impacts of Digital Media

Multimodal Literacy, Quantitative Translation, and Media Semiotics

Translating Quantitative Information From Words Into Visual Form

Translating Visual Data Into Words in Science Texts

Translating Mathematical Equations Into Verbal Explanations

Assessing Whether Evidence Supports Scientific Claims

Evaluating Reasoning in Scientific Arguments

Assessing Recommendations for Solving Scientific Problems

Comparing Findings Across Multiple Scientific Sources

Comparing Text Findings With Your Own Experimental Results

Identifying When Findings Support or Contradict Previous Accounts

Reading Complex Science and Technical Texts Independently

Integrating and Comparing Scientific Information

Lectura crítica de textos descriptivos: enfoques y perspectivas

Lectura crítica de textos narrativos: voces y focalización

Lectura crítica de textos explicativos y divulgativos

Interpretación de infografías, gráficas y tablas en textos continuos

Lectura crítica aplicada a tipologías textuales

Synthesizing Quantitative Economic Data With Qualitative History

Analyzing Census Demographic Tables with Settlement Narratives

Integrating Electoral Cartograms and Voting Statistics with Speeches

Interpreting Inflation and Wage Indices in Labor History Texts

Integrating GIS Spatial Data with Environmental Policy Reports

Corroborating Military Casualty Statistics with Battlefield Diaries

Analyzing Trade Balance Tables and Tariff Schedules with Treaty Texts

Evaluating Discrepancies Between Polling Data and Media Claims

Synthesizing Multi-Modal Economic White Papers Independently

social-studies

Integrating Quantitative, Technical, and Qualitative Data (Grades 9–10)

Rola mediów w kształtowaniu opinii publicznej i postaw

Fakt a opinia i interpretacja w przekazie medialnym

Mechanizmy manipulacji i perswazji w mediach

Fake news, dezinformacja i weryfikacja źródeł (fact-checking)

Reklama jako tekst perswazyjny — język i obraz

Język internetu — memy, hasztagi i nowe formy komunikacji

Bezpieczeństwo i higiena cyfrowa w sieci

Krytyczna analiza artykułu prasowego lub portalu informacyjnego

Tworzenie angażującego komunikatu medialnego z zachowaniem etyki

Edukacja medialna i krytyczna analiza przekazów

Ética del uso de la información: derechos de autor y licencias abiertas

Integración de tablas y figuras con rotulado académico

Redacción del estado del arte y marco teórico

La elaboración de anexos, apéndices y notas aclaratorias

Auditoría de integridad académica y verificación de citas

Ética, estructura y verificación del trabajo académico

El Romanticismo europeo: subjetividad, rebeldía, Goethe y Poe

El Realismo y Naturalismo: Balzac, Flaubert, Dostoievski y Zola

El Modernismo hispanoamericano: Rubén Darío y la renovación formal

Las vanguardias históricas: futurismo, surrealismo y dadaísmo

La literatura del absurdo y existencialismo: Kafka, Camus y Sartre

El Boom latinoamericano: realismo mágico y experimentación técnica

La literatura posmoderna y contemporánea: metaficción y fragmentación

Literaturas poscoloniales: voces africanas, asiáticas e indígenas

Del Romanticismo a la contemporaneidad: crisis, vanguardias y nuevas voces

El papel de los medios en las sociedades democráticas contemporáneas

Grupos económicos, concentración mediática e intereses editoriales

El papel de los medios de comunicación en la creación de matrices de opinión

Mecanismos ideológicos subyacentes en el discurso periodístico

Análisis crítico del titular periodístico y el clickbait

Estructuras mediáticas y análisis del discurso periodístico

Implicaciones de los medios masivos en la historia política de Colombia

Propaganda política y estrategias de manipulación del consenso

Noticias falsas (fake news) y desinformación en entornos digitales

Estrategias para despolarizar conversaciones sobre asuntos públicos

Análisis del discurso político: promesas, eufemismos y retórica

Propaganda, política y desinformación en el ecosistema digital

La publicidad comercial: estereotipos, deseo y consumo acrítico

Estrategias de desarme del lenguaje en redes sociales

Periodismo independiente, medios alternativos y ciudadanía

Redacción de un ensayo crítico sobre medios de comunicación

Creación de un espacio de curaduría y análisis de noticias

Publicidad, redes sociales y participación ciudadana mediática

Fundamentos de semiótica: signo, significante, significado y símbolo

Semiótica del graffiti y el arte urbano como discurso social

Análisis semiótico del afiche publicitario: composición y color

Los símbolos patrios y monumentos: construcción de identidad e ideología

Análisis de canciones, coplas y tradiciones populares como fuentes

Los caligramas y la poesía visual: fusión entre palabra e imagen

Semiótica y manifestaciones culturales tradicionales

El lenguaje cinematográfico: planos, angulación, montaje y banda sonora

El cómic y la novela gráfica: narrativa secuencial y metáforas visuales

Kinésica, proxémica y paralenguaje en la interacción social

Los memes digitales como artefactos semióticos y humor político

Semiótica del vestuario y la moda: identidad, estatus y resistencia

Creación de un mensaje multimodal con intención crítico-social

Elaboración de un ensayo semiótico sobre una manifestación cultural

Exposición analítica de sistemas simbólicos en la cultura juvenil

Lenguajes no verbales, medios contemporáneos y producción semiótica

La comunicación oral en situaciones comunicativas auténticas

Definición de la temática del discurso oral argumentativo

Formulación de la hipótesis para demostrar en un texto oral

Búsqueda y selección de información para el discurso oral

Uso de estrategias descriptivas para demostrar la hipótesis oral

Estrategias explicativas y analogías en la exposición oral

Recursos retóricos clásicos: ethos, pathos y logos en la oratoria

Modulación de la voz: dicción, ritmo y pausas estratégicas

Expresión corporal, contacto visual y manejo del espacio escénico

Construcción y entrega del discurso oral argumentativo

OGE.11.RI.7

OGE.11.RI.7

Aligned learning resources

Related diagrams