Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Does eating more popsicles make you taller, or do hotter days just help sell more ice pops?

To spot patterns between two things, we collect pairs of numbers called **bivariate data** and turn them into dots on a **scatter graph**.

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
      user-select: none;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }

    @media (max-width: 440px) {
      .main-layout {
        flex-direction: column;
        gap: 10px;
      }
    }

    /* Data Table */
    .table-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    table {
      border-collapse: collapse;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      font-size: 13px;
      text-align: center;
    }

    th {
      background: #f1f5f9;
      color: #64748b;
      padding: 6px 12px;
      font-weight: 600;
    }

    td {
      padding: 6px 12px;
      border-top: 1px solid #f1f5f9;
      font-weight: 500;
      color: #334155;
      transition: background 0.2s ease, color 0.2s ease;
      cursor: pointer;
    }

    tr.active-row td {
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 700;
    }

    /* Graph Area */
    .graph-container {
      position: relative;
      width: 230px;
      height: 230px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      padding: 10px;
    }

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

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

    .axis {
      stroke: #64748b;
      stroke-width: 1.5;
      stroke-linecap: round;
    }

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

    .tick-label {
      font-size: 8px;
      fill: #94a3b8;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    /* Plotting Elements */
    .guide-line {
      stroke: #38bdf8;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .guide-line.visible {
      opacity: 1;
    }

    .data-point {
      fill: #94a3b8;
      r: 3.5;
      transition: all 0.3s ease;
    }

    .data-point.plotted {
      fill: #0284c7;
      r: 4.5;
    }

    .data-point.active {
      fill: #0284c7;
      r: 6;
      filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.5));
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .btn:active {
      background: #f8fafc;
    }

    .stepper-dots {
      display: flex;
      gap: 5px;
    }

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

    .dot.active {
      background: #0284c7;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th><i>x</i></th>
            <th><i>y</i></th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <tr data-idx="0"><td>2</td><td>3</td></tr>
          <tr data-idx="1"><td>4</td><td>6</td></tr>
          <tr data-idx="2"><td>5</td><td>5</td></tr>
          <tr data-idx="3"><td>7</td><td>8</td></tr>
          <tr data-idx="4"><td>9</td><td>9</td></tr>
        </tbody>
      </table>
    </div>

    
    <div class="graph-container">
      <svg viewBox="0 0 200 200">
        
        
        <g>
          <line class="grid-line" x1="60" y1="20" x2="60" y2="170" />
          <line class="grid-line" x1="90" y1="20" x2="90" y2="170" />
          <line class="grid-line" x1="120" y1="20" x2="120" y2="170" />
          <line class="grid-line" x1="150" y1="20" x2="150" y2="170" />
          <line class="grid-line" x1="180" y1="20" x2="180" y2="170" />

          <line class="grid-line" x1="30" y1="140" x2="180" y2="140" />
          <line class="grid-line" x1="30" y1="110" x2="180" y2="110" />
          <line class="grid-line" x1="30" y1="80" x2="180" y2="80" />
          <line class="grid-line" x1="30" y1="50" x2="180" y2="50" />
          <line class="grid-line" x1="30" y1="20" x2="180" y2="20" />
        </g>

        
        <line id="guideX" class="guide-line" x1="30" y1="170" x2="30" y2="170" />
        <line id="guideY" class="guide-line" x1="30" y1="170" x2="30" y2="170" />

        
        <line class="axis" x1="28" y1="170" x2="188" y2="170" />
        <line class="axis" x1="30" y1="172" x2="30" y2="12" />

        
        <text class="tick-label" x="30" y="180">0</text>
        <text class="tick-label" x="60" y="180">2</text>
        <text class="tick-label" x="90" y="180">4</text>
        <text class="tick-label" x="120" y="180">6</text>
        <text class="tick-label" x="150" y="180">8</text>
        <text class="tick-label" x="180" y="180">10</text>

        <text class="tick-label" x="20" y="140">2</text>
        <text class="tick-label" x="20" y="110">4</text>
        <text class="tick-label" x="20" y="80">6</text>
        <text class="tick-label" x="20" y="50">8</text>
        <text class="tick-label" x="18" y="20">10</text>

        
        <text class="axis-label" x="190" y="173" alignment-baseline="middle"><i>x</i></text>
        <text class="axis-label" x="30" y="7" text-anchor="middle"><i>y</i></text>

        
        <circle id="pt0" class="data-point" cx="60" cy="125" />
        <circle id="pt1" class="data-point" cx="90" cy="80" />
        <circle id="pt2" class="data-point" cx="105" cy="95" />
        <circle id="pt3" class="data-point" cx="135" cy="50" />
        <circle id="pt4" class="data-point" cx="165" cy="35" />
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn">⏸</button>
    <div class="stepper-dots">
      <div class="dot active" data-idx="0"></div>
      <div class="dot" data-idx="1"></div>
      <div class="dot" data-idx="2"></div>
      <div class="dot" data-idx="3"></div>
      <div class="dot" data-idx="4"></div>
    </div>
  </div>

  <script>
    const pointsData = [
      { x: 2, y: 3, svgX: 60, svgY: 125 },
      { x: 4, y: 6, svgX: 90, svgY: 80 },
      { x: 5, y: 5, svgX: 105, svgY: 95 },
      { x: 7, y: 8, svgX: 135, svgY: 50 },
      { x: 9, y: 9, svgX: 165, svgY: 35 }
    ];

    let currentIndex = 0;
    let isPlaying = true;
    let timer = null;

    const rows = document.querySelectorAll('#tableBody tr');
    const dots = document.querySelectorAll('.dot');
    const guideX = document.getElementById('guideX');
    const guideY = document.getElementById('guideY');
    const playBtn = document.getElementById('playBtn');

    function showStep(index) {
      currentIndex = index;
      const pt = pointsData[index];

      // Update table rows
      rows.forEach((r, i) => {
        r.classList.toggle('active-row', i === index);
      });

      // Update pagination dots
      dots.forEach((d, i) => {
        d.classList.toggle('active', i === index);
      });

      // Update Points appearance
      pointsData.forEach((_, i) => {
        const el = document.getElementById('pt' + i);
        el.classList.remove('active');
        if (i <= index) {
          el.classList.add('plotted');
        } else {
          el.classList.remove('plotted');
        }
      });

      const currentDot = document.getElementById('pt' + index);
      currentDot.classList.add('active');

      // Update Projection Guide Lines
      // Vertical guide from (svgX, 170) to (svgX, svgY)
      guideX.setAttribute('x1', pt.svgX);
      guideX.setAttribute('y1', 170);
      guideX.setAttribute('x2', pt.svgX);
      guideX.setAttribute('y2', pt.svgY);
      guideX.classList.add('visible');

      // Horizontal guide from (30, svgY) to (svgX, svgY)
      guideY.setAttribute('x1', 30);
      guideY.setAttribute('y1', pt.svgY);
      guideY.setAttribute('x2', pt.svgX);
      guideY.setAttribute('y2', pt.svgY);
      guideY.classList.add('visible');
    }

    function nextStep() {
      const next = (currentIndex + 1) % pointsData.length;
      showStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Tap table row
    rows.forEach(r => {
      r.addEventListener('click', () => {
        pauseAutoPlay();
        showStep(parseInt(r.dataset.idx, 10));
      });
    });

    // Tap pagination dots
    dots.forEach(d => {
      d.addEventListener('click', () => {
        pauseAutoPlay();
        showStep(parseInt(d.dataset.idx, 10));
      });
    });

    // Initialize
    showStep(0);
    startAutoPlay();
  </script>
</body>
</html>

How do we turn those pairs of numbers into a clear picture?

We draw two number lines that meet at zero: the flat line across is the **x-axis**, and the tall line going straight up is the **y-axis**.

On graph paper, axes must be uniformly numbered along grid lines so each square represents the same jump, known as the **scale**.

Always label both axes with the variable name and unit of measurement, such as **Temperature ($^\circ\text{C}$)** on the horizontal $x$-axis and **Ice Cream Sales (£)** on the vertical $y$-axis.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }
    body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: #1e2945;
    }
    .main-wrap {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .table-container {
      display: flex;
      justify-content: center;
      gap: 6px;
      overflow-x: auto;
    }
    .data-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 10px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      min-width: 54px;
    }
    .data-row.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }
    .data-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    .data-val {
      font-size: 14px;
      font-weight: 700;
    }
    .val-x { color: #0284c7; }
    .val-y { color: #059669; }

    .graph-box {
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      padding: 8px;
      display: flex;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 240px;
      overflow: visible;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .axis-label {
      font-size: 10px;
      fill: #64748b;
      text-anchor: middle;
      font-weight: 500;
    }
    .guide-line {
      stroke-dasharray: 4 3;
      stroke-width: 1.5;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .guide-x { stroke: #0284c7; }
    .guide-y { stroke: #059669; }
    .plot-dot {
      fill: #22b7ff;
      stroke: #ffffff;
      stroke-width: 2;
      transition: r 0.25s ease, opacity 0.3s ease;
    }
    .plot-dot.active {
      fill: #0284c7;
      r: 6.5;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .btn:hover {
      background: #f8fafc;
    }
    .coord-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      background: #e0f2fe;
      color: #0369a1;
      min-width: 70px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="table-container" id="tableContainer">
    
  </div>

  
  <div class="graph-box">
    <svg viewBox="0 0 320 200" id="scatterPlot">
      
      <g id="gridGroup"></g>
      
      
      <line id="guideX" class="guide-line guide-x" x1="0" y1="0" x2="0" y2="0" />
      <line id="guideY" class="guide-line guide-y" x1="0" y1="0" x2="0" y2="0" />

      
      <g id="dotsGroup"></g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <div class="coord-badge" id="coordBadge">(x, y)</div>
    <button class="btn" id="nextBtn">→</button>
    <button class="btn" id="playBtn">▶ Auto</button>
  </div>
</div>

<script>
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 4 },
    { x: 3, y: 5 },
    { x: 5, y: 7 },
    { x: 6, y: 9 }
  ];

  const originX = 35;
  const originY = 175;
  const plotWidth = 265;
  const plotHeight = 155;
  const maxX = 7;
  const maxY = 10;

  function toSvgX(val) {
    return originX + (val / maxX) * plotWidth;
  }
  function toSvgY(val) {
    return originY - (val / maxY) * plotHeight;
  }

  let currentIndex = 0;
  let isPlaying = false;
  let playTimer = null;

  // Build Table
  const tableContainer = document.getElementById('tableContainer');
  data.forEach((pt, i) => {
    const card = document.createElement('div');
    card.className = `data-row ${i === 0 ? 'active' : ''}`;
    card.id = `row-${i}`;
    card.innerHTML = `
      <span class="data-label">Point ${i+1}</span>
      <span class="data-val"><span class="val-x">${pt.x}</span>, <span class="val-y">${pt.y}</span></span>
    `;
    card.addEventListener('click', () => {
      pauseAuto();
      setIndex(i);
    });
    tableContainer.appendChild(card);
  });

  // Build SVG Grid
  const gridGroup = document.getElementById('gridGroup');
  
  // Vertical grid lines & X labels
  for (let x = 0; x <= maxX; x++) {
    const sx = toSvgX(x);
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", sx);
    line.setAttribute("y1", originY);
    line.setAttribute("x2", sx);
    line.setAttribute("y2", originY - plotHeight);
    line.setAttribute("class", x === 0 ? "axis" : "grid-line");
    gridGroup.appendChild(line);

    const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
    txt.setAttribute("x", sx);
    txt.setAttribute("y", originY + 14);
    txt.setAttribute("class", "axis-label");
    txt.textContent = x;
    gridGroup.appendChild(txt);
  }

  // Horizontal grid lines & Y labels
  for (let y = 0; y <= maxY; y += 2) {
    const sy = toSvgY(y);
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", originX);
    line.setAttribute("y1", sy);
    line.setAttribute("x2", originX + plotWidth);
    line.setAttribute("y2", sy);
    line.setAttribute("class", y === 0 ? "axis" : "grid-line");
    gridGroup.appendChild(line);

    const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
    txt.setAttribute("x", originX - 10);
    txt.setAttribute("y", sy + 3);
    txt.setAttribute("class", "axis-label");
    txt.textContent = y;
    gridGroup.appendChild(txt);
  }

  // Create SVG points
  const dotsGroup = document.getElementById('dotsGroup');
  data.forEach((pt, i) => {
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", toSvgX(pt.x));
    circle.setAttribute("cy", toSvgY(pt.y));
    circle.setAttribute("r", "5");
    circle.setAttribute("class", "plot-dot");
    circle.setAttribute("id", `dot-${i}`);
    dotsGroup.appendChild(circle);
  });

  const guideX = document.getElementById('guideX');
  const guideY = document.getElementById('guideY');
  const coordBadge = document.getElementById('coordBadge');

  function setIndex(index) {
    currentIndex = (index + data.length) % data.length;
    const cur = data[currentIndex];
    const sx = toSvgX(cur.x);
    const sy = toSvgY(cur.y);

    // Update table highlights
    document.querySelectorAll('.data-row').forEach((r, i) => {
      r.classList.toggle('active', i === currentIndex);
    });

    // Update dots
    document.querySelectorAll('.plot-dot').forEach((d, i) => {
      d.classList.toggle('active', i === currentIndex);
      d.style.opacity = i <= currentIndex ? "1" : "0.2";
    });

    // Animate guide projections
    guideX.setAttribute("x1", sx);
    guideX.setAttribute("y1", originY);
    guideX.setAttribute("x2", sx);
    guideX.setAttribute("y2", sy);
    guideX.style.opacity = "1";

    guideY.setAttribute("x1", originX);
    guideY.setAttribute("y1", sy);
    guideY.setAttribute("x2", sx);
    guideY.setAttribute("y2", sy);
    guideY.style.opacity = "1";

    // Update badge text
    coordBadge.textContent = `(${cur.x}, ${cur.y})`;
  }

  function pauseAuto() {
    isPlaying = false;
    clearInterval(playTimer);
    document.getElementById('playBtn').textContent = '▶ Auto';
  }

  function toggleAuto() {
    if (isPlaying) {
      pauseAuto();
    } else {
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸ Pause';
      playTimer = setInterval(() => {
        setIndex(currentIndex + 1);
      }, 3000);
    }
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    pauseAuto();
    setIndex(currentIndex + 1);
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    pauseAuto();
    setIndex(currentIndex - 1);
  });

  document.getElementById('playBtn').addEventListener('click', toggleAuto);

  // Initialize
  setIndex(0);
</script>

</body>
</html>

Now that our grid is ready, where exactly does each dot go?

Always start at zero: crawl across the floor along the bottom line first, then fly up like an elevator.

<!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>Plotting Scatter Graphs</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Top Bar: Target & Presets */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      margin-bottom: 6px;
      gap: 8px;
    }

    .coord-display {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.5px;
      background: #ffffff;
      padding: 4px 12px;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .x-val { color: #0284c7; }
    .y-val { color: #8b5cf6; }

    .preset-btns {
      display: flex;
      gap: 6px;
    }
    .preset-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .preset-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* SVG Grid Area */
    .grid-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: relative;
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .axis-line { stroke: #1e2945; stroke-width: 2.5; stroke-linecap: round; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1.5; }
    .tick-text { font-size: 12px; fill: #64748b; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
    .axis-title { font-size: 13px; font-weight: 700; }

    /* Animated paths */
    .trail-x {
      stroke: #0284c7;
      stroke-width: 4;
      stroke-linecap: round;
      fill: none;
      transition: stroke-dashoffset 0.6s ease;
    }
    .trail-y {
      stroke: #8b5cf6;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      fill: none;
      transition: stroke-dashoffset 0.6s ease;
    }

    .target-dot {
      fill: #10b981;
      stroke: #ffffff;
      stroke-width: 3;
      filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.4));
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .origin-dot {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 2;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-top: 8px;
    }
    .step-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 7px 4px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      color: #64748b;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .step-btn.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 0 0 1px #22b7ff;
    }
    .play-toggle {
      width: 36px;
      height: 32px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="top-bar">
    <div class="coord-display">
      (<span class="x-val" id="dispX">4</span>, <span class="y-val" id="dispY">3</span>)
    </div>
    <div class="preset-btns">
      <button class="preset-btn active" data-x="4" data-y="3">(4, 3)</button>
      <button class="preset-btn" data-x="2" data-y="5">(2, 5)</button>
      <button class="preset-btn" data-x="5" data-y="2">(5, 2)</button>
    </div>
  </div>

  
  <div class="grid-container">
    <svg viewBox="0 0 360 270">
      <defs>
        
        <marker id="arrow-x" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#0284c7" />
        </marker>
        <marker id="arrow-y" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#8b5cf6" />
        </marker>
      </defs>

      
      
      <line x1="90" y1="20" x2="90" y2="220" class="grid-line" />
      <line x1="140" y1="20" x2="140" y2="220" class="grid-line" />
      <line x1="190" y1="20" x2="190" y2="220" class="grid-line" />
      <line x1="240" y1="20" x2="240" y2="220" class="grid-line" />
      <line x1="290" y1="20" x2="290" y2="220" class="grid-line" />
      <line x1="340" y1="20" x2="340" y2="220" class="grid-line" />

      
      <line x1="40" y1="180" x2="345" y2="180" class="grid-line" />
      <line x1="40" y1="140" x2="345" y2="140" class="grid-line" />
      <line x1="40" y1="100" x2="345" y2="100" class="grid-line" />
      <line x1="40" y1="60"  x2="345" y2="60"  class="grid-line" />
      <line x1="40" y1="20"  x2="345" y2="20"  class="grid-line" />

      
      
      <line x1="40" y1="220" x2="345" y2="220" class="axis-line" />
      
      <line x1="40" y1="220" x2="40" y2="15" class="axis-line" />

      
      <text x="340" y="240" fill="#0284c7" class="axis-title" text-anchor="end">Across (x) →</text>
      <text x="25" y="15" fill="#8b5cf6" class="axis-title" text-anchor="start">↑ Up (y)</text>

      
      
      <text x="40" y="235" class="tick-text">0</text>
      <text x="90" y="235" class="tick-text">1</text>
      <text x="140" y="235" class="tick-text">2</text>
      <text x="190" y="235" class="tick-text">3</text>
      <text x="240" y="235" class="tick-text">4</text>
      <text x="290" y="235" class="tick-text">5</text>
      <text x="340" y="235" class="tick-text">6</text>

      
      <text x="26" y="180" class="tick-text">1</text>
      <text x="26" y="140" class="tick-text">2</text>
      <text x="26" y="100" class="tick-text">3</text>
      <text x="26" y="60" class="tick-text">4</text>
      <text x="26" y="20" class="tick-text">5</text>

      
      
      <path id="pathX" d="M 40 220 L 240 220" class="trail-x" marker-end="url(#arrow-x)" />

      
      <path id="pathY" d="M 240 220 L 240 100" class="trail-y" marker-end="url(#arrow-y)" />

      
      <circle cx="40" cy="220" r="5" class="origin-dot" />

      
      <circle id="dotTarget" cx="240" cy="100" r="7" class="target-dot" />
    </svg>
  </div>

  
  <div class="controls">
    <button class="play-toggle" id="playBtn" title="Play / Pause">⏸</button>
    <button class="step-btn active" data-step="0">1. Origin (0,0)</button>
    <button class="step-btn" data-step="1">2. Across (x)</button>
    <button class="step-btn" data-step="2">3. Up (y)</button>
    <button class="step-btn" data-step="3">4. Plot Point</button>
  </div>

  <script>
    // State
    let currentX = 4;
    let currentY = 3;
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    // Coordinate to SVG mapping
    // X: 0 -> 40, 1 -> 90 (+50/unit)
    // Y: 0 -> 220, 1 -> 180 (-40/unit)
    function svgCoords(gx, gy) {
      return {
        x: 40 + gx * 50,
        y: 220 - gy * 40
      };
    }

    const pathX = document.getElementById('pathX');
    const pathY = document.getElementById('pathY');
    const dotTarget = document.getElementById('dotTarget');
    const dispX = document.getElementById('dispX');
    const dispY = document.getElementById('dispY');
    const stepBtns = document.querySelectorAll('.step-btn');
    const presetBtns = document.querySelectorAll('.preset-btn');
    const playBtn = document.getElementById('playBtn');

    function updateVisuals() {
      const target = svgCoords(currentX, currentY);
      const startX = 40;
      const startY = 220;

      // Update paths geometry
      pathX.setAttribute('d', `M ${startX} ${startY} L ${target.x} ${startY}`);
      pathY.setAttribute('d', `M ${target.x} ${startY} L ${target.x} ${target.y}`);
      dotTarget.setAttribute('cx', target.x);
      dotTarget.setAttribute('cy', target.y);

      dispX.textContent = currentX;
      dispY.textContent = currentY;

      // Calculate path lengths for animated reveal
      const lenX = target.x - startX;
      const lenY = startY - target.y;

      pathX.style.strokeDasharray = lenX;
      pathY.style.strokeDasharray = `6 6`;

      // Apply step states
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      if (currentStep === 0) {
        pathX.style.opacity = '0';
        pathY.style.opacity = '0';
        dotTarget.style.opacity = '0';
        dotTarget.style.transform = 'scale(0)';
      } else if (currentStep === 1) {
        pathX.style.opacity = '1';
        pathX.style.strokeDashoffset = '0';
        pathY.style.opacity = '0';
        dotTarget.style.opacity = '0';
        dotTarget.style.transform = 'scale(0)';
      } else if (currentStep === 2) {
        pathX.style.opacity = '1';
        pathX.style.strokeDashoffset = '0';
        pathY.style.opacity = '1';
        dotTarget.style.opacity = '0';
        dotTarget.style.transform = 'scale(0)';
      } else if (currentStep === 3) {
        pathX.style.opacity = '1';
        pathX.style.strokeDashoffset = '0';
        pathY.style.opacity = '1';
        dotTarget.style.opacity = '1';
        dotTarget.style.transform = 'scale(1)';
      }
    }

    function setStep(step) {
      currentStep = step;
      updateVisuals();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateVisuals();
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    // Step button clicks
    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        setStep(parseInt(btn.dataset.step, 10));
      });
    });

    // Preset button clicks
    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        presetBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentX = parseInt(btn.dataset.x, 10);
        currentY = parseInt(btn.dataset.y, 10);
        currentStep = 0;
        updateVisuals();
        startAutoPlay();
      });
    });

    // Play/Pause toggle
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initialize
    updateVisuals();
    startAutoPlay();
  </script>
