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

Imagine two friends: Sam has 10 stickers, and Mia has 11 stickers. That is almost the exact same amount, right?

Look at what happens when a graph plays a sneaky trick and makes Mia's pile look twice as big as Sam's!

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-wrapper {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Preset controls */
  .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .preset-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
  }

  .preset-btn.active-honest {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
  }

  .preset-btn.active-sneaky {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
  }

  /* Chart Area */
  .chart-card {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    padding: 12px 12px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .ratio-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    transition: background 0.2s, color 0.2s;
  }

  .ratio-honest {
    background: #d1fae5;
    color: #065f46;
  }

  .ratio-sneaky {
    background: #fee2e2;
    color: #991b1b;
  }

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

  .axis-line { stroke: #cbd5e1; stroke-width: 2; }
  .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 3 3; }
  .tick-text { font-size: 12px; fill: #64748b; font-weight: 500; }
  .bar-val { font-size: 13px; font-weight: 700; fill: #1e2945; }
  .bar-name { font-size: 14px; font-weight: 600; fill: #334155; }
  
  .zigzag {
    stroke: #ef4444;
    stroke-width: 2.5;
    fill: none;
    stroke-linejoin: round;
  }

  /* Slider container */
  .slider-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
  }

  .slider-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    min-width: 85px;
  }

  input[type=range] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="main-wrapper">
  <div class="btn-group">
    <button id="btnHonest" class="preset-btn active-honest" onclick="setBaseline(0)">
      <span>✓</span> Start at 0
    </button>
    <button id="btnSneaky" class="preset-btn" onclick="setBaseline(45)">
      <span>⚠️</span> Start at 45
    </button>
  </div>

  <div class="chart-card">
    <div id="ratioBadge" class="ratio-badge ratio-honest">Mia looks 1.1×</div>
    
    <svg viewBox="0 0 320 200" id="chartSvg">
      
      <g id="gridGroup"></g>

      
      <line x1="48" y1="20" x2="48" y2="170" class="axis-line" />
      
      <line x1="48" y1="170" x2="300" y2="170" class="axis-line" />

      
      <g id="yTicksGroup"></g>

      
      <path id="breakPath" class="zigzag" d="M 42 165 L 48 160 L 42 155 L 48 150" opacity="0" />

      
      
      <rect id="barSam" x="80" y="50" width="70" height="120" rx="6" fill="#3b82f6" />
      <text id="valSam" x="115" y="42" text-anchor="middle" class="bar-val">50</text>
      <text x="115" y="188" text-anchor="middle" class="bar-name">Sam</text>

      
      <rect id="barMia" x="185" y="36.25" width="70" height="133.75" rx="6" fill="#ec4899" />
      <text id="valMia" x="220" y="28" text-anchor="middle" class="bar-val">55</text>
      <text x="220" y="188" text-anchor="middle" class="bar-name">Mia</text>
    </svg>
  </div>

  <div class="slider-row">
    <span class="slider-label" id="baselineLabel">Axis: 0</span>
    <input type="range" id="baselineSlider" min="0" max="45" value="0" step="1" oninput="onSlider(this.value)">
  </div>
</div>

<script>
  const MAX_Y = 60;
  const PLOT_TOP = 25;
  const PLOT_BOTTOM = 170;
  const PLOT_HEIGHT = PLOT_BOTTOM - PLOT_TOP;

  const SAM_VAL = 50;
  const MIA_VAL = 55;

  let currentBaseline = 0;

  function render(base) {
    currentBaseline = Number(base);
    const range = MAX_Y - currentBaseline;

    // Sam bar
    const samH = Math.max(4, ((SAM_VAL - currentBaseline) / range) * PLOT_HEIGHT);
    const samY = PLOT_BOTTOM - samH;
    const barSam = document.getElementById('barSam');
    barSam.setAttribute('y', samY);
    barSam.setAttribute('height', samH);
    document.getElementById('valSam').setAttribute('y', samY - 6);

    // Mia bar
    const miaH = Math.max(4, ((MIA_VAL - currentBaseline) / range) * PLOT_HEIGHT);
    const miaY = PLOT_BOTTOM - miaH;
    const barMia = document.getElementById('barMia');
    barMia.setAttribute('y', miaY);
    barMia.setAttribute('height', miaH);
    document.getElementById('valMia').setAttribute('y', miaY - 6);

    // Y Axis Ticks
    const ticksGroup = document.getElementById('yTicksGroup');
    const gridGroup = document.getElementById('gridGroup');
    ticksGroup.innerHTML = '';
    gridGroup.innerHTML = '';

    const step = currentBaseline >= 40 ? 5 : (currentBaseline >= 20 ? 10 : 10);
    const startTick = Math.ceil(currentBaseline / step) * step;

    // Bottom tick (baseline)
    const baseText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    baseText.setAttribute('x', '40');
    baseText.setAttribute('y', PLOT_BOTTOM + 4);
    baseText.setAttribute('text-anchor', 'end');
    baseText.setAttribute('class', 'tick-text');
    baseText.textContent = currentBaseline;
    ticksGroup.appendChild(baseText);

    for (let v = startTick; v <= MAX_Y; v += step) {
      if (v <= currentBaseline) continue;
      const y = PLOT_BOTTOM - ((v - currentBaseline) / range) * PLOT_HEIGHT;

      // Tick text
      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      t.setAttribute('x', '40');
      t.setAttribute('y', y + 4);
      t.setAttribute('text-anchor', 'end');
      t.setAttribute('class', 'tick-text');
      t.textContent = v;
      ticksGroup.appendChild(t);

      // Grid line
      const gl = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      gl.setAttribute('x1', '48');
      gl.setAttribute('y1', y);
      gl.setAttribute('x2', '300');
      gl.setAttribute('y2', y);
      gl.setAttribute('class', 'grid-line');
      gridGroup.appendChild(gl);
    }

    // Break indicator
    const breakPath = document.getElementById('breakPath');
    breakPath.setAttribute('opacity', currentBaseline > 0 ? '1' : '0');

    // Ratio calculation
    const visualRatio = (miaH / samH).toFixed(1);
    const badge = document.getElementById('ratioBadge');
    badge.textContent = 'Mia looks ' + visualRatio + '×';

    if (currentBaseline >= 30) {
      badge.className = 'ratio-badge ratio-sneaky';
    } else {
      badge.className = 'ratio-badge ratio-honest';
    }

    // Controls state
    document.getElementById('baselineLabel').textContent = 'Axis: ' + currentBaseline;
    document.getElementById('baselineSlider').value = currentBaseline;

    const btnHonest = document.getElementById('btnHonest');
    const btnSneaky = document.getElementById('btnSneaky');
    btnHonest.className = 'preset-btn' + (currentBaseline === 0 ? ' active-honest' : '');
    btnSneaky.className = 'preset-btn' + (currentBaseline === 45 ? ' active-sneaky' : '');
  }

  function setBaseline(val) {
    render(val);
  }

  function onSlider(val) {
    render(val);
  }

  render(0);
</script>

</body>
</html>

How can one graph tell the truth while the other looks like a trick?

A bar graph uses the height of tall blocks to show numbers. The tall line going straight up and down is called the **vertical axis**.

Every fair graph starts at the number **zero**, right at the very bottom on the ground.

<!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 {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 2px solid #e6e6e6;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn.active {
      background: #2ecc71;
      border-color: #2ecc71;
      color: #ffffff;
    }
    .btn.active.cut {
      background: #e74c3c;
      border-color: #e74c3c;
    }
    .chart-container {
      width: 100%;
      max-width: 440px;
      height: 260px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      position: relative;
      padding: 16px 20px 24px 44px;
    }
    .axis-y {
      position: absolute;
      left: 38px;
      top: 20px;
      bottom: 30px;
      width: 2px;
      background: #cbd5e1;
    }
    .tick {
      position: absolute;
      left: -32px;
      width: 28px;
      text-align: right;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      transform: translateY(-50%);
      transition: all 0.4s ease;
    }
    .plot-area {
      position: absolute;
      left: 40px;
      right: 20px;
      top: 20px;
      bottom: 30px;
      border-bottom: 2px solid #2ecc71;
      transition: border-color 0.4s ease;
    }
    .plot-area.cut-mode {
      border-bottom: 2px dashed #e74c3c;
    }
    .bars-wrap {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 100%;
      height: 100%;
      padding: 0 10%;
    }
    .bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 32%;
      height: 100%;
      justify-content: flex-end;
    }
    .bar {
      width: 100%;
      border-radius: 6px 6px 0 0;
      transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    .bar-a {
      background: #38bdf8;
    }
    .bar-b {
      background: #22c55e;
    }
    .bar-val {
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }
    .bar-lbl {
      position: absolute;
      bottom: -24px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .ground-badge {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: #2ecc71;
      letter-spacing: 0.5px;
      transition: color 0.4s ease;
    }
    .ground-badge.cut-mode {
      color: #e74c3c;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnZero" onclick="setMode('zero')">Fair: Starts at 0</button>
    <button class="btn" id="btnCut" onclick="setMode('cut')">Cut: Starts at 45</button>
  </div>

  <div class="chart-container">
    <div class="axis-y">
      <span class="tick" style="top: 0%">60</span>
      <span class="tick" style="top: 33%" id="tickMid">40</span>
      <span class="tick" style="top: 66%" id="tickLow">20</span>
      <span class="tick" style="top: 100%" id="tickZero">0</span>
    </div>

    <div class="plot-area" id="plotArea">
      <div class="bars-wrap">
        <div class="bar-col">
          <div class="bar bar-a" id="barA" style="height: 83.3%;">
            <span class="bar-val">50</span>
          </div>
          <span class="bar-lbl">A</span>
        </div>

        <div class="bar-col">
          <div class="bar bar-b" id="barB" style="height: 91.7%;">
            <span class="bar-val">55</span>
          </div>
          <span class="bar-lbl">B</span>
        </div>
      </div>
    </div>
  </div>

  <div class="ground-badge" id="groundTag">✓ Baseline at 0</div>

  <script>
    function setMode(mode) {
      const isZero = mode === 'zero';
      
      document.getElementById('btnZero').className = 'btn' + (isZero ? ' active' : '');
      document.getElementById('btnCut').className = 'btn cut' + (!isZero ? ' active cut' : '');
      
      document.getElementById('plotArea').className = 'plot-area' + (isZero ? '' : ' cut-mode');
      
      const groundTag = document.getElementById('groundTag');
      groundTag.className = 'ground-badge' + (isZero ? '' : ' cut-mode');
      groundTag.textContent = isZero ? '✓ Baseline at 0' : '✗ Cut at 45';

      // Bar heights: Values are 50 and 55.
      // Mode 0: scale 0 to 60 -> 50/60 = 83.3%, 55/60 = 91.7%
      // Mode cut: scale 45 to 60 -> (50-45)/15 = 33.3%, (55-45)/15 = 66.7%
      document.getElementById('barA').style.height = isZero ? '83.3%' : '33.3%';
      document.getElementById('barB').style.height = isZero ? '91.7%' : '66.7%';

      document.getElementById('tickMid').textContent = isZero ? '40' : '55';
      document.getElementById('tickLow').textContent = isZero ? '20' : '50';
      document.getElementById('tickZero').textContent = isZero ? '0' : '45';
    }
  </script>
</body>
</html>

What happens if someone cuts off the bottom of the graph and hides the ground?

When a graph does not start at zero, we call it a **truncated axis** or a cut-off graph.

Cutting off the bottom zooms in only on the tips of the bars, making a tiny difference look like a **huge difference**.

<!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;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Control buttons */
  .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .toggle-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
  }
  .toggle-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
  }
  .toggle-btn.active.misleading {
    background: #ff5252;
    border-color: #ff5252;
    box-shadow: 0 2px 6px rgba(255, 82, 82, 0.3);
  }

  /* Main chart area */
  .chart-container {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 16px 16px 12px 16px;
    position: relative;
  }

  .graph-stage {
    display: flex;
    height: 200px;
    position: relative;
  }

  /* Y-Axis */
  .y-axis {
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 8px;
    border-right: 2px solid #1e2945;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    position: relative;
  }
  .y-axis .zero-mark {
    color: #1e2945;
    font-weight: 700;
    transition: color 0.2s;
  }
  .y-axis .zero-mark.truncated {
    color: #ff5252;
  }

  /* Plot area */
  .plot-area {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 16px;
    border-bottom: 2px solid #1e2945;
  }

  /* Gridlines */
  .gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed #e6e6e6;
    pointer-events: none;
  }

  /* Bars */
  .bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    width: 32%;
    position: relative;
    z-index: 2;
  }
  .bar-label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1e2945;
    transition: transform 0.35s ease;
  }
  .bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bar-a {
    background: #94a3b8;
  }
  .bar-b {
    background: #22b7ff;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
  }
  .bar-b.misleading {
    background: #ff5252;
  }

  /* Cut line indicator */
  .cut-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: repeating-linear-gradient(
      -45deg,
      rgba(255, 82, 82, 0.08),
      rgba(255, 82, 82, 0.08) 6px,
      rgba(255, 82, 82, 0.16) 6px,
      rgba(255, 82, 82, 0.16) 12px
    );
    border-top: 2px dashed rgba(255, 82, 82, 0.8);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }
  .cut-indicator.visible {
    opacity: 1;
  }

  /* X-Axis labels */
  .x-axis {
    display: flex;
    margin-left: 44px;
    padding: 6px 16px 0 16px;
    justify-content: space-around;
  }
  .x-label {
    width: 32%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
  }

  /* Bottom status comparison */
  .comparison-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    font-size: 14px;
    font-weight: 600;
  }
  .badge-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .badge-tag.honest {
    background: #dcfce7;
    color: #15803d;
  }
  .badge-tag.misleading {
    background: #fee2e2;
    color: #b91c1c;
  }
