<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Top Controls */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }

    .step-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn-pill {
      border: 1px solid #cbd5e1;
      background: #f1f5f9;
      color: #475569;
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-pill.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    }

    .nav-actions {
      display: flex;
      gap: 4px;
    }

    .btn-nav {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }

    .btn-nav:hover:not(:disabled) {
      background: #f8fafc;
    }

    .btn-nav:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Split Main Area */
    .main-grid {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 12px;
      align-items: start;
    }

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

    /* Left Panel: Table & Tip */
    .left-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .table-box {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      background: #f8fafc;
    }

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

    th {
      background: #e2e8f0;
      color: #334155;
      padding: 6px 4px;
      font-weight: 600;
      border-bottom: 1px solid #cbd5e1;
    }

    td {
      padding: 5px 4px;
      color: #1e293b;
      border-bottom: 1px solid #e2e8f0;
      transition: background 0.15s;
    }

    tr.row-active td {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 700;
    }

    .table-row-item {
      cursor: pointer;
    }

    .tip-box {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px;
      font-size: 12px;
      color: #1e40af;
      line-height: 1.35;
    }

    /* Right Panel: SVG Canvas */
    .canvas-box {
      position: relative;
      width: 100%;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Plot transitions */
    .step-element {
      transition: opacity 0.3s ease;
    }

    .dot-marker {
      fill: #2563eb;
      cursor: pointer;
      transition: r 0.15s ease, fill 0.15s ease;
    }

    .dot-marker:hover, .dot-marker.selected {
      fill: #f59e0b;
      r: 8px;
    }

    .guide-line {
      stroke: #f59e0b;
      stroke-width: 1.5;
      stroke-dasharray: 4, 3;
    }

    .axis-title {
      font-size: 12px;
      font-weight: 700;
      fill: #0f172a;
    }

    .axis-label {
      font-size: 10px;
      font-weight: 500;
      fill: #64748b;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
      stroke-dasharray: 2, 2;
    }

    .axis-line {
      stroke: #0f172a;
      stroke-width: 2;
      stroke-linecap: round;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <div class="step-pills">
      <button class="btn-pill active" id="pill-1" onclick="goToStep(1)">1. Label Axes</button>
      <button class="btn-pill" id="pill-2" onclick="goToStep(2)">2. Choose Scales</button>
      <button class="btn-pill" id="pill-3" onclick="goToStep(3)">3. Plot Points</button>
    </div>
    <div class="nav-actions">
      <button class="btn-nav" id="btn-back" onclick="changeStep(-1)" disabled>◀ Back</button>
      <button class="btn-nav" id="btn-next" onclick="changeStep(1)">Next ▶</button>
    </div>
  </div>

  
  <div class="main-grid">
    
    <div class="left-panel">
      <div class="table-box">
        <table>
          <thead>
            <tr>
              <th>Temp (°F)<br><span style="font-weight:400;color:#64748b;">(x)</span></th>
              <th>Sales<br><span style="font-weight:400;color:#64748b;">(y)</span></th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-row-item" id="row-0" onclick="selectPoint(0)">
              <td>70°</td>
              <td>25</td>
            </tr>
            <tr class="table-row-item" id="row-1" onclick="selectPoint(1)">
              <td>75°</td>
              <td>40</td>
            </tr>
            <tr class="table-row-item" id="row-2" onclick="selectPoint(2)">
              <td>80°</td>
              <td>50</td>
            </tr>
            <tr class="table-row-item" id="row-3" onclick="selectPoint(3)">
              <td>85°</td>
              <td>70</td>
            </tr>
            <tr class="table-row-item" id="row-4" onclick="selectPoint(4)">
              <td>90°</td>
              <td>85</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="tip-box" id="tip-text">
        Identify independent variable (x) and dependent variable (y) and label both with units.
      </div>
    </div>

    
    <div class="canvas-box">
      <svg viewBox="0 0 460 300">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0f172a"/>
          </marker>
        </defs>

        
        <g id="grid-group" class="step-element" style="opacity: 0;">
          
          <line x1="60" y1="240" x2="430" y2="240" class="grid-line"/>
          <line x1="60" y1="196" x2="430" y2="196" class="grid-line"/>
          <line x1="60" y1="152" x2="430" y2="152" class="grid-line"/>
          <line x1="60" y1="108" x2="430" y2="108" class="grid-line"/>
          <line x1="60" y1="64" x2="430" y2="64" class="grid-line"/>
          <line x1="60" y1="20" x2="430" y2="20" class="grid-line"/>

          
          <line x1="100" y1="240" x2="100" y2="20" class="grid-line"/>
          <line x1="150" y1="240" x2="150" y2="20" class="grid-line"/>
          <line x1="200" y1="240" x2="200" y2="20" class="grid-line"/>
          <line x1="250" y1="240" x2="250" y2="20" class="grid-line"/>
          <line x1="300" y1="240" x2="300" y2="20" class="grid-line"/>
          <line x1="350" y1="240" x2="350" y2="20" class="grid-line"/>
          <line x1="400" y1="240" x2="400" y2="20" class="grid-line"/>
        </g>

        
        <g id="guide-group" style="display: none;">
          <line id="guide-x" x1="0" y1="0" x2="0" y2="0" class="guide-line"/>
          <line id="guide-y" x1="0" y1="0" x2="0" y2="0" class="guide-line"/>
        </g>

        
        
        <line x1="60" y1="240" x2="60" y2="12" class="axis-line" marker-end="url(#arrow)"/>
        
        <line x1="60" y1="240" x2="445" y2="240" class="axis-line" marker-end="url(#arrow)"/>

        
        <text x="250" y="285" text-anchor="middle" class="axis-title">Daily High Temperature (°F)</text>
        <text x="-130" y="20" transform="rotate(-90)" text-anchor="middle" class="axis-title">Smoothie Sales (cups)</text>

        
        <g id="scale-group" class="step-element" style="opacity: 0;">
          
          <path d="M 68 244 L 73 236 L 79 244 L 84 236 L 89 240" fill="none" stroke="#0f172a" stroke-width="1.5"/>

          
          <line x1="56" y1="240" x2="60" y2="240" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="244" text-anchor="end" class="axis-label">0</text>

          <line x1="56" y1="196" x2="60" y2="196" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="200" text-anchor="end" class="axis-label">20</text>

          <line x1="56" y1="152" x2="60" y2="152" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="156" text-anchor="end" class="axis-label">40</text>

          <line x1="56" y1="108" x2="60" y2="108" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="112" text-anchor="end" class="axis-label">60</text>

          <line x1="56" y1="64" x2="60" y2="64" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="68" text-anchor="end" class="axis-label">80</text>

          <line x1="56" y1="20" x2="60" y2="20" stroke="#0f172a" stroke-width="1.5"/>
          <text x="52" y="24" text-anchor="end" class="axis-label">100</text>

          
          <line x1="100" y1="240" x2="100" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="100" y="256" text-anchor="middle" class="axis-label">65°</text>

          <line x1="150" y1="240" x2="150" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="150" y="256" text-anchor="middle" class="axis-label">70°</text>

          <line x1="200" y1="240" x2="200" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="200" y="256" text-anchor="middle" class="axis-label">75°</text>

          <line x1="250" y1="240" x2="250" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="250" y="256" text-anchor="middle" class="axis-label">80°</text>

          <line x1="300" y1="240" x2="300" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="300" y="256" text-anchor="middle" class="axis-label">85°</text>

          <line x1="350" y1="240" x2="350" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="350" y="256" text-anchor="middle" class="axis-label">90°</text>

          <line x1="400" y1="240" x2="400" y2="244" stroke="#0f172a" stroke-width="1.5"/>
          <text x="400" y="256" text-anchor="middle" class="axis-label">95°</text>
        </g>

        
        <g id="points-group" class="step-element" style="opacity: 0;">
          
          <circle id="pt-0" cx="150" cy="185" r="6" class="dot-marker" onclick="selectPoint(0)"/>
          
          <circle id="pt-1" cx="200" cy="152" r="6" class="dot-marker" onclick="selectPoint(1)"/>
          
          <circle id="pt-2" cx="250" cy="130" r="6" class="dot-marker" onclick="selectPoint(2)"/>
          
          <circle id="pt-3" cx="300" cy="86" r="6" class="dot-marker" onclick="selectPoint(3)"/>
          
          <circle id="pt-4" cx="350" cy="53" r="6" class="dot-marker" onclick="selectPoint(4)"/>
        </g>

        
        <g id="tooltip-group" style="display: none; pointer-events: none;">
          <rect id="tip-bg" x="0" y="0" width="105" height="22" rx="4" fill="#0f172a" opacity="0.9"/>
          <text id="tip-val" x="0" y="0" fill="#ffffff" font-size="11" font-weight="600" text-anchor="middle"> (70°F, 25 cups) </text>
        </g>
      </svg>
    </div>
  </div>

  <script>
    const pointsData = [
      { temp: 70, sales: 25, cx: 150, cy: 185 },
      { temp: 75, sales: 40, cx: 200, cy: 152 },
      { temp: 80, sales: 50, cx: 250, cy: 130 },
      { temp: 85, sales: 70, cx: 300, cy: 86 },
      { temp: 90, sales: 85, cx: 350, cy: 53 }
    ];

    const tips = [
      "Identify independent variable (x) and dependent variable (y) and label both with units.",
      "Use consistent, equal intervals along each axis. Break zigzag shows non-zero start.",
      "Plot each paired observation (x, y). Tap dots or table rows to inspect coordinates."
    ];

    let currentStep = 1;
    let selectedIdx = -1;

    function goToStep(step) {
      currentStep = step;
      selectedIdx = -1;
      clearHighlight();

      // Update Pill Buttons
      for (let i = 1; i <= 3; i++) {
        const pill = document.getElementById('pill-' + i);
        if (i === step) {
          pill.classList.add('active');
        } else {
          pill.classList.remove('active');
        }
      }

      // Update Nav Buttons
      document.getElementById('btn-back').disabled = (step === 1);
      document.getElementById('btn-next').disabled = (step === 3);

      // Update Tip Box
      document.getElementById('tip-text').textContent = tips[step - 1];

      // Update SVG layer visibility
      const grid = document.getElementById('grid-group');
      const scale = document.getElementById('scale-group');
      const points = document.getElementById('points-group');

      if (step === 1) {
        grid.style.opacity = '0';
        scale.style.opacity = '0';
        points.style.opacity = '0';
      } else if (step === 2) {
        grid.style.opacity = '1';
        scale.style.opacity = '1';
        points.style.opacity = '0';
      } else if (step === 3) {
        grid.style.opacity = '1';
        scale.style.opacity = '1';
        points.style.opacity = '1';
      }
    }

    function changeStep(delta) {
      const target = currentStep + delta;
      if (target >= 1 && target <= 3) {
        goToStep(target);
      }
    }

    function clearHighlight() {
      for (let i = 0; i < 5; i++) {
        const row = document.getElementById('row-' + i);
        const pt = document.getElementById('pt-' + i);
        if (row) row.classList.remove('row-active');
        if (pt) pt.classList.remove('selected');
      }
      document.getElementById('guide-group').style.display = 'none';
      document.getElementById('tooltip-group').style.display = 'none';
    }

    function selectPoint(idx) {
      if (currentStep < 3) {
        goToStep(3);
      }

      if (selectedIdx === idx) {
        selectedIdx = -1;
        clearHighlight();
        return;
      }

      selectedIdx = idx;
      clearHighlight();

      const p = pointsData[idx];

      // Highlight Table Row & Circle
      document.getElementById('row-' + idx).classList.add('row-active');
      document.getElementById('pt-' + idx).classList.add('selected');

      // Draw guides
      const guideGroup = document.getElementById('guide-group');
      const gx = document.getElementById('guide-x');
      const gy = document.getElementById('guide-y');

      gx.setAttribute('x1', p.cx);
      gx.setAttribute('y1', p.cy);
      gx.setAttribute('x2', p.cx);
      gx.setAttribute('y2', 240);

      gy.setAttribute('x1', 60);
      gy.setAttribute('y1', p.cy);
      gy.setAttribute('x2', p.cx);
      gy.setAttribute('y2', p.cy);

      guideGroup.style.display = 'inline';

      // Tooltip positioning
      const tooltip = document.getElementById('tooltip-group');
      const tipBg = document.getElementById('tip-bg');
      const tipVal = document.getElementById('tip-val');

      tipVal.textContent = '(' + p.temp + '°F, ' + p.sales + ' cups)';

      const boxW = 106;
      let tipX = p.cx - boxW / 2;
      let tipY = p.cy - 28;

      if (tipX < 65) tipX = 65;
      if (tipX + boxW > 440) tipX = 440 - boxW;

      tipBg.setAttribute('x', tipX);
      tipBg.setAttribute('y', tipY);
      tipVal.setAttribute('x', tipX + boxW / 2);
      tipVal.setAttribute('y', tipY + 15);

      tooltip.style.display = 'inline';
    }

    // Initialize at step 1
    goToStep(1);
  </script>
</body>
</html>

Constructing and Interpreting Scatter Plots for Bivariate Quantitative 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">
  <title>Bivariate Paired Data</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-container {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .content-row {
      display: flex;
      flex-direction: row;
      gap: 12px;
      align-items: stretch;
      justify-content: center;
    }

    @media (max-width: 480px) {
      .content-row {
        flex-direction: column;
        align-items: center;
      }
    }

    /* Left Table Panel */
    .table-panel {
      flex: 1;
      min-width: 200px;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }

    th {
      text-align: left;
      padding: 6px 4px;
      color: #64748b;
      font-weight: 600;
      border-bottom: 1px solid #e2e8f0;
      font-size: 11px;
    }

    th.num, td.num {
      text-align: center;
    }

    tr.row-item {
      cursor: pointer;
      transition: background 0.2s ease;
      border-radius: 6px;
    }

    tr.row-item td {
      padding: 6px 4px;
      border-bottom: 1px solid #f1f5f9;
      font-weight: 500;
    }

    tr.row-item:hover {
      background: #f1f5f9;
    }

    tr.row-item.active-0 { background: #eff6ff; }
    tr.row-item.active-1 { background: #ecfdf5; }
    tr.row-item.active-2 { background: #fffbeb; }
    tr.row-item.active-3 { background: #faf5ff; }

    .tag {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
    }

    /* Right Graph Panel */
    .graph-panel {
      flex: 1.3;
      min-width: 240px;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    .tick-label {
      font-size: 9.5px;
      fill: #64748b;
      text-anchor: middle;
      font-family: inherit;
    }

    .axis-title {
      font-size: 10.5px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      font-family: inherit;
    }

    .guide-line {
      stroke-dasharray: 3, 3;
      stroke-width: 1.5;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .plot-dot {
      cursor: pointer;
      transition: r 0.25s ease, opacity 0.25s ease;
    }

    .plot-label {
      font-size: 10px;
      font-weight: 700;
      text-anchor: middle;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

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

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 5px 9px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="main-container">
    <div class="content-row">
      
      <div class="table-panel">
        <table>
          <thead>
            <tr>
              <th>Student</th>
              <th class="num">Time (x)</th>
              <th class="num">Score (y)</th>
            </tr>
          </thead>
          <tbody>
            <tr class="row-item" id="row-0" onclick="selectStudent(0)">
              <td><span class="tag" style="background:#2563eb;"></span>Alex</td>
              <td class="num">2 hrs</td>
              <td class="num">74 pts</td>
            </tr>
            <tr class="row-item" id="row-1" onclick="selectStudent(1)">
              <td><span class="tag" style="background:#059669;"></span>Bea</td>
              <td class="num">4 hrs</td>
              <td class="num">82 pts</td>
            </tr>
            <tr class="row-item" id="row-2" onclick="selectStudent(2)">
              <td><span class="tag" style="background:#d97706;"></span>Carlos</td>
              <td class="num">5 hrs</td>
              <td class="num">90 pts</td>
            </tr>
            <tr class="row-item" id="row-3" onclick="selectStudent(3)">
              <td><span class="tag" style="background:#7c3aed;"></span>Dana</td>
              <td class="num">7 hrs</td>
              <td class="num">96 pts</td>
            </tr>
          </tbody>
        </table>
        <div style="font-size: 11px; color: #64748b; margin-top: 4px; text-align: center;">
          Each row is one paired point (x, y)
        </div>
      </div>

      
      <div class="graph-panel">
        <svg viewBox="0 0 270 210">
          
          <line class="grid-line" x1="40" y1="170" x2="250" y2="170"></line>
          <line class="grid-line" x1="40" y1="132.5" x2="250" y2="132.5"></line>
          <line class="grid-line" x1="40" y1="95" x2="250" y2="95"></line>
          <line class="grid-line" x1="40" y1="57.5" x2="250" y2="57.5"></line>
          <line class="grid-line" x1="40" y1="20" x2="250" y2="20"></line>

          
          <line class="grid-line" x1="40" y1="20" x2="40" y2="170"></line>
          <line class="grid-line" x1="92.5" y1="20" x2="92.5" y2="170"></line>
          <line class="grid-line" x1="145" y1="20" x2="145" y2="170"></line>
          <line class="grid-line" x1="197.5" y1="20" x2="197.5" y2="170"></line>
          <line class="grid-line" x1="250" y1="20" x2="250" y2="170"></line>

          
          <line class="axis-line" x1="40" y1="170" x2="255" y2="170"></line>
          <line class="axis-line" x1="40" y1="170" x2="40" y2="15"></line>

          
          <text class="tick-label" x="32" y="173">60</text>
          <text class="tick-label" x="32" y="136">70</text>
          <text class="tick-label" x="32" y="98.5">80</text>
          <text class="tick-label" x="32" y="61">90</text>
          <text class="tick-label" x="32" y="23.5">100</text>

          
          <text class="tick-label" x="40" y="184">0</text>
          <text class="tick-label" x="92.5" y="184">2</text>
          <text class="tick-label" x="145" y="184">4</text>
          <text class="tick-label" x="197.5" y="184">6</text>
          <text class="tick-label" x="250" y="184">8</text>

          
          <text class="axis-title" x="145" y="202">Study Time (hours, x)</text>
          <text class="axis-title" transform="rotate(-90 12 95)" x="12" y="95">Score (pts, y)</text>

          
          
          <line id="guide-x-0" class="guide-line" stroke="#2563eb" x1="92.5" y1="170" x2="92.5" y2="117.5"></line>
          <line id="guide-y-0" class="guide-line" stroke="#2563eb" x1="40" y1="117.5" x2="92.5" y2="117.5"></line>

          
          <line id="guide-x-1" class="guide-line" stroke="#059669" x1="145" y1="170" x2="145" y2="87.5"></line>
          <line id="guide-y-1" class="guide-line" stroke="#059669" x1="40" y1="87.5" x2="145" y2="87.5"></line>

          
          <line id="guide-x-2" class="guide-line" stroke="#d97706" x1="171.25" y1="170" x2="171.25" y2="57.5"></line>
          <line id="guide-y-2" class="guide-line" stroke="#d97706" x1="40" y1="57.5" x2="171.25" y2="57.5"></line>

          
          <line id="guide-x-3" class="guide-line" stroke="#7c3aed" x1="223.75" y1="170" x2="223.75" y2="35"></line>
          <line id="guide-y-3" class="guide-line" stroke="#7c3aed" x1="40" y1="35" x2="223.75" y2="35"></line>

          
          
          <circle id="dot-0" class="plot-dot" cx="92.5" cy="117.5" r="5.5" fill="#2563eb" onclick="selectStudent(0)"></circle>
          <text id="lbl-0" class="plot-label" x="92.5" y="108" fill="#2563eb">(2, 74)</text>

          
          <circle id="dot-1" class="plot-dot" cx="145" cy="87.5" r="5.5" fill="#059669" onclick="selectStudent(1)"></circle>
          <text id="lbl-1" class="plot-label" x="145" y="78" fill="#059669">(4, 82)</text>

          
          <circle id="dot-2" class="plot-dot" cx="171.25" cy="57.5" r="5.5" fill="#d97706" onclick="selectStudent(2)"></circle>
          <text id="lbl-2" class="plot-label" x="171.25" y="48" fill="#d97706">(5, 90)</text>

          
          <circle id="dot-3" class="plot-dot" cx="223.75" cy="35" r="5.5" fill="#7c3aed" onclick="selectStudent(3)"></circle>
          <text id="lbl-3" class="plot-label" x="223.75" y="25" fill="#7c3aed">(7, 96)</text>
        </svg>
      </div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Auto-play">⏸</button>
      <button class="step-btn" id="btn-all" onclick="selectStudent(-1)">All Data</button>
      <button class="step-btn" id="btn-0" onclick="selectStudent(0)">Alex (2, 74)</button>
      <button class="step-btn" id="btn-1" onclick="selectStudent(1)">Bea (4, 82)</button>
      <button class="step-btn" id="btn-2" onclick="selectStudent(2)">Carlos (5, 90)</button>
      <button class="step-btn" id="btn-3" onclick="selectStudent(3)">Dana (7, 96)</button>
    </div>
  </div>

  <script>
    let currentIdx = -1; // -1 = All, 0 = Alex, 1 = Bea, 2 = Carlos, 3 = Dana
    let isPlaying = true;
    let timer = null;

    function renderState() {
      // Update Buttons
      document.getElementById('btn-all').classList.toggle('active', currentIdx === -1);
      for (let i = 0; i < 4; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', currentIdx === i);
      }

      // Update Table Rows & SVG Elements
      for (let i = 0; i < 4; i++) {
        const row = document.getElementById(`row-${i}`);
        const dot = document.getElementById(`dot-${i}`);
        const lbl = document.getElementById(`lbl-${i}`);
        const gx = document.getElementById(`guide-x-${i}`);
        const gy = document.getElementById(`guide-y-${i}`);

        // Reset classes
        row.className = 'row-item';

        if (currentIdx === -1) {
          // Show all state
          dot.setAttribute('r', '5.5');
          dot.style.opacity = '1';
          lbl.style.opacity = '1';
          gx.style.opacity = '0';
          gy.style.opacity = '0';
        } else if (currentIdx === i) {
          // Active student
          row.classList.add(`active-${i}`);
          dot.setAttribute('r', '7.5');
          dot.style.opacity = '1';
          lbl.style.opacity = '1';
          gx.style.opacity = '1';
          gy.style.opacity = '1';
        } else {
          // Dimmed student
          dot.setAttribute('r', '4');
          dot.style.opacity = '0.3';
          lbl.style.opacity = '0';
          gx.style.opacity = '0';
          gy.style.opacity = '0';
        }
      }
    }

    function selectStudent(idx) {
      currentIdx = idx;
      renderState();
    }

    function nextStep() {
      currentIdx++;
      if (currentIdx > 3) {
        currentIdx = -1;
      }
      renderState();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3200);
    }

    // Initial render
    renderState();
    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: 6px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    @media (max-width: 550px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .panel {
      background: #ffffff;
      border-radius: 10px;
      border: 1.5px solid #e2e8f0;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel.bad {
      border-color: #fca5a5;
      background: #fff8f8;
    }
    .panel.good {
      border-color: #86efac;
      background: #f6fdf8;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 12px;
      margin-bottom: 4px;
    }
    .bad .badge {
      color: #dc2626;
      background: #fee2e2;
    }
    .good .badge {
      color: #15803d;
      background: #dcfce7;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 230px;
      display: block;
      overflow: visible;
    }
    .axis-line {
      stroke: #1e2945;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .grid-line {
      stroke-width: 1;
      stroke-dasharray: 2 2;
    }
    .bad .grid-line {
      stroke: #fecaca;
    }
    .good .grid-line {
      stroke: #e2e8f0;
    }
    .tick-label {
      font-size: 11px;
      fill: #1e2945;
      font-family: inherit;
      text-anchor: middle;
      dominant-baseline: middle;
      font-weight: 600;
    }
    .bad .tick-label {
      fill: #b91c1c;
    }
    .axis-title {
      font-size: 11.5px;
      font-weight: 700;
      fill: #1e2945;
      font-family: inherit;
      text-anchor: middle;
    }
    .pt-bad {
      fill: #ef4444;
      stroke: #b91c1c;
      stroke-width: 1.5;
      cursor: pointer;
    }
    .pt-bad:hover {
      fill: #b91c1c;
      stroke: #7f1d1d;
    }
    .pt-good {
      fill: #0ea5e9;
      stroke: #0284c7;
      stroke-width: 1.5;
      cursor: pointer;
    }
    .pt-good:hover {
      fill: #0284c7;
      stroke: #0369a1;
    }
    .squish-box {
      fill: rgba(239, 68, 68, 0.08);
      stroke: #f87171;
      stroke-width: 1.2;
      stroke-dasharray: 3 3;
      rx: 4;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="panel bad">
      <div class="badge">✕ Incorrect Scale Setup</div>
      <svg viewBox="0 0 250 195" aria-label="Incorrect scale setup with uneven intervals and missing labels">
        
        <line class="grid-line" x1="42" y1="130" x2="235" y2="130" />
        <line class="grid-line" x1="42" y1="100" x2="235" y2="100" />
        <line class="grid-line" x1="42" y1="70" x2="235" y2="70" />
        <line class="grid-line" x1="42" y1="40" x2="235" y2="40" />

        <line class="grid-line" x1="88" y1="20" x2="88" y2="160" />
        <line class="grid-line" x1="134" y1="20" x2="134" y2="160" />
        <line class="grid-line" x1="180" y1="20" x2="180" y2="160" />
        <line class="grid-line" x1="226" y1="20" x2="226" y2="160" />

        
        <line class="axis-line" x1="42" y1="160" x2="238" y2="160" />
        <line class="axis-line" x1="42" y1="160" x2="42" y2="18" />

        
        <polygon points="241,160 234,156 234,164" fill="#1e2945" />
        <polygon points="42,15 38,22 46,22" fill="#1e2945" />

        
        <text class="tick-label" x="88" y="174">2</text>
        <text class="tick-label" x="134" y="174">7</text>
        <text class="tick-label" x="180" y="174">13</text>
        <text class="tick-label" x="226" y="174">29</text>

        
        <text class="tick-label" x="26" y="130">4</text>
        <text class="tick-label" x="26" y="100">9</text>
        <text class="tick-label" x="26" y="70">18</text>
        <text class="tick-label" x="26" y="40">30</text>

        
        <rect class="squish-box" x="76" y="88" width="70" height="52" />

        
        <circle class="pt-bad" cx="88" cy="130" r="5" />
        <circle class="pt-bad" cx="98" cy="122" r="5" />
        <circle class="pt-bad" cx="134" cy="100" r="5" />
        <circle class="pt-bad" cx="180" cy="70" r="5" />
        <circle class="pt-bad" cx="226" cy="40" r="5" />

        
        <text x="138" y="148" text-anchor="middle" font-size="10" font-weight="700" fill="#dc2626">No Units • Unequal Increments</text>
        <text x="138" y="188" text-anchor="middle" font-size="9.5" font-style="italic" fill="#991b1b">Axes just list raw data values</text>
      </svg>
    </div>

    
    <div class="panel good">
      <div class="badge">✓ Correct Scale Setup</div>
      <svg viewBox="0 0 250 195" aria-label="Correct scale setup with uniform intervals and labeled axes">
        
        <line class="grid-line" x1="42" y1="130" x2="235" y2="130" />
        <line class="grid-line" x1="42" y1="100" x2="235" y2="100" />
        <line class="grid-line" x1="42" y1="70" x2="235" y2="70" />
        <line class="grid-line" x1="42" y1="40" x2="235" y2="40" />

        <line class="grid-line" x1="88" y1="20" x2="88" y2="160" />
        <line class="grid-line" x1="134" y1="20" x2="134" y2="160" />
        <line class="grid-line" x1="180" y1="20" x2="180" y2="160" />
        <line class="grid-line" x1="226" y1="20" x2="226" y2="160" />

        
        <line class="axis-line" x1="42" y1="160" x2="238" y2="160" />
        <line class="axis-line" x1="42" y1="160" x2="42" y2="18" />

        
        <polygon points="241,160 234,156 234,164" fill="#1e2945" />
        <polygon points="42,15 38,22 46,22" fill="#1e2945" />

        
        <text class="tick-label" x="42" y="171">0</text>
        <text class="tick-label" x="88" y="171">10</text>
        <text class="tick-label" x="134" y="171">20</text>
        <text class="tick-label" x="180" y="171">30</text>
        <text class="tick-label" x="226" y="171">40</text>

        <text class="tick-label" x="28" y="160">0</text>
        <text class="tick-label" x="28" y="130">10</text>
        <text class="tick-label" x="28" y="100">20</text>
        <text class="tick-label" x="28" y="70">30</text>
        <text class="tick-label" x="28" y="40">40</text>

        
        
        <circle class="pt-good" cx="51" cy="148" r="5" />
        <circle class="pt-good" cx="74" cy="133" r="5" />
        <circle class="pt-good" cx="102" cy="106" r="5" />
        <circle class="pt-good" cx="134" cy="94" r="5" />
        <circle class="pt-good" cx="175" cy="70" r="5" />
        <circle class="pt-good" cx="208" cy="49" r="5" />

        
        <text class="axis-title" x="138" y="188">Temperature (°F)</text>
        <text class="axis-title" x="-90" y="12" transform="rotate(-90)">Smoothies Sold (cups)</text>
      </svg>
    </div>
  </div>

</body>
</html>

Identifying Direction and Strength in Linear Associations

Identifying Non-Linear Patterns in Scatter Plots

Detecting Clusters and Outliers in Bivariate Data

Informally Fitting a Trend Line to Scatter Plot Data

Writing the Linear Equation of a Trend Line

Interpreting Slope and y-Intercept in Real-World Context

Making Predictions Using Linear Models: Interpolation and Extrapolation

math

Bivariate Data: Scatter Plots and Trend Lines

Understanding Proportional Relationships

Graphing Proportional Relationships

Unit Rate as Slope

Finding Slope from a Graph

Finding Slope from Two Points

Proportional Relationships and Slope

Introduction to Bivariate Data

Creating Scatter Plots from Data

Identifying Linear Patterns in Scatter Plots

Contrasting Linear and Non-Linear Bivariate Data

Positive Correlation in Scatter Plots

Negative Correlation in Scatter Plots

No Correlation in Scatter Plots

Strength of Association in Scatter Plots

Scatter Plots and Bivariate Relationships

Drawing Trend Lines to Approximate Linear Relationships

Making Predictions from Trend Lines

Writing Equations of Trend Lines

Evaluating Predictions for Reasonableness

Using Technology to Analyze Bivariate Data

Introduction to Two-Way Frequency Tables

Bivariate Data and Statistics Review

Making Predictions with Bivariate Data

Interpreting Rate of Change in Real-World Contexts

Interpreting Slope in Real-World Linear Models

Interpreting Slope in Linear Models

Using Fitted Functions to Solve Real-World Problems

Analyzing Graphs: Increasing and Decreasing

Describing Functional Relationships from Graphs

Sketching Graphs from Verbal Descriptions

Modeling with Linear Equations: Distance, Rate, and Time

Real-World Linear Function Problems

Interpreting and Applying Linear Models

Tablas de contingencia o doble entrada

Frecuencias relativas marginales y condicionales

Diagramas de dispersión y asociación entre variables

Tipo de correlación lineal: positiva, negativa y nula

Recta de tendencia o de mejor ajuste

Interpolación y extrapolación con la recta de ajuste

Diferencia entre correlación y causalidad

Distorsión y manipulación en gráficos estadísticos (medios de comunicación)

OGM.9.SP.3

Aligned learning resources

Related diagrams