<!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;
      background: #f8fafc;
      color: #1e293b;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    /* Header */
    .header-banner {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
    }
    .header-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .header-rule {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-top: 2px;
    }
    .rule-pill-bar { color: #0284c7; }
    .rule-pill-pie { color: #10b981; }

    /* Comparison Grid */
    .columns-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 480px) {
      .columns-grid {
        grid-template-columns: 1fr;
      }
    }

    .chart-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      text-align: center;
    }
    .card-subtitle {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-bottom: 4px;
      text-align: center;
    }

    .svg-container {
      width: 100%;
      max-width: 260px;
      height: auto;
      display: flex;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* SVG Interactive Elements */
    .interactive-item {
      cursor: pointer;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }
    .interactive-item:hover {
      filter: brightness(1.12) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    .interactive-item.selected {
      filter: brightness(1.18) drop-shadow(0 0 5px rgba(37,99,235,0.6));
      stroke: #0f172a;
      stroke-width: 1.5px;
    }

    .card-footer {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      margin-top: 6px;
      text-align: center;
      width: 100%;
    }
    .bar-footer {
      background: #f0f9ff;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .pie-footer {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    /* Interactive Feedback Strip */
    .feedback-strip {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-left: 4px solid #3b82f6;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      color: #334155;
      min-height: 38px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .feedback-icon {
      font-size: 14px;
      flex-shrink: 0;
    }
    .feedback-text b {
      color: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="header-banner">
    <div class="header-title">When to Use: Bar Chart vs. Pie Chart</div>
    <div class="header-rule">
      <span class="rule-pill-bar">Bar Chart</span> = Discrete groups | 
      <span class="rule-pill-pie">Pie Chart</span> = Proportions of 100% whole
    </div>
  </div>

  
  <div class="columns-grid">
    
    <div class="chart-card">
      <div>
        <div class="card-title">Bar Chart (Discrete Categories)</div>
        <div class="card-subtitle">Average Wingspan of Birds (cm)</div>
      </div>

      <div class="svg-container">
        <svg viewBox="0 0 240 170" aria-label="Bar Chart of Bird Wingspans">
          
          <line x1="30" y1="135" x2="230" y2="135" stroke="#cbd5e1" stroke-width="1" />
          <line x1="30" y1="105" x2="230" y2="105" stroke="#f1f5f9" stroke-width="1" />
          <line x1="30" y1="75" x2="230" y2="75" stroke="#f1f5f9" stroke-width="1" />
          <line x1="30" y1="45" x2="230" y2="45" stroke="#f1f5f9" stroke-width="1" />
          <line x1="30" y1="15" x2="230" y2="15" stroke="#f1f5f9" stroke-width="1" />

          
          <text x="24" y="139" font-size="9" fill="#94a3b8" text-anchor="end">0</text>
          <text x="24" y="109" font-size="9" fill="#94a3b8" text-anchor="end">20</text>
          <text x="24" y="79" font-size="9" fill="#94a3b8" text-anchor="end">40</text>
          <text x="24" y="49" font-size="9" fill="#94a3b8" text-anchor="end">60</text>
          <text x="24" y="19" font-size="9" fill="#94a3b8" text-anchor="end">80</text>

          
          
          <g class="interactive-item" data-type="bar" data-name="Robin" data-info="Separate category. Order can change without altering scientific meaning." tabindex="0" role="button" aria-label="Robin bar: 25 cm">
            <rect x="42" y="97.5" width="34" height="37.5" rx="3" fill="#0284c7" />
            <text x="59" y="92" font-size="10" font-weight="700" fill="#0284c7" text-anchor="middle">25</text>
            <text x="59" y="149" font-size="10" font-weight="600" fill="#334155" text-anchor="middle">Robin</text>
          </g>

          
          <g class="interactive-item" data-type="bar" data-name="Owl" data-info="Distinct species group. Gaps emphasize no in-between continuum." tabindex="0" role="button" aria-label="Owl bar: 40 cm">
            <rect x="90" y="75" width="34" height="60" rx="3" fill="#6366f1" />
            <text x="107" y="69" font-size="10" font-weight="700" fill="#6366f1" text-anchor="middle">40</text>
            <text x="107" y="149" font-size="10" font-weight="600" fill="#334155" text-anchor="middle">Owl</text>
          </g>

          
          <g class="interactive-item" data-type="bar" data-name="Hawk" data-info="Independent measurement compared directly along a numeric Y-axis." tabindex="0" role="button" aria-label="Hawk bar: 55 cm">
            <rect x="138" y="52.5" width="34" height="82.5" rx="3" fill="#a855f7" />
            <text x="155" y="46.5" font-size="10" font-weight="700" fill="#a855f7" text-anchor="middle">55</text>
            <text x="155" y="149" font-size="10" font-weight="600" fill="#334155" text-anchor="middle">Hawk</text>
          </g>

          
          <g class="interactive-item" data-type="bar" data-name="Eagle" data-info="Highest discrete category. Values don't sum to any fixed total." tabindex="0" role="button" aria-label="Eagle bar: 70 cm">
            <rect x="186" y="30" width="34" height="105" rx="3" fill="#f43f5e" />
            <text x="203" y="24" font-size="10" font-weight="700" fill="#f43f5e" text-anchor="middle">70</text>
            <text x="203" y="149" font-size="10" font-weight="600" fill="#334155" text-anchor="middle">Eagle</text>
          </g>

          
          <line x1="79" y1="137" x2="87" y2="137" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
          <line x1="127" y1="137" x2="135" y2="137" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
          <line x1="175" y1="137" x2="183" y2="137" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
        </svg>
      </div>

      <div class="card-footer bar-footer">
        Gaps show categories are separate & discrete
      </div>
    </div>

    
    <div class="chart-card">
      <div>
        <div class="card-title">Pie Chart (Parts of a Whole = 100%)</div>
        <div class="card-subtitle">Composition of Earth's Atmosphere</div>
      </div>

      <div class="svg-container">
        <svg viewBox="0 0 240 170" aria-label="Pie Chart of Atmospheric Composition">
          
          
          <path class="interactive-item" data-type="pie" data-name="Nitrogen (78%)" data-info="Major slice of a single complete 100% atmospheric mixture."
                d="M 105,82 L 105,20 A 62,62 0 1,1 44.1,70.39 Z" 
                fill="#2563eb" tabindex="0" role="button" aria-label="Nitrogen slice: 78%" />

          
          <path class="interactive-item" data-type="pie" data-name="Oxygen (21%)" data-info="Substantial share of the whole atmosphere (must total 100% with others)."
                d="M 105,82 L 44.1,70.39 A 62,62 0 0,1 101.1,20.12 Z" 
                fill="#10b981" tabindex="0" role="button" aria-label="Oxygen slice: 21%" />

          
          <path class="interactive-item" data-type="pie" data-name="Trace Gases (1%)" data-info="Tiny fraction of the exact same whole mixture (Argon, CO2, etc.)."
                d="M 105,82 L 101.1,20.12 A 62,62 0 0,1 105,20 Z" 
                fill="#f59e0b" tabindex="0" role="button" aria-label="Trace gases slice: 1%" />

          
          <text x="122" y="96" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle">Nitrogen</text>
          <text x="122" y="110" font-size="10" font-weight="600" fill="#bfdbfe" text-anchor="middle">78%</text>

          
          <text x="66" y="44" font-size="10" font-weight="700" fill="#ffffff" text-anchor="middle">O₂ 21%</text>

          
          <polyline points="103,18 103,10 148,10" fill="none" stroke="#f59e0b" stroke-width="1.2" />
          <circle cx="103" cy="18" r="2" fill="#f59e0b" />
          <text x="152" y="13" font-size="9.5" font-weight="700" fill="#b45309" text-anchor="start">Trace (1%)</text>
        </svg>
      </div>

      <div class="card-footer pie-footer">
        Sum = 78% + 21% + 1% = 100% Whole
      </div>
    </div>
  </div>

  
  <div class="feedback-strip" id="feedbackStrip" aria-live="polite">
    <div class="feedback-icon">💡</div>
    <div class="feedback-text" id="feedbackText">
      <b>Interactive:</b> Tap any bar or pie slice above to explore why each chart type is used.
    </div>
  </div>

  <script>
    const items = document.querySelectorAll('.interactive-item');
    const feedbackText = document.getElementById('feedbackText');
    const feedbackStrip = document.getElementById('feedbackStrip');

    function selectItem(el) {
      items.forEach(item => item.classList.remove('selected'));
      el.classList.add('selected');

      const name = el.getAttribute('data-name');
      const info = el.getAttribute('data-info');
      const type = el.getAttribute('data-type');

      feedbackStrip.style.borderLeftColor = (type === 'bar') ? '#0284c7' : '#10b981';
      feedbackText.innerHTML = `<b>${name}:</b> ${info}`;
    }

    items.forEach(el => {
      el.addEventListener('click', () => selectItem(el));
      el.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectItem(el);
        }
      });
    });
  </script>
</body>
</html>

Selecting Appropriate Graph Types for Data

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 12px 16px 14px;
    }

    header {
      width: 100%;
      max-width: 540px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    h1 {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.01em;
    }

    .badge {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2563eb;
    }

    .chart-container {
      width: 100%;
      max-width: 540px;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-family: inherit;
    }
    .axis-title {
      font-size: 12px;
      font-weight: 600;
      fill: #334155;
      font-family: inherit;
    }

    .data-line-bg {
      fill: none;
      stroke: #dbeafe;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4 4;
    }

    .data-line {
      fill: none;
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-dashoffset 0.4s ease;
    }

    .data-point {
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      transform-origin: center;
    }
    .data-point circle.outer {
      fill: #2563eb;
      transition: r 0.2s ease;
    }
    .data-point circle.inner {
      fill: #ffffff;
    }
    .data-point text {
      font-size: 11px;
      font-weight: 700;
      fill: #1e40af;
      font-family: inherit;
      text-anchor: middle;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .data-point.active circle.outer {
      r: 7;
      fill: #1d4ed8;
      filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.3));
    }
    .data-point.active text {
      opacity: 1;
    }
    .data-point.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .controls {
      width: 100%;
      max-width: 540px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 4px;
      padding-top: 6px;
    }

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

    button {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }
    button:active {
      background: #e2e8f0;
    }

    .timeline-steps {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .step-node {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-node.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      transform: scale(1.08);
    }
    .step-node.past {
      background: #dbeafe;
      border-color: #93c5fd;
      color: #1d4ed8;
    }
  </style>
</head>
<body>

  <header>
    <h1>Water Heating Over Time</h1>
    <div class="badge">
      <span class="badge-dot"></span>
      Connected line = continuous progression
    </div>
  </header>

  <div class="chart-container">
    <svg viewBox="0 0 500 290">
      
      <g>
        
        <line class="grid-line" x1="60" y1="230" x2="470" y2="230" />
        <line class="grid-line" x1="60" y1="182.5" x2="470" y2="182.5" />
        <line class="grid-line" x1="60" y1="135" x2="470" y2="135" />
        <line class="grid-line" x1="60" y1="87.5" x2="470" y2="87.5" />
        <line class="grid-line" x1="60" y1="40" x2="470" y2="40" />

        
        <line class="grid-line" x1="70" y1="40" x2="70" y2="230" />
        <line class="grid-line" x1="146" y1="40" x2="146" y2="230" />
        <line class="grid-line" x1="222" y1="40" x2="222" y2="230" />
        <line class="grid-line" x1="298" y1="40" x2="298" y2="230" />
        <line class="grid-line" x1="374" y1="40" x2="374" y2="230" />
        <line class="grid-line" x1="450" y1="40" x2="450" y2="230" />
      </g>

      
      <g>
        
        <line class="axis-line" x1="60" y1="40" x2="60" y2="230" />
        
        <line class="axis-line" x1="60" y1="230" x2="470" y2="230" />

        
        <text class="axis-label" x="50" y="234" text-anchor="end">20°</text>
        <text class="axis-label" x="50" y="186.5" text-anchor="end">40°</text>
        <text class="axis-label" x="50" y="139" text-anchor="end">60°</text>
        <text class="axis-label" x="50" y="91.5" text-anchor="end">80°</text>
        <text class="axis-label" x="50" y="44" text-anchor="end">100°</text>

        
        <text class="axis-title" transform="rotate(-90)" x="-135" y="18" text-anchor="middle">Temperature (°C)</text>

        
        <text class="axis-label" x="70" y="248" text-anchor="middle">0</text>
        <text class="axis-label" x="146" y="248" text-anchor="middle">2</text>
        <text class="axis-label" x="222" y="248" text-anchor="middle">4</text>
        <text class="axis-label" x="298" y="248" text-anchor="middle">6</text>
        <text class="axis-label" x="374" y="248" text-anchor="middle">8</text>
        <text class="axis-label" x="450" y="248" text-anchor="middle">10</text>

        
        <text class="axis-title" x="260" y="272" text-anchor="middle">Time (minutes)</text>
      </g>

      
      <path class="data-line-bg" d="M 70,230 L 146,194.375 L 222,154 L 298,111.25 L 374,68.5 L 450,40" />

      
      <path id="graphLine" class="data-line" d="M 70,230 L 146,194.375 L 222,154 L 298,111.25 L 374,68.5 L 450,40" />

      
      <g id="pointsGroup">
        
        <g class="data-point" transform="translate(70, 230)" data-index="0">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">20°C</text>
        </g>

        
        <g class="data-point hidden" transform="translate(146, 194.375)" data-index="1">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">35°C</text>
        </g>

        
        <g class="data-point hidden" transform="translate(222, 154)" data-index="2">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">52°C</text>
        </g>

        
        <g class="data-point hidden" transform="translate(298, 111.25)" data-index="3">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">70°C</text>
        </g>

        
        <g class="data-point hidden" transform="translate(374, 68.5)" data-index="4">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">88°C</text>
        </g>

        
        <g class="data-point hidden" transform="translate(450, 40)" data-index="5">
          <circle class="outer" cx="0" cy="0" r="5" />
          <circle class="inner" cx="0" cy="0" r="2.5" />
          <text x="0" y="-12">100°C</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="controls">
    <div class="btn-group">
      <button id="prevBtn" title="Previous Step">◀</button>
      <button id="playBtn" title="Play/Pause">▶ Play</button>
      <button id="nextBtn" title="Next Step">▶</button>
    </div>

    <div class="timeline-steps" id="stepsGroup">
      <div class="step-node active" data-index="0">0'</div>
      <div class="step-node" data-index="1">2'</div>
      <div class="step-node" data-index="2">4'</div>
      <div class="step-node" data-index="3">6'</div>
      <div class="step-node" data-index="4">8'</div>
      <div class="step-node" data-index="5">10'</div>
    </div>
  </div>

  <script>
    const line = document.getElementById('graphLine');
    const totalLength = line.getTotalLength();
    line.style.strokeDasharray = totalLength;

    // Segment lengths cumulative fractions
    // Points: (70,230), (146,194.375), (222,154), (298,111.25), (374,68.5), (450,40)
    const pts = [
      {x: 70, y: 230},
      {x: 146, y: 194.375},
      {x: 222, y: 154},
      {x: 298, y: 111.25},
      {x: 374, y: 68.5},
      {x: 450, y: 40}
    ];

    const cumLengths = [0];
    for (let i = 1; i < pts.length; i++) {
      const dx = pts[i].x - pts[i-1].x;
      const dy = pts[i].y - pts[i-1].y;
      cumLengths.push(cumLengths[i-1] + Math.sqrt(dx*dx + dy*dy));
    }

    const pointElements = document.querySelectorAll('.data-point');
    const stepNodes = document.querySelectorAll('.step-node');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    let isPlaying = false;
    let timer = null;

    function renderStep(index) {
      currentStep = index;
      const drawnLength = cumLengths[index];
      line.style.strokeDashoffset = totalLength - drawnLength;

      pointElements.forEach((pt, i) => {
        if (i <= index) {
          pt.classList.remove('hidden');
          if (i === index) {
            pt.classList.add('active');
          } else {
            pt.classList.remove('active');
          }
        } else {
          pt.classList.add('hidden');
          pt.classList.remove('active');
        }
      });

      stepNodes.forEach((node, i) => {
        node.classList.remove('active', 'past');
        if (i === index) {
          node.classList.add('active');
        } else if (i < index) {
          node.classList.add('past');
        }
      });
    }

    function setStep(index) {
      if (index < 0) index = 0;
      if (index >= pts.length) index = pts.length - 1;
      renderStep(index);
    }

    function togglePlay() {
      if (isPlaying) {
        pause();
      } else {
        play();
      }
    }

    function play() {
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      if (currentStep >= pts.length - 1) {
        setStep(0);
      }
      clearInterval(timer);
      timer = setInterval(() => {
        if (currentStep < pts.length - 1) {
          setStep(currentStep + 1);
        } else {
          pause();
        }
      }, 1000);
    }

    function pause() {
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      clearInterval(timer);
    }

    playBtn.addEventListener('click', togglePlay);

    prevBtn.addEventListener('click', () => {
      pause();
      setStep(currentStep - 1);
    });

    nextBtn.addEventListener('click', () => {
      pause();
      setStep(currentStep + 1);
    });

    stepNodes.forEach((node, idx) => {
      node.addEventListener('click', () => {
        pause();
        setStep(idx);
      });
    });

    pointElements.forEach((pt, idx) => {
      pt.addEventListener('click', () => {
        pause();
        setStep(idx);
      });
    });

    // Initialize initial state
    renderStep(0);

    // Initial gentle autoplay after 800ms
    setTimeout(() => {
      play();
    }, 800);
  </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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px 12px;
      user-select: none;
    }
    .header {
      text-align: center;
      margin-bottom: 4px;
    }
    .title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .badge-warn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 9999px;
      margin-top: 2px;
    }
    .chart-container {
      width: 100%;
      max-width: 500px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis-line { stroke: #64748b; stroke-width: 1.5; }
    .grid-line { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 2 2; }
    .axis-label { font-size: 11px; fill: #475569; font-weight: 600; text-anchor: middle; }
    .tick-label { font-size: 10px; fill: #64748b; }
    .data-point {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 1.5;
      transition: r 0.2s ease, fill 0.2s ease;
      cursor: pointer;
    }
    .data-point:hover {
      fill: #0369a1;
      r: 6.5;
    }
    .trend-line {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
      transition: opacity 0.3s ease;
    }
    .zigzag-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      fill: none;
      transition: opacity 0.3s ease;
    }
    .line-tag {
      font-size: 11px;
      font-weight: 700;
      fill: #dc2626;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Daily Sunlight vs. Plant Growth</div>
    <div class="badge-warn" id="ruleBadge">✕ Dots are NOT connected dot-to-dot</div>
  </div>

  <div class="chart-container">
    <svg viewBox="0 0 460 300" id="scatterPlot">
      
      <line x1="55" y1="240" x2="430" y2="240" class="grid-line" />
      <line x1="55" y1="170" x2="430" y2="170" class="grid-line" />
      <line x1="55" y1="100" x2="430" y2="100" class="grid-line" />
      <line x1="55" y1="30"  x2="430" y2="30"  class="grid-line" />

      
      <line x1="55"  y1="30" x2="55"  y2="240" class="grid-line" />
      <line x1="148" y1="30" x2="148" y2="240" class="grid-line" />
      <line x1="242" y1="30" x2="242" y2="240" class="grid-line" />
      <line x1="336" y1="30" x2="336" y2="240" class="grid-line" />
      <line x1="430" y1="30" x2="430" y2="240" class="grid-line" />

      
      <line x1="55" y1="240" x2="430" y2="240" class="axis-line" />
      <line x1="55" y1="240" x2="55"  y2="25"  class="axis-line" />

      
      <text x="47" y="244" text-anchor="end" class="tick-label">0</text>
      <text x="47" y="174" text-anchor="end" class="tick-label">10</text>
      <text x="47" y="104" text-anchor="end" class="tick-label">20</text>
      <text x="47" y="34"  text-anchor="end" class="tick-label">30</text>

      
      <text x="55"  y="256" text-anchor="middle" class="tick-label">2</text>
      <text x="148" y="256" text-anchor="middle" class="tick-label">4</text>
      <text x="242" y="256" text-anchor="middle" class="tick-label">6</text>
      <text x="336" y="256" text-anchor="middle" class="tick-label">8</text>
      <text x="430" y="256" text-anchor="middle" class="tick-label">10</text>

      
      <text x="242" y="278" class="axis-label">Sunlight (Hours)</text>
      <text x="-135" y="18" class="axis-label" transform="rotate(-90)">Plant Growth (cm)</text>

      
      <polyline id="zigzag" class="zigzag-line" opacity="0"
        points="78,212 102,191 139,198 158,163 186,177 205,142 228,128 247,149 280,107 299,114 331,79 350,93 373,58 392,65 411,44" />

      
      <line id="trendLine" x1="55" y1="222" x2="430" y2="47" class="trend-line" />
      <text id="trendLabel" x="320" y="55" class="line-tag" transform="rotate(-25 320 55)">Line of Best Fit</text>

      
      <circle cx="78"  cy="212" r="5" class="data-point" />
      <circle cx="102" cy="191" r="5" class="data-point" />
      <circle cx="139" cy="198" r="5" class="data-point" />
      <circle cx="158" cy="163" r="5" class="data-point" />
      <circle cx="186" cy="177" r="5" class="data-point" />
      <circle cx="205" cy="142" r="5" class="data-point" />
      <circle cx="228" cy="128" r="5" class="data-point" />
      <circle cx="247" cy="149" r="5" class="data-point" />
      <circle cx="280" cy="107" r="5" class="data-point" />
      <circle cx="299" cy="114" r="5" class="data-point" />
      <circle cx="331" cy="79"  r="5" class="data-point" />
      <circle cx="350" cy="93"  r="5" class="data-point" />
      <circle cx="373" cy="58"  r="5" class="data-point" />
      <circle cx="392" cy="65"  r="5" class="data-point" />
      <circle cx="411" cy="44"  r="5" class="data-point" />
    </svg>
  </div>

  <div class="controls">
    <button class="btn active" id="btnFit" onclick="setMode('fit')">✓ Best Fit Line</button>
    <button class="btn" id="btnZigzag" onclick="setMode('zigzag')">✕ Connect Dots</button>
  </div>

  <script>
    function setMode(mode) {
      const trend = document.getElementById('trendLine');
      const label = document.getElementById('trendLabel');
      const zigzag = document.getElementById('zigzag');
      const btnFit = document.getElementById('btnFit');
      const btnZigzag = document.getElementById('btnZigzag');
      const badge = document.getElementById('ruleBadge');

      if (mode === 'fit') {
        trend.style.opacity = '1';
        label.style.opacity = '1';
        zigzag.style.opacity = '0';
        btnFit.classList.add('active');
        btnZigzag.classList.remove('active');
        badge.textContent = '✕ Dots are NOT connected dot-to-dot';
        badge.style.background = '#fef2f2';
        badge.style.color = '#dc2626';
        badge.style.borderColor = '#fecaca';
      } else {
        trend.style.opacity = '0';
        label.style.opacity = '0';
        zigzag.style.opacity = '1';
        btnFit.classList.remove('active');
        btnZigzag.classList.add('active');
        badge.textContent = '⚠️ Incorrect: creates meaningless zig-zags!';
        badge.style.background = '#fffbeb';
        badge.style.color = '#b45309';
        badge.style.borderColor = '#fde68a';
      }
    }
  </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; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      margin-bottom: 8px;
    }

    /* Top Node */
    .node-top {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      max-width: 90%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Main Grid Branches */
    .branches-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      margin-top: 8px;
    }

    .branch-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    /* Category Header Node */
    .branch-header {
      width: 100%;
      text-align: center;
      padding: 6px 4px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, opacity 0.2s ease;
    }

    .cat-purple {
      background: #f3e8ff;
      border: 2px solid #a855f7;
      color: #6b21a8;
    }

    .cat-blue {
      background: #e0f2fe;
      border: 2px solid #0284c7;
      color: #0369a1;
    }

    /* Sub-question box */
    .sub-q {
      background: #ffffff;
      border: 1.5px dashed #94a3b8;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      text-align: center;
      width: 100%;
    }

    /* End Leaves: 2 charts per branch */
    .leaves-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      width: 100%;
    }

    .chart-card {
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .card-purple {
      border: 1.5px solid #d8b4fe;
    }
    .card-purple:hover, .card-purple.active {
      border-color: #9333ea;
      box-shadow: 0 0 0 2px #c084fc;
      background: #faf5ff;
    }

    .card-blue {
      border: 1.5px solid #7dd3fc;
    }
    .card-blue:hover, .card-blue.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px #38bdf8;
      background: #f0f9ff;
    }

    .condition-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      margin-bottom: 4px;
    }
    .tag-purple { background: #f3e8ff; color: #7e22ce; }
    .tag-blue { background: #e0f2fe; color: #0369a1; }

    .chart-title {
      font-size: 11px;
      font-weight: 700;
      margin-top: 4px;
      color: #1e2945;
    }

    /* Mini SVG Chart Icons */
    .mini-chart {
      width: 48px;
      height: 38px;
      display: block;
    }

    /* Hint / Scenario Selector */
    .scenario-bar {
      margin-top: 8px;
      display: flex;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }

    .btn-scenario {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: all 0.2s ease;
      flex: 1;
      max-width: 180px;
      text-align: center;
    }

    .btn-scenario:hover {
      background: #e2e8f0;
    }

    .btn-scenario.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="title">How to Choose Your Graph</div>

  
  <div class="node-top">
    Independent Variable Type?
  </div>

  
  <div class="branches-grid">

    
    <div class="branch-col">
      <div class="branch-header cat-purple" id="head-cat">
        Categorical (Words / Groups)
      </div>
      <div class="sub-q">Parts of 100% whole?</div>
      
      <div class="leaves-row">
        
        <div class="chart-card card-purple" id="card-pie" onclick="highlight('pie')">
          <span class="condition-tag tag-purple">Yes</span>
          <svg class="mini-chart" viewBox="0 0 50 40">
            <circle cx="25" cy="20" r="16" fill="#c084fc" />
            <path d="M25 20 L25 4 A16 16 0 0 1 41 20 Z" fill="#9333ea" />
            <path d="M25 20 L41 20 A16 16 0 0 1 25 36 Z" fill="#7e22ce" />
          </svg>
          <div class="chart-title">Pie Chart</div>
        </div>

        
        <div class="chart-card card-purple" id="card-bar" onclick="highlight('bar')">
          <span class="condition-tag tag-purple">No</span>
          <svg class="mini-chart" viewBox="0 0 50 40">
            <line x1="6" y1="36" x2="46" y2="36" stroke="#94a3b8" stroke-width="2"/>
            <rect x="10" y="16" width="7" height="20" rx="1" fill="#9333ea"/>
            <rect x="21" y="8" width="7" height="28" rx="1" fill="#a855f7"/>
            <rect x="32" y="22" width="7" height="14" rx="1" fill="#c084fc"/>
          </svg>
          <div class="chart-title">Bar Chart</div>
        </div>
      </div>
    </div>

    
    <div class="branch-col">
      <div class="branch-header cat-blue" id="head-cont">
        Continuous (Measurements)
      </div>
      <div class="sub-q">Tracking over time?</div>

      <div class="leaves-row">
        
        <div class="chart-card card-blue" id="card-line" onclick="highlight('line')">
          <span class="condition-tag tag-blue">Yes</span>
          <svg class="mini-chart" viewBox="0 0 50 40">
            <line x1="6" y1="36" x2="46" y2="36" stroke="#94a3b8" stroke-width="2"/>
            <line x1="6" y1="6" x2="6" y2="36" stroke="#94a3b8" stroke-width="2"/>
            <polyline points="10,28 22,18 34,22 44,8" fill="none" stroke="#0284c7" stroke-width="2.5"/>
            <circle cx="10" cy="28" r="2.5" fill="#0369a1"/>
            <circle cx="22" cy="18" r="2.5" fill="#0369a1"/>
            <circle cx="34" cy="22" r="2.5" fill="#0369a1"/>
            <circle cx="44" cy="8" r="2.5" fill="#0369a1"/>
          </svg>
          <div class="chart-title">Line Graph</div>
        </div>

        
        <div class="chart-card card-blue" id="card-scatter" onclick="highlight('scatter')">
          <span class="condition-tag tag-blue">No / 2 Numbers</span>
          <svg class="mini-chart" viewBox="0 0 50 40">
            <line x1="6" y1="36" x2="46" y2="36" stroke="#94a3b8" stroke-width="2"/>
            <line x1="6" y1="6" x2="6" y2="36" stroke="#94a3b8" stroke-width="2"/>
            <circle cx="12" cy="30" r="2.5" fill="#0284c7"/>
            <circle cx="18" cy="22" r="2.5" fill="#0284c7"/>
            <circle cx="24" cy="25" r="2.5" fill="#0284c7"/>
            <circle cx="30" cy="15" r="2.5" fill="#0284c7"/>
            <circle cx="38" cy="12" r="2.5" fill="#0284c7"/>
            <circle cx="42" cy="8" r="2.5" fill="#0284c7"/>
          </svg>
          <div class="chart-title">Scatter Plot</div>
        </div>
      </div>
    </div>

  </div>

  
  <div class="scenario-bar">
    <button class="btn-scenario" id="scen-tree" onclick="pickScenario('bar', this)">🌲 Tree Species</button>
    <button class="btn-scenario" id="scen-temp" onclick="pickScenario('line', this)">⏱ Temp vs Time</button>
    <button class="btn-scenario" id="scen-pie" onclick="pickScenario('pie', this)">🍕 Gas % in Air</button>
  </div>

  <script>
    const cards = {
      pie: document.getElementById('card-pie'),
      bar: document.getElementById('card-bar'),
      line: document.getElementById('card-line'),
      scatter: document.getElementById('card-scatter')
    };

    function highlight(type) {
      Object.values(cards).forEach(c => c.classList.remove('active'));
      document.querySelectorAll('.btn-scenario').forEach(b => b.classList.remove('active'));
      if (cards[type]) {
        cards[type].classList.add('active');
      }
    }

    function pickScenario(type, btn) {
      highlight(type);
      btn.classList.add('active');
    }
  </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;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 420px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .data-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .card-header {
      padding: 10px 12px;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      letter-spacing: -0.2px;
    }

    .header-cat {
      background: #f3e8ff;
      color: #581c87;
      border-bottom: 1.5px solid #e9d5ff;
    }

    .header-cont {
      background: #e0f2fe;
      color: #0369a1;
      border-bottom: 1.5px solid #bae6fd;
    }

    .card-body {
      padding: 16px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 220px;
    }

    /* Categorical Bins */
    .bins-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 180px;
    }

    .bin-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: #faf5ff;
      border: 1.5px dashed #c084fc;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      color: #1e2945;
    }

    .bin-icon {
      font-size: 20px;
      line-height: 1;
    }

    /* Continuous Thermometer */
    .scale-wrapper {
      position: relative;
      width: 100%;
      max-width: 200px;
      height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="data-card">
      <div class="card-header header-cat">Categorical Data</div>
      <div class="card-body">
        <div class="bins-container">
          <div class="bin-item">
            <span class="bin-icon">🌳</span>
            <span>Oak</span>
          </div>
          <div class="bin-item">
            <span class="bin-icon">🌲</span>
            <span>Pine</span>
          </div>
          <div class="bin-item">
            <span class="bin-icon">🍃</span>
            <span>Birch</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="data-card">
      <div class="card-header header-cont">Continuous Data</div>
      <div class="card-body">
        <div class="scale-wrapper">
          <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
            
            <rect x="70" y="20" width="16" height="150" rx="8" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" />
            
            <circle cx="78" cy="174" r="16" fill="#0284c7" stroke="#0369a1" stroke-width="2" />
            
            
            <rect x="73" y="101" width="10" height="65" fill="#0284c7" />

            
            
            <line x1="58" y1="30" x2="68" y2="30" stroke="#475569" stroke-width="1.5" />
            <text x="52" y="34" font-size="11" font-weight="600" fill="#1e2945" text-anchor="end">40°C</text>

            
            <line x1="58" y1="73.3" x2="68" y2="73.3" stroke="#475569" stroke-width="1.5" />
            <text x="52" y="77.3" font-size="11" font-weight="600" fill="#1e2945" text-anchor="end">30°C</text>

            
            <line x1="58" y1="116.7" x2="68" y2="116.7" stroke="#475569" stroke-width="1.5" />
            <text x="52" y="120.7" font-size="11" font-weight="600" fill="#1e2945" text-anchor="end">20°C</text>

            
            <line x1="58" y1="160" x2="68" y2="160" stroke="#475569" stroke-width="1.5" />
            <text x="52" y="164" font-size="11" font-weight="600" fill="#1e2945" text-anchor="end">10°C</text>

            
            
            <line x1="63" y1="38.7" x2="68" y2="38.7" stroke="#94a3b8" stroke-width="1" />
            <line x1="63" y1="47.3" x2="68" y2="47.3" stroke="#94a3b8" stroke-width="1" />
            <line x1="61" y1="56.0" x2="68" y2="56.0" stroke="#64748b" stroke-width="1.2" />
            <line x1="63" y1="64.7" x2="68" y2="64.7" stroke="#94a3b8" stroke-width="1" />

            
            <line x1="63" y1="82.0" x2="68" y2="82.0" stroke="#94a3b8" stroke-width="1" />
            <line x1="63" y1="90.7" x2="68" y2="90.7" stroke="#94a3b8" stroke-width="1" />
            <line x1="61" y1="99.3" x2="68" y2="99.3" stroke="#64748b" stroke-width="1.2" />
            <line x1="63" y1="108.0" x2="68" y2="108.0" stroke="#94a3b8" stroke-width="1" />

            
            <line x1="63" y1="125.3" x2="68" y2="125.3" stroke="#94a3b8" stroke-width="1" />
            <line x1="63" y1="134.0" x2="68" y2="134.0" stroke="#94a3b8" stroke-width="1" />
            <line x1="61" y1="142.7" x2="68" y2="142.7" stroke="#64748b" stroke-width="1.2" />
            <line x1="63" y1="151.3" x2="68" y2="151.3" stroke="#94a3b8" stroke-width="1" />

            
            <line x1="88" y1="101" x2="108" y2="101" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
            
            
            <rect x="110" y="89" width="66" height="24" rx="6" fill="#0284c7" />
            <polygon points="106,101 110,96 110,106" fill="#0284c7" />
            <text x="143" y="105.5" font-size="12" font-weight="700" fill="#ffffff" text-anchor="middle">23.6°C</text>
          </svg>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

OGS.7.SEP.4

Aligned learning resources

Related diagrams