</style>
</head>
<body>

<div class="wrapper">
  <div class="btn-group">
    <button class="toggle-btn active" id="btnZero" onclick="setMode('zero')">
      ✓ Start at 0
    </button>
    <button class="toggle-btn" id="btnCut" onclick="setMode('cut')">
      ✂ Start at 95
    </button>
  </div>

  <div class="chart-container">
    <div class="graph-stage">
      <div class="y-axis">
        <span id="yMax">110</span>
        <span id="yMid">55</span>
        <span id="yMin" class="zero-mark">0</span>
      </div>

      <div class="plot-area">
        <div class="gridline" style="top: 0;"></div>
        <div class="gridline" style="top: 50%;"></div>
        
        <div class="cut-indicator" id="cutLine"></div>

        <div class="bar-col">
          <span class="bar-label" id="valA">100</span>
          <div class="bar bar-a" id="barA" style="height: 90.9%;"></div>
        </div>

        <div class="bar-col">
          <span class="bar-label" id="valB">105</span>
          <div class="bar bar-b" id="barB" style="height: 95.4%;"></div>
        </div>
      </div>
    </div>

    <div class="x-axis">
      <span class="x-label">A</span>
      <span class="x-label">B</span>
    </div>
  </div>

  <div class="comparison-badge" id="summary">
    <span class="badge-tag honest" id="tag">Accurate</span>
    <span id="summaryText">Visual difference: 1.05× (Real: +5%)</span>
  </div>
