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

    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      gap: 12px;
      user-select: none;
    }

    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 580px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .tab-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .tab-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    }

    .tab-btn.active.btn-peak {
      background: #2563eb;
      border-color: #2563eb;
    }

    .tab-btn.active.btn-cluster {
      background: #7c3aed;
      border-color: #7c3aed;
    }

    .tab-btn.active.btn-gap {
      background: #d97706;
      border-color: #d97706;
    }

    .diagram-stage {
      width: 100%;
      max-width: 580px;
      aspect-ratio: 600 / 300;
      position: relative;
    }

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

    .dot {
      fill: #3b82f6;
      transition: opacity 0.3s ease, transform 0.3s ease, fill 0.3s ease;
    }

    .overlay-group {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dimmed {
      opacity: 0.15 !important;
    }

    .highlight-peak .dot-peak {
      fill: #2563eb;
    }

    .highlight-cluster .dot-cluster {
      fill: #7c3aed;
    }

    .info-bar {
      width: 100%;
      max-width: 580px;
      min-height: 48px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #334155;
      line-height: 1.4;
    }

    .pill-label {
      font-weight: 700;
      margin-right: 6px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
    }

    .pill-peak { background: #2563eb; }
    .pill-cluster { background: #7c3aed; }
    .pill-gap { background: #d97706; }
    .pill-all { background: #475569; }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" onclick="setFeature('all', this)">✦ Show All</button>
    <button class="tab-btn btn-peak" onclick="setFeature('peak', this)">Peak (8)</button>
    <button class="tab-btn btn-cluster" onclick="setFeature('cluster', this)">Cluster (7–9)</button>
    <button class="tab-btn btn-gap" onclick="setFeature('gap', this)">Gap (6)</button>
  </div>

  <div class="diagram-stage">
    <svg viewBox="0 0 600 300">
      <defs>
        <marker id="arrow-blue" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#2563eb" />
        </marker>
        <marker id="arrow-amber" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#d97706" />
        </marker>
      </defs>

      
      <g id="overlayCluster" class="overlay-group">
        <rect x="214" y="80" width="260" height="162" rx="10" fill="#f5f3ff" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4" />
        <rect x="224" y="68" width="62" height="22" rx="4" fill="#7c3aed" />
        <text x="255" y="83" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle">CLUSTER</text>
      </g>

      
      <g id="overlayGap" class="overlay-group">
        <rect x="138" y="148" width="60" height="94" rx="8" fill="#fffbeb" stroke="#d97706" stroke-width="2" stroke-dasharray="5,4" />
        <rect x="146" y="137" width="44" height="20" rx="4" fill="#d97706" />
        <text x="168" y="151" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle">GAP</text>
        <line x1="168" y1="166" x2="168" y2="230" stroke="#d97706" stroke-width="1.5" stroke-dasharray="3,3" />
        <text x="168" y="200" fill="#b45309" font-size="11" font-weight="600" text-anchor="middle">0 dots</text>
      </g>

      
      <line x1="40" y1="245" x2="560" y2="245" stroke="#334155" stroke-width="2" stroke-linecap="round" />

      
      
      <line x1="80" y1="245" x2="80" y2="253" stroke="#334155" stroke-width="2" />
      <text x="80" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">5</text>

      
      <line x1="168" y1="245" x2="168" y2="253" stroke="#334155" stroke-width="2" />
      <text x="168" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">6</text>

      
      <line x1="256" y1="245" x2="256" y2="253" stroke="#334155" stroke-width="2" />
      <text x="256" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">7</text>

      
      <line x1="344" y1="245" x2="344" y2="253" stroke="#334155" stroke-width="2" />
      <text x="344" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">8</text>

      
      <line x1="432" y1="245" x2="432" y2="253" stroke="#334155" stroke-width="2" />
      <text x="432" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">9</text>

      
      <line x1="520" y1="245" x2="520" y2="253" stroke="#334155" stroke-width="2" />
      <text x="520" y="272" font-size="15" font-weight="600" fill="#334155" text-anchor="middle">10</text>

      
      <text x="300" y="294" font-size="13" font-weight="600" fill="#64748b" text-anchor="middle" letter-spacing="0.5">QUIZ SCORE</text>

      
      
      <g id="dots5">
        <circle class="dot dot-5" cx="80" cy="231" r="9" />
      </g>

      
      <g id="dots7">
        <circle class="dot dot-cluster" cx="256" cy="231" r="9" />
        <circle class="dot dot-cluster" cx="256" cy="209" r="9" />
        <circle class="dot dot-cluster" cx="256" cy="187" r="9" />
        <circle class="dot dot-cluster" cx="256" cy="165" r="9" />
      </g>

      
      <g id="dots8">
        <circle class="dot dot-cluster dot-peak" cx="344" cy="231" r="9" />
        <circle class="dot dot-cluster dot-peak" cx="344" cy="209" r="9" />
        <circle class="dot dot-cluster dot-peak" cx="344" cy="187" r="9" />
        <circle class="dot dot-cluster dot-peak" cx="344" cy="165" r="9" />
        <circle class="dot dot-cluster dot-peak" cx="344" cy="143" r="9" />
        <circle class="dot dot-cluster dot-peak" cx="344" cy="121" r="9" />
      </g>

      
      <g id="dots9">
        <circle class="dot dot-cluster" cx="432" cy="231" r="9" />
        <circle class="dot dot-cluster" cx="432" cy="209" r="9" />
        <circle class="dot dot-cluster" cx="432" cy="187" r="9" />
        <circle class="dot dot-cluster" cx="432" cy="165" r="9" />
        <circle class="dot dot-cluster" cx="432" cy="143" r="9" />
      </g>

      
      <g id="dots10">
        <circle class="dot dot-10" cx="520" cy="231" r="9" />
        <circle class="dot dot-10" cx="520" cy="209" r="9" />
      </g>

      
      <g id="overlayPeak" class="overlay-group">
        <line x1="344" y1="46" x2="344" y2="108" stroke="#2563eb" stroke-width="2" marker-end="url(#arrow-blue)" />
        <rect x="312" y="24" width="64" height="22" rx="4" fill="#2563eb" />
        <text x="344" y="39" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle">PEAK (6)</text>
      </g>
    </svg>
  </div>

  <div id="infoBar" class="info-bar">
    <span><span class="pill-label pill-all">Summary</span> Peaks, clusters, and gaps describe data distribution.</span>
  </div>

  <script>
    const descriptions = {
      all: '<span><span class="pill-label pill-all">All Features</span> Peak (tallest), cluster (bunched data), and gap (empty space).</span>',
      peak: '<span><span class="pill-label pill-peak">Peak</span> Score 8 has the tallest stack (highest frequency = 6).</span>',
      cluster: '<span><span class="pill-label pill-cluster">Cluster</span> Scores 7, 8, and 9 group closely together with most data.</span>',
      gap: '<span><span class="pill-label pill-gap">Gap</span> Score 6 is completely empty (frequency = 0).</span>'
    };

    function setFeature(feature, btn) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const peakOverlay = document.getElementById('overlayPeak');
      const clusterOverlay = document.getElementById('overlayCluster');
      const gapOverlay = document.getElementById('overlayGap');
      const dots = document.querySelectorAll('.dot');
      const infoBar = document.getElementById('infoBar');

      infoBar.innerHTML = descriptions[feature];

      // Reset dimming
      peakOverlay.classList.remove('dimmed');
      clusterOverlay.classList.remove('dimmed');
      gapOverlay.classList.remove('dimmed');
      dots.forEach(d => {
        d.classList.remove('dimmed');
        d.style.fill = '';
      });

      if (feature === 'peak') {
        clusterOverlay.classList.add('dimmed');
        gapOverlay.classList.add('dimmed');
        dots.forEach(d => {
          if (!d.classList.contains('dot-peak')) d.classList.add('dimmed');
          else d.style.fill = '#2563eb';
        });
      } else if (feature === 'cluster') {
        peakOverlay.classList.add('dimmed');
        gapOverlay.classList.add('dimmed');
        dots.forEach(d => {
          if (!d.classList.contains('dot-cluster')) d.classList.add('dimmed');
          else d.style.fill = '#7c3aed';
        });
      } else if (feature === 'gap') {
        peakOverlay.classList.add('dimmed');
        clusterOverlay.classList.add('dimmed');
        dots.forEach(d => d.classList.add('dimmed'));
      }
    }
  </script>
</body>
</html>

Constructing and Interpreting Dot Plots

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      user-select: none;
    }
    .header {
      text-align: center;
      width: 100%;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #1e2945;
    }
    .info-badge {
      display: inline-block;
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
      padding: 3px 12px;
      border-radius: 12px;
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
      min-height: 24px;
    }
    .plot-container {
      width: 100%;
      max-width: 480px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .axis-line {
      stroke: #64748b;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .tick {
      stroke: #64748b;
      stroke-width: 2;
    }
    .axis-label {
      font-size: 14px;
      font-weight: 600;
      fill: #475569;
      text-anchor: middle;
      cursor: pointer;
    }
    .axis-label.active {
      fill: #2563eb;
      font-weight: 800;
    }
    .plot-dot {
      transition: transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
      cursor: pointer;
    }
    .plot-dot.default-dot {
      fill: #1e2945;
    }
    .plot-dot.peak-dot {
      fill: #2563eb;
    }
    .col-group {
      cursor: pointer;
    }
    .col-group:hover .hit-area,
    .col-group.active .hit-area {
      fill: rgba(37, 99, 235, 0.08);
    }
    .hit-area {
      fill: transparent;
      transition: fill 0.2s ease;
      rx: 6px;
    }
    .x-caption {
      font-size: 12px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Goals Scored by Players</div>
    <div class="info-badge" id="info">2 Goals: 5 Players (Most Common)</div>
  </div>

  <div class="plot-container">
    <svg viewBox="0 0 400 240" id="plotSvg">
      
      <line x1="20" y1="190" x2="380" y2="190" class="axis-line" />
      <text x="200" y="228" class="x-caption">Number of Goals</text>

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

  <script>
    const data = [
      { val: 0, count: 1 },
      { val: 1, count: 3 },
      { val: 2, count: 5 },
      { val: 3, count: 4 },
      { val: 4, count: 2 },
      { val: 5, count: 0 },
      { val: 6, count: 0 },
      { val: 7, count: 1 }
    ];

    const group = document.getElementById('columnsGroup');
    const info = document.getElementById('info');
    const startX = 45;
    const spacing = 44;
    const dotR = 8.5;
    const dotSpacing = 22;
    const baseY = 174;
    let selectedVal = 2;

    function render() {
      group.innerHTML = '';
      data.forEach((d, i) => {
        const cx = startX + i * spacing;
        const col = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        col.setAttribute('class', 'col-group' + (d.val === selectedVal ? ' active' : ''));
        col.onclick = () => selectColumn(d.val);

        // Hit background
        const hit = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        hit.setAttribute('x', cx - 18);
        hit.setAttribute('y', 20);
        hit.setAttribute('width', 36);
        hit.setAttribute('height', 190);
        hit.setAttribute('class', 'hit-area');
        col.appendChild(hit);

        // Axis Tick
        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tick.setAttribute('x1', cx);
        tick.setAttribute('y1', 190);
        tick.setAttribute('x2', cx);
        tick.setAttribute('y2', 196);
        tick.setAttribute('class', 'tick');
        col.appendChild(tick);

        // Label
        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', cx);
        txt.setAttribute('y', 212);
        txt.setAttribute('class', 'axis-label' + (d.val === selectedVal ? ' active' : ''));
        txt.textContent = d.val;
        col.appendChild(txt);

        // Stacked dots
        for (let r = 0; r < d.count; r++) {
          const cy = baseY - r * dotSpacing;
          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('cx', cx);
          circle.setAttribute('cy', cy);
          circle.setAttribute('r', dotR);

          if (d.val === 2) {
            circle.setAttribute('class', 'plot-dot peak-dot');
          } else {
            circle.setAttribute('class', 'plot-dot default-dot');
          }

          if (d.val === selectedVal) {
            circle.setAttribute('stroke', '#2563eb');
            circle.setAttribute('stroke-width', '2');
          }

          col.appendChild(circle);
        }

        group.appendChild(col);
      });
    }

    function selectColumn(val) {
      selectedVal = val;
      const item = data.find(d => d.val === val);
      if (val === 2) {
        info.textContent = '2 Goals: 5 Players (Peak)';
      } else if (item.count === 0) {
        info.textContent = val + ' Goals: 0 Players';
      } else if (item.count === 1) {
        info.textContent = val + ' Goal: 1 Player';
      } else {
        info.textContent = val + ' Goals: ' + item.count + ' Players';
      }
      render();
    }

    render();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Dot Plot Construction</title>
  <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: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .main-area {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Raw Data Chips */
    .data-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .section-label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
    }

    .data-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .data-item {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
      border: 2px solid transparent;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .data-item.active {
      background: #e0f2fe;
      color: #0284c7;
      border-color: #0284c7;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(2, 132, 199, 0.2);
    }

    .data-item.done {
      background: #f8fafc;
      color: #94a3b8;
      border-color: #e2e8f0;
      text-decoration: line-through;
    }

    /* Plot Area */
    .plot-container {
      width: 100%;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      padding: 0 8px;
    }

    .columns {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      height: 140px;
      width: 100%;
      position: relative;
    }

    .column {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 100%;
      position: relative;
    }

    .dot-slot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
      opacity: 0;
      transform: translateY(-20px) scale(0.6);
      transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dot-slot.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .dot-slot.latest {
      background: #38bdf8;
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
    }

    /* Number Line Axis */
    .axis-line {
      width: 100%;
      height: 3px;
      background: #334155;
      border-radius: 2px;
      position: relative;
      margin-top: 4px;
    }

    .axis-labels {
      display: flex;
      justify-content: space-around;
      width: 100%;
      padding-top: 6px;
    }

    .axis-val {
      width: 40px;
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Controls */
    .controls {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 8px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 36px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .btn-primary:active {
      background: #0369a1;
    }

    .step-indicator {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      min-width: 68px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="main-area">
    <div class="data-section">
      <div class="section-label">Raw Data (Pets Owned)</div>
      <div class="data-list" id="dataList"></div>
    </div>

    <div class="plot-container">
      <div class="columns" id="columns"></div>
      <div class="axis-line"></div>
      <div class="axis-labels" id="axisLabels"></div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous step">◀</button>
    <button class="btn btn-primary" id="playBtn" style="min-width: 80px;">Pause ⏸</button>
    <button class="btn" id="nextBtn" aria-label="Next step">▶</button>
    <div class="step-indicator" id="stepText">0 / 10</div>
  </div>

  <script>
    const data = [2, 0, 1, 2, 4, 1, 2, 0, 3, 2];
    const categories = [0, 1, 2, 3, 4];
    const maxDots = 5;

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

    // Elements
    const dataList = document.getElementById('dataList');
    const columnsEl = document.getElementById('columns');
    const axisLabelsEl = document.getElementById('axisLabels');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const stepText = document.getElementById('stepText');

    // Build raw data chips
    data.forEach((val, i) => {
      const chip = document.createElement('div');
      chip.className = 'data-item';
      chip.textContent = val;
      chip.addEventListener('click', () => setStep(i + 1));
      dataList.appendChild(chip);
    });

    // Build columns and pre-create dot slots
    categories.forEach(cat => {
      const col = document.createElement('div');
      col.className = 'column';
      col.dataset.category = cat;

      for (let d = 0; d < maxDots; d++) {
        const slot = document.createElement('div');
        slot.className = 'dot-slot';
        col.appendChild(slot);
      }
      columnsEl.appendChild(col);

      const label = document.createElement('div');
      label.className = 'axis-val';
      label.textContent = cat;
      axisLabelsEl.appendChild(label);
    });

    function update() {
      // Calculate dot counts up to currentStep
      const counts = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
      for (let i = 0; i < currentStep; i++) {
        counts[data[i]]++;
      }

      // Update data chips
      const chips = dataList.querySelectorAll('.data-item');
      chips.forEach((chip, i) => {
        chip.className = 'data-item';
        if (i < currentStep - 1) {
          chip.classList.add('done');
        } else if (i === currentStep - 1) {
          chip.classList.add('active');
        }
      });

      // Update dots
      categories.forEach(cat => {
        const col = columnsEl.querySelector(`[data-category="${cat}"]`);
        const slots = col.querySelectorAll('.dot-slot');
        const activeCount = counts[cat];
        const isLatestCat = currentStep > 0 && data[currentStep - 1] === cat;

        slots.forEach((slot, index) => {
          slot.className = 'dot-slot';
          if (index < activeCount) {
            slot.classList.add('visible');
            if (isLatestCat && index === activeCount - 1) {
              slot.classList.add('latest');
            }
          }
        });
      });

      // Update step indicator
      stepText.textContent = `${currentStep} / ${data.length}`;
    }

    function setStep(step) {
      currentStep = Math.max(0, Math.min(data.length, step));
      update();
    }

    function nextStep() {
      if (currentStep >= data.length) {
        setStep(0);
      } else {
        setStep(currentStep + 1);
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        setStep(currentStep - 1);
      } else {
        setStep(data.length);
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = 'Pause ⏸';
      timer = setInterval(() => {
        nextStep();
      }, 1400);
    }

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

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

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

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

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

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: #334155;
    }

    .svg-container {
      width: 100%;
      max-width: 520px;
      height: auto;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Step visibility transitions */
    .step-el {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .step-hide {
      opacity: 0;
      pointer-events: none;
    }

    .step-show {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1</button>
    <button class="step-btn" onclick="setStep(1)">2</button>
    <button class="step-btn" onclick="setStep(2)">3</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play/Pause">⏸</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 500 300">
      <defs>
        
        <marker id="arrow-l" viewBox="0 0 6 6" refX="1" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M5,1 L1,3 L5,5" fill="none" stroke="#d97706" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
        <marker id="arrow-r" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M1,1 L5,3 L1,5" fill="none" stroke="#d97706" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
        
        <marker id="arrow-u" viewBox="0 0 6 6" refX="3" refY="1" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M1,5 L3,1 L5,5" fill="none" stroke="#0284c7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
        <marker id="arrow-d" viewBox="0 0 6 6" refX="3" refY="5" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M1,1 L3,5 L5,1" fill="none" stroke="#0284c7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
      </defs>

      
      <g id="gridGuides" class="step-el step-hide">
        
        <line x1="70" y1="90" x2="70" y2="230" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
        <line x1="146" y1="90" x2="146" y2="230" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
        <line x1="222" y1="60" x2="222" y2="230" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
        <line x1="298" y1="90" x2="298" y2="230" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
        <line x1="374" y1="90" x2="374" y2="230" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3" />
        
        
        <line x1="50" y1="205" x2="430" y2="205" stroke="#f1f5f9" stroke-width="1" />
        <line x1="50" y1="173" x2="430" y2="173" stroke="#f1f5f9" stroke-width="1" />
        <line x1="50" y1="141" x2="430" y2="141" stroke="#f1f5f9" stroke-width="1" />
        <line x1="50" y1="109" x2="430" y2="109" stroke="#f1f5f9" stroke-width="1" />

        
        <line x1="246" y1="113" x2="246" y2="137" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arrow-u)" marker-end="url(#arrow-d)" />
        <line x1="246" y1="145" x2="246" y2="169" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arrow-u)" marker-end="url(#arrow-d)" />
        <line x1="246" y1="177" x2="246" y2="201" stroke="#0284c7" stroke-width="1.5" marker-start="url(#arrow-u)" marker-end="url(#arrow-d)" />

        <text x="256" y="145" fill="#0284c7" font-size="13" font-weight="700">Even vertical</text>
        <text x="256" y="161" fill="#0284c7" font-size="13" font-weight="700">alignment</text>
      </g>

      
      <g id="numberLine">
        
        <line x1="40" y1="230" x2="480" y2="230" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
        
        
        <path d="M472,225 L482,230 L472,235" fill="none" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M48,225 L38,230 L48,235" fill="none" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />

        
        <line x1="70" y1="223" x2="70" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="146" y1="223" x2="146" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="222" y1="223" x2="222" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="298" y1="223" x2="298" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="374" y1="223" x2="374" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        <line x1="450" y1="223" x2="450" y2="237" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />

        
        <text x="70" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">0</text>
        <text x="146" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">1</text>
        <text x="222" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">2</text>
        <text x="298" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">3</text>
        <text x="374" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">4</text>
        <text x="450" y="258" text-anchor="middle" font-size="16" font-weight="600" fill="#1e2945">5</text>
      </g>

      
      <g id="step1Guides" class="step-el step-show">
        <line x1="74" y1="280" x2="142" y2="280" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
        <line x1="150" y1="280" x2="218" y2="280" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
        <line x1="226" y1="280" x2="294" y2="280" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
        <line x1="302" y1="280" x2="370" y2="280" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
        <line x1="378" y1="280" x2="446" y2="280" stroke="#d97706" stroke-width="1.5" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />

        <text x="260" y="298" text-anchor="middle" font-size="13" font-weight="700" fill="#d97706">Equal tick spacing</text>
      </g>

      
      <g id="row1Dots" class="step-el step-hide">
        
        <line x1="50" y1="205" x2="400" y2="205" stroke="#93c5fd" stroke-width="1" stroke-dasharray="4 4" />
        
        <circle cx="70" cy="205" r="10" fill="#2563eb" />
        <circle cx="146" cy="205" r="10" fill="#2563eb" />
        <circle cx="222" cy="205" r="10" fill="#2563eb" />
        <circle cx="298" cy="205" r="10" fill="#2563eb" />
        <circle cx="374" cy="205" r="10" fill="#2563eb" />
      </g>

      
      <g id="upperRows" class="step-el step-hide">
        
        <circle cx="70" cy="173" r="10" fill="#2563eb" />
        <circle cx="146" cy="173" r="10" fill="#2563eb" />
        <circle cx="222" cy="173" r="10" fill="#2563eb" />

        
        <circle cx="222" cy="141" r="10" fill="#2563eb" />

        
        <circle cx="222" cy="109" r="10" fill="#2563eb" />
      </g>
    </svg>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    
    const step1Guides = document.getElementById('step1Guides');
    const row1Dots = document.getElementById('row1Dots');
    const upperRows = document.getElementById('upperRows');
    const gridGuides = document.getElementById('gridGuides');

    function updateVisuals(step) {
      currentStep = step;
      
      // Update buttons
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Update diagram layers
      if (step === 0) {
        step1Guides.setAttribute('class', 'step-el step-show');
        row1Dots.setAttribute('class', 'step-el step-hide');
        upperRows.setAttribute('class', 'step-el step-hide');
        gridGuides.setAttribute('class', 'step-el step-hide');
      } else if (step === 1) {
        step1Guides.setAttribute('class', 'step-el step-hide');
        row1Dots.setAttribute('class', 'step-el step-show');
        upperRows.setAttribute('class', 'step-el step-hide');
        gridGuides.setAttribute('class', 'step-el step-hide');
      } else if (step === 2) {
        step1Guides.setAttribute('class', 'step-el step-hide');
        row1Dots.setAttribute('class', 'step-el step-show');
        upperRows.setAttribute('class', 'step-el step-show');
        gridGuides.setAttribute('class', 'step-el step-show');
      }
    }

    function setStep(idx) {
      updateVisuals(idx);
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      updateVisuals(next);
    }

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

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

    function togglePlay() {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    }

    // Auto-advance
    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">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      padding: 12px 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }

    .comparison {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 16px;
      width: 100%;
      max-width: 660px;
      align-items: stretch;
    }

    @media (max-width: 480px) {
      .comparison {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .divider {
        display: none;
      }
    }

    .divider {
      background: #e2e8f0;
      width: 1px;
      height: 100%;
    }

    .col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 4px;
    }

    .header {
      text-align: center;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }

    .subtitle {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    .visual-area {
      width: 100%;
      min-height: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Left Side - Categorical */
    .pills-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .cat-pill {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #bae6fd;
      text-align: center;
      flex: 1;
      max-width: 80px;
      cursor: default;
      transition: background 0.2s ease;
    }

    .cat-pill:hover {
      background: #bae6fd;
    }

    .gaps-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-top: 8px;
    }

    .gap-spacer {
      flex: 1;
      max-width: 80px;
    }

    .gap-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 12px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .gap-arrows {
      font-size: 11px;
      line-height: 1;
      color: #0284c7;
    }

    /* Right Side - Continuous */
    .slider-container {
      width: 100%;
      max-width: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      touch-action: none;
      padding: 0 8px;
    }

    .value-bubble {
      background: #0f172a;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      margin-bottom: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      font-variant-numeric: tabular-nums;
      transition: transform 0.05s ease;
    }

    .track-wrap {
      width: 100%;
      position: relative;
      height: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .gradient-track {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(90deg, #38bdf8, #4f46e5);
    }

    .pin {
      position: absolute;
      top: 50%;
      left: 41%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background: #ffffff;
      border: 3px solid #0f172a;
      border-radius: 50%;
      cursor: grab;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    .pin:active {
      cursor: grabbing;
    }

    .ticks-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      padding: 0 2px;
    }

    .tick {
      font-size: 10px;
      color: #64748b;
      font-weight: 500;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 6px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="comparison">
    
    <div class="col">
      <div class="header">
        <div class="title">Categorical Data</div>
        <div class="subtitle">Separate groups with clear gaps</div>
      </div>

      <div class="visual-area">
        <div class="pills-row">
          <div class="cat-pill">🐶 Dogs</div>
          <div class="cat-pill">🐱 Cats</div>
          <div class="cat-pill">🐦 Birds</div>
        </div>

        <div class="gaps-row">
          <div class="gap-spacer"></div>
          <div class="gap-indicator">
            <span class="gap-arrows">↔</span>
            gap
          </div>
          <div class="gap-spacer"></div>
          <div class="gap-indicator">
            <span class="gap-arrows">↔</span>
            gap
          </div>
          <div class="gap-spacer"></div>
        </div>
      </div>

      <div class="badge">Values: Distinct categories</div>
    </div>

    
    <div class="divider"></div>

    
    <div class="col">
      <div class="header">
        <div class="title">Continuous Data</div>
        <div class="subtitle">Unbroken scale with no gaps</div>
      </div>

      <div class="visual-area">
        <div class="slider-container" id="sliderArea">
          <div class="value-bubble" id="valBubble">24.6 min</div>
          
          <div class="track-wrap" id="trackWrap">
            <div class="gradient-track"></div>
            <div class="pin" id="pin" style="left: 41%;"></div>
          </div>

          <div class="ticks-row">
            <span class="tick">0m</span>
            <span class="tick">15m</span>
            <span class="tick">30m</span>
            <span class="tick">45m</span>
            <span class="tick">60m</span>
          </div>
        </div>
      </div>

      <div class="badge">Values: Any number on a scale</div>
    </div>
  </div>

  <script>
    (function () {
      const track = document.getElementById('trackWrap');
      const pin = document.getElementById('pin');
      const bubble = document.getElementById('valBubble');
      let isDragging = false;

      function updatePosition(clientX) {
        const rect = track.getBoundingClientRect();
        let x = clientX - rect.left;
        x = Math.max(0, Math.min(x, rect.width));
        const pct = x / rect.width;
        const value = (pct * 60).toFixed(1);

        pin.style.left = (pct * 100) + '%';
        bubble.textContent = value + ' min';
      }

      function onPointerDown(e) {
        isDragging = true;
        updatePosition(e.clientX || (e.touches && e.touches[0].clientX));
        window.addEventListener('pointermove', onPointerMove);
        window.addEventListener('pointerup', onPointerUp);
        window.addEventListener('touchmove', onTouchMove, { passive: false });
        window.addEventListener('touchend', onPointerUp);
      }

      function onPointerMove(e) {
        if (!isDragging) return;
        updatePosition(e.clientX);
      }

      function onTouchMove(e) {
        if (!isDragging) return;
        e.preventDefault();
        updatePosition(e.touches[0].clientX);
      }

      function onPointerUp() {
        isDragging = false;
        window.removeEventListener('pointermove', onPointerMove);
        window.removeEventListener('pointerup', onPointerUp);
        window.removeEventListener('touchmove', onTouchMove);
        window.removeEventListener('touchend', onPointerUp);
      }

      track.addEventListener('pointerdown', onPointerDown);
    })();
  </script>
</body>
</html>

Distinguishing Bar Charts from Histograms

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

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

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

    .chart-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .chart-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chart-type-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

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

    .tag-hist {
      background: #fef3c7;
      color: #b45309;
    }

    .chart-svg {
      width: 100%;
      height: 170px;
      overflow: visible;
    }

    .feature-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 10px;
      padding: 6px 12px;
      border-radius: 8px;
      width: 100%;
      text-align: center;
    }

    .badge-bar {
      background: #eff6ff;
      border: 1px dashed #3b82f6;
      color: #1d4ed8;
    }

    .badge-hist {
      background: #fdf4ff;
      border: 1px dashed #a855f7;
      color: #7e22ce;
    }

    .interactive-btn {
      margin-top: 8px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

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

    .interactive-btn:active {
      background: #e2e8f0;
    }

    /* Bar Chart Animations */
    .bar-rect {
      transition: x 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bar-label {
      transition: x 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .shake {
      animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    @keyframes shake {
      10%, 90% { transform: translate3d(-1px, 0, 0); }
      20%, 80% { transform: translate3d(2px, 0, 0); }
      30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
      40%, 60% { transform: translate3d(3px, 0, 0); }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="chart-card">
      <div class="chart-title">Favorite Pets 🐶</div>
      <span class="chart-type-tag tag-bar">Bar Chart</span>

      <svg class="chart-svg" viewBox="0 0 240 170" id="barSvg">
        
        <line x1="35" y1="20" x2="225" y2="20" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="35" y1="65" x2="225" y2="65" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="35" y1="110" x2="225" y2="110" stroke="#e2e8f0" stroke-dasharray="3,3" />
        
        
        <line x1="35" y1="15" x2="35" y2="130" stroke="#94a3b8" stroke-width="1.5" />
        <text x="28" y="24" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">8</text>
        <text x="28" y="69" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">5</text>
        <text x="28" y="114" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">2</text>

        
        <line x1="35" y1="130" x2="230" y2="130" stroke="#94a3b8" stroke-width="1.5" />

        
        <path d="M 94 85 L 106 85" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="2,2" />
        <text x="100" y="80" font-size="9" fill="#3b82f6" font-weight="700" text-anchor="middle">GAP</text>

        <path d="M 154 85 L 166 85" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="2,2" />
        <text x="160" y="80" font-size="9" fill="#3b82f6" font-weight="700" text-anchor="middle">GAP</text>

        
        
        <rect id="bar-0" class="bar-rect" x="46" y="20" width="48" height="110" rx="4" fill="#38bdf8" />
        <text id="lbl-0" class="bar-label" x="70" y="146" font-size="12" fill="#1e2945" font-weight="600" text-anchor="middle">Dogs</text>

        
        <rect id="bar-1" class="bar-rect" x="106" y="62" width="48" height="68" rx="4" fill="#60a5fa" />
        <text id="lbl-1" class="bar-label" x="130" y="146" font-size="12" fill="#1e2945" font-weight="600" text-anchor="middle">Cats</text>

        
        <rect id="bar-2" class="bar-rect" x="166" y="88" width="48" height="42" rx="4" fill="#818cf8" />
        <text id="lbl-2" class="bar-label" x="190" y="146" font-size="12" fill="#1e2945" font-weight="600" text-anchor="middle">Fish</text>
      </svg>

      <div class="feature-badge badge-bar">
        <span>↔️</span> Gaps (Discrete Categories)
      </div>

      <button class="interactive-btn" id="reorderBtn">
        <span>🔀</span> Reorder Categories
      </button>
    </div>

    
    <div class="chart-card">
      <div class="chart-title">Running Times ⏱️</div>
      <span class="chart-type-tag tag-hist">Histogram</span>

      <svg class="chart-svg" viewBox="0 0 240 170" id="histSvg">
        
        <line x1="30" y1="20" x2="225" y2="20" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="30" y1="65" x2="225" y2="65" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="30" y1="110" x2="225" y2="110" stroke="#e2e8f0" stroke-dasharray="3,3" />

        
        <line x1="30" y1="15" x2="30" y2="130" stroke="#94a3b8" stroke-width="1.5" />
        <text x="24" y="24" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">6</text>
        <text x="24" y="69" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">4</text>
        <text x="24" y="114" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">2</text>

        
        
        <rect x="35" y="88" width="46" height="42" fill="#c084fc" stroke="#7e22ce" stroke-width="1" />
        
        <rect x="81" y="20" width="46" height="110" fill="#a855f7" stroke="#7e22ce" stroke-width="1" />
        
        <rect x="127" y="56" width="46" height="74" fill="#9333ea" stroke="#7e22ce" stroke-width="1" />
        
        <rect x="173" y="102" width="46" height="28" fill="#7e22ce" stroke="#581c87" stroke-width="1" />

        
        <line x1="30" y1="130" x2="225" y2="130" stroke="#94a3b8" stroke-width="1.5" />

        
        <line x1="35" y1="130" x2="35" y2="135" stroke="#94a3b8" stroke-width="1.5" />
        <text x="35" y="146" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">0</text>

        <line x1="81" y1="130" x2="81" y2="135" stroke="#94a3b8" stroke-width="1.5" />
        <text x="81" y="146" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">10</text>

        <line x1="127" y1="130" x2="127" y2="135" stroke="#94a3b8" stroke-width="1.5" />
        <text x="127" y="146" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">20</text>

        <line x1="173" y1="130" x2="173" y2="135" stroke="#94a3b8" stroke-width="1.5" />
        <text x="173" y="146" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">30</text>

        <line x1="219" y1="130" x2="219" y2="135" stroke="#94a3b8" stroke-width="1.5" />
        <text x="219" y="146" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">40</text>
        
        <text x="127" y="163" font-size="10" fill="#64748b" font-weight="600" text-anchor="middle">Minutes (Continuous Number Line)</text>
      </svg>

      <div class="feature-badge badge-hist">
        <span>🤝</span> Touching (Continuous Intervals)
      </div>

      <button class="interactive-btn" id="histBtn">
        <span>🔒</span> Order is Fixed (0 → 40)
      </button>
    </div>
  </div>

  <script>
    // Positions for 3 slots in Bar Chart
    const slots = [
      { rectX: 46, lblX: 70 },
      { rectX: 106, lblX: 130 },
      { rectX: 166, lblX: 190 }
    ];

    let currentOrder = [0, 1, 2];

    const reorderBtn = document.getElementById('reorderBtn');
    reorderBtn.addEventListener('click', () => {
      // Cycle order: [0,1,2] -> [1,2,0] -> [2,0,1]
      currentOrder.push(currentOrder.shift());
      
      currentOrder.forEach((itemIdx, slotIdx) => {
        const bar = document.getElementById(`bar-${itemIdx}`);
        const lbl = document.getElementById(`lbl-${itemIdx}`);
        bar.setAttribute('x', slots[slotIdx].rectX);
        lbl.setAttribute('x', slots[slotIdx].lblX);
      });
    });

    const histBtn = document.getElementById('histBtn');
    const histSvg = document.getElementById('histSvg');
    
    histBtn.addEventListener('click', () => {
      histSvg.classList.remove('shake');
      void histSvg.offsetWidth; // Trigger reflow
      histSvg.classList.add('shake');
    });
  </script>
</body>
</html>

OGM.7.SP.2

Aligned learning resources

Related diagrams