</body>
</html>

A common mix-up is switching the numbers by going up before going across.

Remember: in the alphabet, $x$ comes before $y$, so you always move along the **x-axis** before climbing the **y-axis**.

<!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>Plotting Scatter Graphs</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 8px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-layout {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Table / selector row */
  .data-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
  }

  .data-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 4px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .data-card:hover {
    border-color: #94a3b8;
  }

  .data-card.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    box-shadow: 0 0 0 1px #22b7ff;
  }

  .data-card.plotted {
    background: #f8fafc;
  }

  .coord-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
  }

  .coord-breakdown {
    font-size: 11px;
    color: #64748b;
  }
  .coord-breakdown .x-val { color: #2563eb; font-weight: 600; }
  .coord-breakdown .y-val { color: #16a34a; font-weight: 600; }

  /* Graph container */
  .graph-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 6px;
    position: relative;
  }

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

  /* Controls */
  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
  }

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

  .btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
  }

  .btn-primary {
    background: #22b7ff;
    color: #ffffff;
    border-color: #0284c7;
  }
  .btn-primary:hover {
    background: #0ea5e9;
  }

  .legend {
    display: flex;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
  }
  .leg-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .leg-x { color: #2563eb; }
  .leg-y { color: #16a34a; }
  .leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
</style>
</head>
<body>

<div class="main-layout">
  
  <div class="data-strip" id="strip">
    <div class="data-card active" data-idx="0">
      <div class="coord-label">(10, 6)</div>
      <div class="coord-breakdown"><span class="x-val">10</span>, <span class="y-val">6</span></div>
    </div>
    <div class="data-card" data-idx="1">
      <div class="coord-label">(20, 13)</div>
      <div class="coord-breakdown"><span class="x-val">20</span>, <span class="y-val">13</span></div>
    </div>
    <div class="data-card" data-idx="2">
      <div class="coord-label">(30, 17)</div>
      <div class="coord-breakdown"><span class="x-val">30</span>, <span class="y-val">17</span></div>
    </div>
    <div class="data-card" data-idx="3">
      <div class="coord-label">(45, 24)</div>
      <div class="coord-breakdown"><span class="x-val">45</span>, <span class="y-val">24</span></div>
    </div>
    <div class="data-card" data-idx="4">
      <div class="coord-label">(55, 28)</div>
      <div class="coord-breakdown"><span class="x-val">55</span>, <span class="y-val">28</span></div>
    </div>
  </div>

  
  <div class="graph-wrapper">
    <svg viewBox="0 0 400 270" aria-label="Scatter graph plotting diagram">
      <defs>
        <marker id="arrow-x" viewBox="0 0 10 10" refX="6" 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="#2563eb" />
        </marker>
        <marker id="arrow-y" viewBox="0 0 10 10" refX="6" 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="#16a34a" />
        </marker>
        <marker id="axis-arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#64748b" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1.5">
        
        <line x1="105" y1="25" x2="105" y2="225" />
        <line x1="155" y1="25" x2="155" y2="225" />
        <line x1="205" y1="25" x2="205" y2="225" />
        <line x1="255" y1="25" x2="255" y2="225" />
        <line x1="305" y1="25" x2="305" y2="225" />
        <line x1="355" y1="25" x2="355" y2="225" />

        
        <line x1="55" y1="190" x2="365" y2="190" />
        <line x1="55" y1="155" x2="365" y2="155" />
        <line x1="55" y1="120" x2="365" y2="120" />
        <line x1="55" y1="85"  x2="365" y2="85" />
        <line x1="55" y1="50"  x2="365" y2="50" />
      </g>

      
      
      <line x1="55" y1="225" x2="55" y2="20" stroke="#64748b" stroke-width="2" marker-end="url(#axis-arrow)" />
      
      <line x1="55" y1="225" x2="375" y2="225" stroke="#64748b" stroke-width="2" marker-end="url(#axis-arrow)" />

      
      <g font-size="10" fill="#64748b" text-anchor="end" font-family="sans-serif">
        <text x="47" y="228">0</text>
        <text x="47" y="193">5</text>
        <text x="47" y="158">10</text>
        <text x="47" y="123">15</text>
        <text x="47" y="88">20</text>
        <text x="47" y="53">25</text>
        <text x="47" y="23">30</text>
      </g>

      
      <g font-size="10" fill="#64748b" text-anchor="middle" font-family="sans-serif">
        <text x="105" y="240">10</text>
        <text x="155" y="240">20</text>
        <text x="205" y="240">30</text>
        <text x="255" y="240">40</text>
        <text x="305" y="240">50</text>
        <text x="355" y="240">60</text>
      </g>

      
      <text x="375" y="240" font-size="11" font-weight="700" fill="#2563eb" text-anchor="end">Time (min) →</text>
      <text x="55" y="12" font-size="11" font-weight="700" fill="#16a34a" text-anchor="start">↑ Pages</text>

      
      
      <line id="guide-x" x1="55" y1="225" x2="55" y2="225" stroke="#2563eb" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow-x)" />
      
      <line id="guide-y" x1="55" y1="225" x2="55" y2="225" stroke="#16a34a" stroke-width="2.5" stroke-dasharray="4 3" marker-end="url(#arrow-y)" opacity="0" />

      
      <text id="step-x-text" x="55" y="217" font-size="11" font-weight="700" fill="#2563eb" text-anchor="middle" opacity="0">1. Across x</text>
      <text id="step-y-text" x="55" y="225" font-size="11" font-weight="700" fill="#16a34a" text-anchor="end" opacity="0">2. Up y</text>

      
      <g id="points-layer"></g>

      
      <g id="active-marker" opacity="0">
        <circle id="pulse-ring" cx="0" cy="0" r="7" fill="none" stroke="#22b7ff" stroke-width="2" opacity="0.8" />
        <circle id="target-dot" cx="0" cy="0" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
        <rect id="label-bg" x="6" y="-18" width="52" height="18" rx="4" fill="#0f172a" opacity="0.9" />
        <text id="target-label" x="32" y="-5" font-size="10" font-weight="700" fill="#ffffff" text-anchor="middle">(10, 6)</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <div class="legend">
      <span class="leg-item leg-x"><span class="leg-dot" style="background:#2563eb;"></span> 1. Across x</span>
      <span class="leg-item leg-y"><span class="leg-dot" style="background:#16a34a;"></span> 2. Up y</span>
    </div>
    <div style="display:flex; gap:6px;">
      <button class="btn" id="prev-btn" title="Previous Point">←</button>
      <button class="btn btn-primary" id="next-btn">Next Point →</button>
    </div>
  </div>
</div>

<script>
  // Exact coordinate mapping
  // Origin (0,0) in SVG is at (55, 225)
  // X: 0 to 60 -> width 300px (5px per min)
  // Y: 0 to 30 -> height 210px (7px per page)
  const ORIGIN_X = 55;
  const ORIGIN_Y = 225;
  const SCALE_X = 5;
  const SCALE_Y = 7;

  const points = [
    { x: 10, y: 6 },
    { x: 20, y: 13 },
    { x: 30, y: 17 },
    { x: 45, y: 24 },
    { x: 55, y: 28 }
  ];

  function getSvgCoords(pt) {
    return {
      cx: ORIGIN_X + pt.x * SCALE_X,
      cy: ORIGIN_Y - pt.y * SCALE_Y
    };
  }

  let currentIndex = 0;
  let animTimer = null;

  const cards = document.querySelectorAll('.data-card');
  const guideX = document.getElementById('guide-x');
  const guideY = document.getElementById('guide-y');
  const stepXText = document.getElementById('step-x-text');
  const stepYText = document.getElementById('step-y-text');
  const pointsLayer = document.getElementById('points-layer');
  const activeMarker = document.getElementById('active-marker');
  const targetLabel = document.getElementById('target-label');
  const labelBg = document.getElementById('label-bg');

  function renderPlottedPoints() {
    pointsLayer.innerHTML = '';
    for (let i = 0; i < currentIndex; i++) {
      const pt = points[i];
      const pos = getSvgCoords(pt);
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      
      const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      dot.setAttribute('cx', pos.cx);
      dot.setAttribute('cy', pos.cy);
      dot.setAttribute('r', '4');
      dot.setAttribute('fill', '#64748b');
      dot.setAttribute('stroke', '#ffffff');
      dot.setAttribute('stroke-width', '1.5');
      
      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', pos.cx);
      txt.setAttribute('y', pos.cy - 7);
      txt.setAttribute('font-size', '9');
      txt.setAttribute('font-weight', '600');
      txt.setAttribute('fill', '#64748b');
      txt.setAttribute('text-anchor', 'middle');
      txt.textContent = `(${pt.x},${pt.y})`;

      g.appendChild(dot);
      g.appendChild(txt);
      pointsLayer.appendChild(g);
    }
  }

  function animateToPoint(index) {
    if (animTimer) clearInterval(animTimer);

    // Update active card
    cards.forEach((c, idx) => {
      c.classList.toggle('active', idx === index);
      c.classList.toggle('plotted', idx < index);
    });

    renderPlottedPoints();

    const pt = points[index];
    const target = getSvgCoords(pt);

    // Reset guides
    guideX.setAttribute('x1', ORIGIN_X);
    guideX.setAttribute('y1', ORIGIN_Y);
    guideX.setAttribute('x2', ORIGIN_X);
    guideX.setAttribute('y2', ORIGIN_Y);

    guideY.setAttribute('x1', target.cx);
    guideY.setAttribute('y1', ORIGIN_Y);
    guideY.setAttribute('x2', target.cx);
    guideY.setAttribute('y2', ORIGIN_Y);
    guideY.setAttribute('opacity', '0');

    stepXText.setAttribute('opacity', '0');
    stepYText.setAttribute('opacity', '0');
    activeMarker.setAttribute('opacity', '0');

    let startTime = performance.now();
    const durationX = 450;
    const durationY = 450;

    function frame(now) {
      const elapsed = now - startTime;

      if (elapsed < durationX) {
        // Stage 1: Move along X
        const t = Math.min(1, elapsed / durationX);
        const ease = 1 - Math.pow(1 - t, 3);
        const curX = ORIGIN_X + (target.cx - ORIGIN_X) * ease;
        guideX.setAttribute('x2', curX);
        
        stepXText.setAttribute('x', (ORIGIN_X + curX) / 2);
        stepXText.setAttribute('opacity', t > 0.1 ? '1' : '0');
        requestAnimationFrame(frame);
      } else if (elapsed < durationX + durationY) {
        // Stage 2: Climb along Y
        guideX.setAttribute('x2', target.cx);
        stepXText.setAttribute('opacity', '1');

        guideY.setAttribute('opacity', '1');
        const tY = Math.min(1, (elapsed - durationX) / durationY);
        const easeY = 1 - Math.pow(1 - tY, 3);
        const curY = ORIGIN_Y + (target.cy - ORIGIN_Y) * easeY;
        guideY.setAttribute('y2', curY);

        stepYText.setAttribute('x', target.cx - 6);
        stepYText.setAttribute('y', (ORIGIN_Y + curY) / 2);
        stepYText.setAttribute('opacity', tY > 0.1 ? '1' : '0');
        requestAnimationFrame(frame);
      } else {
        // Stage 3: Finished, place marker
        guideX.setAttribute('x2', target.cx);
        guideY.setAttribute('y2', target.cy);
        guideY.setAttribute('opacity', '0.6');
        stepXText.setAttribute('opacity', '0.6');
        stepYText.setAttribute('opacity', '0.6');

        activeMarker.setAttribute('transform', `translate(${target.cx}, ${target.cy})`);
        targetLabel.textContent = `(${pt.x}, ${pt.y})`;
        
        // Auto position label if near right edge
        if (target.cx > 320) {
          labelBg.setAttribute('x', '-58');
          targetLabel.setAttribute('x', '-32');
        } else {
          labelBg.setAttribute('x', '6');
          targetLabel.setAttribute('x', '32');
        }

        activeMarker.setAttribute('opacity', '1');
      }
    }

    requestAnimationFrame(frame);
  }

  function goTo(index) {
    currentIndex = (index + points.length) % points.length;
    animateToPoint(currentIndex);
  }

  cards.forEach((card) => {
    card.addEventListener('click', () => {
      const idx = parseInt(card.dataset.idx, 10);
      goTo(idx);
    });
  });

  document.getElementById('next-btn').addEventListener('click', () => {
    goTo(currentIndex + 1);
  });

  document.getElementById('prev-btn').addEventListener('click', () => {
    goTo(currentIndex - 1);
  });

  // Initial plot
  animateToPoint(0);
</script>

</body>
</html>

Try grabbing a piece of grid paper and plotting your own pairs: pick how many minutes you read today and how many pages you finished!

math

Plotting Scatter Graphs from Bivariate Data. Plot pairs of values on a scatter diagram with appropriately scaled axes.

Scatter graphs and correlation - Third and Fourth Level Maths

Constructing a Scatter Plot

Scatter Graphs Practice Questions and Video Tutorial

Note on Curriculum Mapping: While 'Early Level (P1)' corresponds to foundational early numeracy in Scotland's Curriculum for Excellence (CfE), standard MNU 4-20a specifically represents Fourth Level (Broad General Education, S1–S3 / typical ages 12–15), where bivariate data representation, coordinate scaling, and scatter graphs are formally mastered. To teach this objective effectively, instruction must build directly on coordinate plotting fundamentals, scaffold uniform axis calibration with concrete grid examples, and explicitly guard against the impulse to join data points with lines.

Plotting Scatter Graphs from Bivariate Data

Setting Up the Axes

Plotting the Dots