</div>

<script>
  function setMode(mode) {
    const btnZero = document.getElementById('btnZero');
    const btnCut = document.getElementById('btnCut');
    const barA = document.getElementById('barA');
    const barB = document.getElementById('barB');
    const yMax = document.getElementById('yMax');
    const yMid = document.getElementById('yMid');
    const yMin = document.getElementById('yMin');
    const cutLine = document.getElementById('cutLine');
    const tag = document.getElementById('tag');
    const summaryText = document.getElementById('summaryText');

    if (mode === 'zero') {
      btnZero.className = 'toggle-btn active';
      btnCut.className = 'toggle-btn';
      
      barB.classList.remove('misleading');
      yMin.classList.remove('truncated');
      cutLine.classList.remove('visible');
      cutLine.style.height = '0%';

      // Scale 0 to 110: 100 -> ~90.9%, 105 -> ~95.4%
      barA.style.height = '90.9%';
      barB.style.height = '95.4%';

      yMax.textContent = '110';
      yMid.textContent = '55';
      yMin.textContent = '0';

      tag.className = 'badge-tag honest';
      tag.textContent = 'Accurate';
      summaryText.textContent = 'Visual difference: 1.05× (Real: +5%)';
    } else {
      btnZero.className = 'toggle-btn';
      btnCut.className = 'toggle-btn active misleading';

      barB.classList.add('misleading');
      yMin.classList.add('truncated');
      cutLine.classList.add('visible');
      cutLine.style.height = '20%';

      // Scale 95 to 110 (range 15):
      // A (100 - 95) = 5/15 = 33.3%
      // B (105 - 95) = 10/15 = 66.7% (Looks double!)
      barA.style.height = '33.3%';
      barB.style.height = '66.7%';

      yMax.textContent = '110';
      yMid.textContent = '102';
      yMin.textContent = '95';

      tag.className = 'badge-tag misleading';
      tag.textContent = 'Misleading';
      summaryText.textContent = 'Visual difference: 2.00× (Looks Double!)';
    }
  }
</script>

</body>
</html>

Why does this happen mathematically when we change the starting number?

When the graph starts at 0, Sam has 10 blocks showing and Mia has 11. Mia is only $\frac{1}{10}$ taller, which looks almost even.

If the graph starts at 9, we only see $10 - 9 = 1$ block for Sam, but $11 - 9 = 2$ blocks for Mia. Two is double of one, so Mia's bar looks two times bigger!

<!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, sans-serif;
    }

    body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      background: transparent;
      color: #1e2945;
      user-select: none;
    }

    .toggles {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 380px;
    }

    .btn {
      flex: 1;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #6b7280;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.3);
    }

    .btn-misleading.active {
      background: #ff6b6b;
      border-color: #ff6b6b;
      box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
    }

    .chart-area {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 240px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      padding: 20px 20px 30px 48px;
    }

    .y-axis {
      position: absolute;
      left: 12px;
      top: 20px;
      bottom: 30px;
      width: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

    .tick {
      transition: opacity 0.3s ease;
    }

    .grid-line {
      position: absolute;
      left: 48px;
      right: 20px;
      height: 1px;
      background: #f1f3f5;
    }

    .bars-container {
      position: absolute;
      left: 60px;
      right: 30px;
      top: 20px;
      bottom: 30px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      border-bottom: 2px solid #1e2945;
    }

    .bar-col {
      width: 36%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }

    .bar {
      width: 100%;
      border-radius: 6px 6px 0 0;
      transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 6px;
      color: #ffffff;
      font-weight: 700;
      font-size: 13px;
    }

    .bar-sam {
      background: #3b82f6;
    }

    .bar-mia {
      background: #8b5cf6;
    }

    .bar-label {
      position: absolute;
      bottom: -24px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .tag-badge {
      position: absolute;
      top: 10px;
      right: 14px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .tag-fair {
      background: #e0f2fe;
      color: #0284c7;
    }

    .tag-bad {
      background: #fee2e2;
      color: #dc2626;
    }
  </style>
</head>
<body>

  <div class="toggles">
    <button id="btnFair" class="btn active" onclick="setMode('fair')">
      ✓ Start at 0
    </button>
    <button id="btnBad" class="btn btn-misleading" onclick="setMode('bad')">
      ⚠ Start at 9
    </button>
  </div>

  <div class="chart-area">
    <div id="badge" class="tag-badge tag-fair">True Scale</div>

    <div class="grid-line" style="top: 20px;"></div>
    <div class="grid-line" style="top: 50%;"></div>
    <div class="grid-line" style="bottom: 30px;"></div>

    <div class="y-axis">
      <span id="yTop" class="tick">12</span>
      <span id="yMid" class="tick">6</span>
      <span id="yBot" class="tick">0</span>
    </div>

    <div class="bars-container">
      <div class="bar-col">
        <div id="barSam" class="bar bar-sam" style="height: 83.3%;">10</div>
        <span class="bar-label">Sam</span>
      </div>
      <div class="bar-col">
        <div id="barMia" class="bar bar-mia" style="height: 91.7%;">11</div>
        <span class="bar-label">Mia</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnFair = document.getElementById('btnFair');
      const btnBad = document.getElementById('btnBad');
      const barSam = document.getElementById('barSam');
      const barMia = document.getElementById('barMia');
      const yTop = document.getElementById('yTop');
      const yMid = document.getElementById('yMid');
      const yBot = document.getElementById('yBot');
      const badge = document.getElementById('badge');

      if (mode === 'fair') {
        btnFair.classList.add('active');
        btnBad.classList.remove('active');
        yTop.textContent = '12';
        yMid.textContent = '6';
        yBot.textContent = '0';
        barSam.style.height = '83.3%'; // 10/12
        barMia.style.height = '91.7%'; // 11/12
        badge.textContent = 'True Scale';
        badge.className = 'tag-badge tag-fair';
      } else {
        btnBad.classList.add('active');
        btnFair.classList.remove('active');
        yTop.textContent = '12';
        yMid.textContent = '10';
        yBot.textContent = '9';
        barSam.style.height = '33.3%'; // (10-9)/3 = 1 block
        barMia.style.height = '66.7%'; // (11-9)/3 = 2 blocks (looks 2x!)
        badge.textContent = 'Looks 2× Bigger!';
        badge.className = 'tag-badge tag-bad';
      }
    }
  </script>
</body>
</html>

Can you spot the secret to never getting tricked by a graph?

Whenever you look at a graph, always look down at the very bottom corner first.

If the bottom number is not **zero**, read the actual numbers on top of the bars instead of just trusting your eyes!

math

Identifying Misleading Graphs with Truncated or Broken Y-Axes. Explain how a non-zero starting point on the vertical axis exaggerates differences between categories.

Misleading Bar Charts & Distorted Scales

Misleading Data and Graphs (Curriculum for Excellence / GCSE Mathematics)

Critical Data Literacy: Interpreting and Misinterpreting Visual Displays

Although the Curriculum for Excellence standard MNU 2-20a formally resides at Second Level, foundational visual literacy is scaffolded from the earliest stages using concrete, tactile representations (e.g., Unifix block towers where the base is physically covered vs. fully visible). For early primary/foundation learners, teaching focuses on establishing that 'fair comparisons must always start from the same bottom line.' As students advance through First and Second Levels, educators transition from physical tower baselines to analyzing real-world media graphs with non-zero origins and broken scales.

Identifying Misleading Graphs with Truncated or Broken Y-Axes

The Ground Line

The Cut-Off Trick