<!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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      user-select: none;
    }
    .badge-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .badge-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .badge-btn .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .badge-btn[data-zone="0"] .dot { background: #3b82f6; }
    .badge-btn[data-zone="1"] .dot { background: #10b981; }
    .badge-btn[data-zone="2"] .dot { background: #f59e0b; }

    .badge-btn.active {
      color: #0f172a;
      background: #ffffff;
      box-shadow: 0 0 0 2px #0284c7, 0 2px 6px rgba(0,0,0,0.08);
      border-color: transparent;
    }

    .chart-container {
      width: 100%;
      max-width: 500px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .axis-line { stroke: #94a3b8; stroke-width: 1.5; stroke-linecap: round; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 3,3; }
    .tick-text { fill: #64748b; font-size: 11px; font-weight: 500; }
    .axis-label { fill: #334155; font-size: 12px; font-weight: 700; }

    .zone-bg {
      transition: fill-opacity 0.3s ease;
      cursor: pointer;
    }
    .zone-bg:hover { fill-opacity: 0.22; }

    .curve-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tangent-line {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 5,4;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .marker-point {
      fill: #dc2626;
      stroke: #ffffff;
      stroke-width: 2.5;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .rate-pill {
      position: absolute;
      background: rgba(15, 23, 42, 0.9);
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      pointer-events: none;
      transform: translate(-50%, -100%);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      white-space: nowrap;
    }
    .rate-pill::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: rgba(15, 23, 42, 0.9) transparent transparent transparent;
    }
  </style>
</head>
<body>

  <div class="badge-bar">
    <button class="badge-btn active" data-zone="0">
      <span class="dot"></span> 1 · Lag Phase
    </button>
    <button class="badge-btn" data-zone="1">
      <span class="dot"></span> 2 · Exponential
    </button>
    <button class="badge-btn" data-zone="2">
      <span class="dot"></span> 3 · Plateau
    </button>
  </div>

  <div class="chart-container" id="chartBox">
    <div id="ratePill" class="rate-pill">Slow Rate</div>
    <svg viewBox="0 0 500 300" id="graphSvg">
      <defs>
        <clipPath id="chartClip">
          <rect x="55" y="25" width="420" height="235" />
        </clipPath>
      </defs>

      
      <g clip-path="url(#chartClip)">
        <rect id="zone0" class="zone-bg" x="55" y="25" width="140" height="235" fill="#3b82f6" fill-opacity="0.12" />
        <rect id="zone1" class="zone-bg" x="195" y="25" width="140" height="235" fill="#10b981" fill-opacity="0.08" />
        <rect id="zone2" class="zone-bg" x="335" y="25" width="140" height="235" fill="#f59e0b" fill-opacity="0.08" />
      </g>

      
      <line x1="195" y1="25" x2="195" y2="260" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />
      <line x1="335" y1="25" x2="335" y2="260" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />

      
      <line class="grid-line" x1="55" y1="201" x2="475" y2="201" />
      <line class="grid-line" x1="55" y1="143" x2="475" y2="143" />
      <line class="grid-line" x1="55" y1="84" x2="475" y2="84" />
      <line class="grid-line" x1="55" y1="25" x2="475" y2="25" />

      
      <line class="axis-line" x1="55" y1="260" x2="480" y2="260" />
      <line class="axis-line" x1="55" y1="260" x2="55" y2="20" />

      
      <text class="tick-text" x="48" y="264" text-anchor="end">0</text>
      <text class="tick-text" x="48" y="205" text-anchor="end">25</text>
      <text class="tick-text" x="48" y="147" text-anchor="end">50</text>
      <text class="tick-text" x="48" y="88" text-anchor="end">75</text>
      <text class="tick-text" x="48" y="29" text-anchor="end">100</text>
      <text class="axis-label" x="18" y="145" transform="rotate(-90 18 145)" text-anchor="middle">Biomass (mg/L)</text>

      
      <text class="tick-text" x="55" y="278" text-anchor="middle">0</text>
      <text class="tick-text" x="195" y="278" text-anchor="middle">10</text>
      <text class="tick-text" x="335" y="278" text-anchor="middle">20</text>
      <text class="tick-text" x="475" y="278" text-anchor="middle">30</text>
      <text class="axis-label" x="265" y="295" text-anchor="middle">Days</text>

      
      <path id="growthCurve" class="curve-path" />

      
      <g clip-path="url(#chartClip)">
        <line id="tangentLine" class="tangent-line" x1="0" y1="0" x2="0" y2="0" />
      </g>

      
      <circle id="markerPoint" class="marker-point" cx="0" cy="0" r="6" />
    </svg>
  </div>

  <script>
    // Mathematical Model: Sigmoidal Algal Biomass
    // Days 0 to 30, Biomass 0 to 100 mg/L
    const L = 100; // Carrying capacity
    const k = 0.38; // Growth rate constant
    const t0 = 15; // Midpoint day

    function biomass(t) {
      return L / (1 + Math.exp(-k * (t - t0)));
    }

    function slope(t) {
      const b = biomass(t);
      return k * b * (1 - b / L);
    }

    // Coordinate Mapping (SVG viewBox: 500x300, Chart: x 55->475, y 260->25)
    function toSvgX(t) { return 55 + (t / 30) * 420; }
    function toSvgY(b) { return 260 - (b / 100) * 235; }

    // Render Exact Math Curve
    let pathD = '';
    for (let t = 0; t <= 30; t += 0.25) {
      const x = toSvgX(t).toFixed(1);
      const y = toSvgY(biomass(t)).toFixed(1);
      pathD += (t === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
    }
    document.getElementById('growthCurve').setAttribute('d', pathD);

    // Zone Tangent Target States
    const zoneStates = [
      { t: 5,  label: "Gentle Slope · Slow Rate",  highlight: "#3b82f6" },
      { t: 15, label: "Steep Slope · Rapid Rate", highlight: "#10b981" },
      { t: 25, label: "Flat Slope · Zero Rate",   highlight: "#f59e0b" }
    ];

    let currentZone = 0;
    const tangentEl = document.getElementById('tangentLine');
    const markerEl = document.getElementById('markerPoint');
    const ratePill = document.getElementById('ratePill');
    const buttons = document.querySelectorAll('.badge-btn');
    const zoneRects = [
      document.getElementById('zone0'),
      document.getElementById('zone1'),
      document.getElementById('zone2')
    ];

    function updateZone(idx) {
      currentZone = idx;
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));

      zoneRects.forEach((rect, i) => {
        rect.setAttribute('fill-opacity', i === idx ? '0.24' : '0.06');
      });

      const state = zoneStates[idx];
      const t = state.t;
      const b = biomass(t);
      const m = slope(t); // mg/L per day

      const cx = toSvgX(t);
      const cy = toSvgY(b);

      // SVG delta mapping
      const dxDays = 4;
      const dyBiomass = m * dxDays;
      const x1 = toSvgX(t - dxDays);
      const y1 = toSvgY(b - dyBiomass);
      const x2 = toSvgX(t + dxDays);
      const y2 = toSvgY(b + dyBiomass);

      tangentEl.setAttribute('x1', x1);
      tangentEl.setAttribute('y1', y1);
      tangentEl.setAttribute('x2', x2);
      tangentEl.setAttribute('y2', y2);

      markerEl.setAttribute('cx', cx);
      markerEl.setAttribute('cy', cy);

      // Position HTML Pill relative to chart container (% coords)
      const pillLeft = (cx / 500) * 100;
      const pillTop = ((cy - 12) / 300) * 100;
      ratePill.style.left = `${pillLeft}%`;
      ratePill.style.top = `${pillTop}%`;
      ratePill.textContent = state.label;
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => updateZone(i));
    });

    zoneRects.forEach((rect, i) => {
      rect.addEventListener('click', () => updateZone(i));
    });

    // Initialize Lag Phase
    updateZone(0);
  </script>
</body>
</html>

Identifying Patterns and Trends in Complex Data

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Predator-Prey Cycle</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 620px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .legend {
      display: flex;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .line-indicator {
      width: 22px;
      height: 4px;
      border-radius: 2px;
    }
    .hare-indicator {
      background-color: #06b6d4;
    }
    .lynx-indicator {
      background: repeating-linear-gradient(90deg, #1e2945, #1e2945 4px, transparent 4px, transparent 8px);
    }
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 620px;
      margin-bottom: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .btn-step {
      flex: 1;
      min-width: 100px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      color: #475569;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .btn-step.active {
      background: #06b6d4;
      border-color: #0891b2;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(6, 182, 212, 0.3);
    }
    .graph-container {
      position: relative;
      width: 100%;
      max-width: 620px;
      height: 280px;
      background: #fafbfc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 2 2;
    }
    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }
    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
      user-select: none;
    }
    .hare-curve {
      fill: none;
      stroke: #06b6d4;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .lynx-curve {
      fill: none;
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .callout {
      position: absolute;
      background: #ffffff;
      border: 1.5px solid #1e2945;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      pointer-events: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      transition: opacity 0.3s ease, transform 0.3s ease;
      opacity: 0.95;
    }
    .callout.hare-callout {
      border-color: #06b6d4;
      color: #0e7490;
      background: #ecfeff;
    }
    .callout.lynx-callout {
      border-color: #1e2945;
      color: #1e2945;
      background: #f8fafc;
    }
    .callout.cycle-callout {
      border-color: #6366f1;
      color: #4338ca;
      background: #eef2ff;
    }
    .callout-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }
    .marker-dot {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .scan-line {
      stroke: #f59e0b;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      transition: x1 0.4s ease, x2 0.4s ease;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="legend">
      <div class="legend-item">
        <div class="line-indicator hare-indicator"></div>
        <span>Snowshoe Hare</span>
      </div>
      <div class="legend-item">
        <div class="line-indicator lynx-indicator"></div>
        <span>Canadian Lynx</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-step active" onclick="setStep(0)">All Stages</button>
    <button class="btn-step" onclick="setStep(1)">1. Hare Peak</button>
    <button class="btn-step" onclick="setStep(2)">2. Lynx Lag</button>
    <button class="btn-step" onclick="setStep(3)">3. Cycle Repeats</button>
  </div>

  <div class="graph-container" id="graphBox">
    <svg id="chart" viewBox="0 0 600 280">
      
      <g id="grid"></g>

      
      <line x1="50" y1="240" x2="570" y2="240" class="axis-line" />
      <line x1="50" y1="20" x2="50" y2="240" class="axis-line" />

      
      <g id="axisTicks"></g>

      
      <text x="310" y="272" text-anchor="middle" class="axis-label" style="font-weight: 700; fill: #475569;">Time in Years (0 – 20)</text>
      <text x="18" y="130" text-anchor="middle" class="axis-label" style="font-weight: 700; fill: #475569; transform: rotate(-90deg); transform-origin: 18px 130px;">Population Count</text>

      
      <rect id="lagBox" x="144" y="25" width="44" height="215" fill="#f8fafc" stroke="#94a3b8" stroke-dasharray="2 2" opacity="0.4" />

      
      <path id="harePath" class="hare-curve" />
      <path id="lynxPath" class="lynx-curve" />

      
      <g id="markers"></g>
    </svg>

    
    <div id="callout1" class="callout hare-callout" style="left: 105px; top: 12px;">
      Peak Hare Population
    </div>

    <div id="callout2" class="callout lynx-callout" style="left: 195px; top: 62px;">
      Lagged Predator Boom<br><span style="font-size: 9.5px; font-weight: 500; color: #64748b;">(1–2 yr lag)</span>
    </div>

    <div id="callout3" class="callout cycle-callout" style="left: 350px; top: 18px;">
      Cycle Repeats<br><span style="font-size: 9.5px; font-weight: 500; color: #6366f1;">(~8 year period)</span>
    </div>
  </div>

  <script>
    const padding = { left: 50, right: 30, top: 25, bottom: 40 };
    const width = 600 - padding.left - padding.right;
    const height = 280 - padding.top - padding.bottom;

    // Coordinate mapping
    function getX(year) {
      return padding.left + (year / 20) * width;
    }
    function getY(val) {
      // val in [0, 100]
      return padding.top + height - (val / 100) * height;
    }

    // Mathematical predator-prey models (8-year cycle)
    // Hare peaks at Year 4, 12, 20 (period = 8)
    function harePop(t) {
      const cycle = (2 * Math.PI * (t - 2)) / 8;
      return 52 + 38 * Math.sin(cycle);
    }

    // Lynx lags by 1.5 years: peaks at Year 5.5, 13.5
    function lynxPop(t) {
      const cycle = (2 * Math.PI * (t - 3.5)) / 8;
      return 35 + 24 * Math.sin(cycle);
    }

    // Generate grid & labels
    const gridG = document.getElementById('grid');
    const ticksG = document.getElementById('axisTicks');

    for (let yVal = 20; yVal <= 100; yVal += 20) {
      const y = getY(yVal);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', padding.left);
      line.setAttribute('y1', y);
      line.setAttribute('x2', padding.left + width);
      line.setAttribute('y2', y);
      line.setAttribute('class', 'grid-line');
      gridG.appendChild(line);

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', padding.left - 8);
      txt.setAttribute('y', y + 4);
      txt.setAttribute('text-anchor', 'end');
      txt.setAttribute('class', 'axis-label');
      txt.textContent = yVal;
      ticksG.appendChild(txt);
    }

    for (let yr = 0; yr <= 20; yr += 2) {
      const x = getX(yr);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', x);
      line.setAttribute('y1', padding.top);
      line.setAttribute('x2', x);
      line.setAttribute('y2', padding.top + height);
      line.setAttribute('class', 'grid-line');
      gridG.appendChild(line);

      const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tick.setAttribute('x1', x);
      tick.setAttribute('y1', padding.top + height);
      tick.setAttribute('x2', x);
      tick.setAttribute('y2', padding.top + height + 4);
      tick.setAttribute('stroke', '#94a3b8');
      ticksG.appendChild(tick);

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', x);
      txt.setAttribute('y', padding.top + height + 16);
      txt.setAttribute('text-anchor', 'middle');
      txt.setAttribute('class', 'axis-label');
      txt.textContent = yr;
      ticksG.appendChild(txt);
    }

    // Build smooth sampled paths
    let hareD = '';
    let lynxD = '';
    const steps = 200;
    for (let i = 0; i <= steps; i++) {
      const t = (i / steps) * 20;
      const x = getX(t);
      const yH = getY(harePop(t));
      const yL = getY(lynxPop(t));

      hareD += (i === 0 ? `M ${x} ${yH}` : ` L ${x} ${yH}`);
      lynxD += (i === 0 ? `M ${x} ${yL}` : ` L ${x} ${yL}`);
    }

    document.getElementById('harePath').setAttribute('d', hareD);
    document.getElementById('lynxPath').setAttribute('d', lynxD);

    // Marker Points
    const markersG = document.getElementById('markers');
    const keyPoints = [
      { t: 4, fn: harePop, color: '#06b6d4', id: 'm1' },
      { t: 5.5, fn: lynxPop, color: '#1e2945', id: 'm2' },
      { t: 12, fn: harePop, color: '#06b6d4', id: 'm3' },
      { t: 13.5, fn: lynxPop, color: '#1e2945', id: 'm4' }
    ];

    keyPoints.forEach(p => {
      const cx = getX(p.t);
      const cy = getY(p.fn(p.t));
      const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', 5);
      c.setAttribute('fill', p.color);
      c.setAttribute('stroke', '#ffffff');
      c.setAttribute('stroke-width', 2);
      c.setAttribute('id', p.id);
      c.setAttribute('class', 'marker-dot');
      markersG.appendChild(c);
    });

    // Step Interaction Logic
    const callout1 = document.getElementById('callout1');
    const callout2 = document.getElementById('callout2');
    const callout3 = document.getElementById('callout3');
    const lagBox = document.getElementById('lagBox');
    const buttons = document.querySelectorAll('.btn-step');

    function setStep(step) {
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      if (step === 0) {
        callout1.style.opacity = '1';
        callout2.style.opacity = '1';
        callout3.style.opacity = '1';
        lagBox.style.opacity = '0.4';
      } else if (step === 1) {
        callout1.style.opacity = '1';
        callout2.style.opacity = '0.2';
        callout3.style.opacity = '0.2';
        lagBox.style.opacity = '0.1';
      } else if (step === 2) {
        callout1.style.opacity = '0.2';
        callout2.style.opacity = '1';
        callout3.style.opacity = '0.2';
        lagBox.style.opacity = '0.8';
      } else if (step === 3) {
        callout1.style.opacity = '0.2';
        callout2.style.opacity = '0.2';
        callout3.style.opacity = '1';
        lagBox.style.opacity = '0.1';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      padding: 10px;
    }
    .header-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    @media (max-width: 580px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .card-item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .cards-grid:hover .card-item:not(:hover) {
      opacity: 0.55;
    }
    .card-item:hover {
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      border-color: #cbd5e1;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 9999px;
      margin-bottom: 6px;
      line-height: 1;
    }
    .badge-pos {
      background: #e0f2fe;
      color: #0284c7;
    }
    .badge-neg {
      background: #ffe4e6;
      color: #e11d48;
    }
    .badge-zero {
      background: #f1f5f9;
      color: #475569;
    }
    .chart-container {
      width: 100%;
      max-width: 220px;
      aspect-ratio: 4 / 3;
      margin: 4px 0 6px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.25;
      stroke-linecap: round;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
      stroke-dasharray: 2 2;
    }
    .axis-text {
      font-size: 8px;
      font-weight: 600;
      fill: #64748b;
      font-family: inherit;
    }
    .trendline-pos {
      stroke: #0284c7;
      stroke-width: 2.25;
      stroke-linecap: round;
    }
    .trendline-neg {
      stroke: #e11d48;
      stroke-width: 2.25;
      stroke-linecap: round;
    }
    .trendline-zero {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
    }
    .scatter-point {
      transition: r 0.2s ease, fill-opacity 0.2s ease;
    }
    .card-item:hover .scatter-point {
      r: 4.2;
    }
    .point-pos {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 1;
    }
    .point-neg {
      fill: #e11d48;
      stroke: #ffffff;
      stroke-width: 1;
    }
    .point-zero {
      fill: #64748b;
      stroke: #ffffff;
      stroke-width: 1;
    }
    .summary-text {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
      color: #334155;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="header-title">Comparing Correlation Types</div>

  <div class="cards-grid">
    
    <div class="card-item">
      <span class="badge badge-pos">Positive (↗)</span>
      <div class="chart-container">
        <svg viewBox="0 0 160 120">
          <defs>
            <marker id="arrow-pos" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#0284c7" />
            </marker>
          </defs>
          
          <line x1="28" y1="30" x2="148" y2="30" class="grid-line" />
          <line x1="28" y1="60" x2="148" y2="60" class="grid-line" />
          <line x1="28" y1="90" x2="148" y2="90" class="grid-line" />
          <line x1="68" y1="10" x2="68" y2="95" class="grid-line" />
          <line x1="108" y1="10" x2="108" y2="95" class="grid-line" />
          
          <line x1="28" y1="95" x2="152" y2="95" class="axis-line" />
          <line x1="28" y1="95" x2="28" y2="8" class="axis-line" />
          
          <line x1="38" y1="88" x2="142" y2="18" class="trendline-pos" marker-end="url(#arrow-pos)" />
          
          <circle cx="36" cy="85" r="3.2" class="scatter-point point-pos" />
          <circle cx="48" cy="81" r="3.2" class="scatter-point point-pos" />
          <circle cx="56" cy="72" r="3.2" class="scatter-point point-pos" />
          <circle cx="67" cy="69" r="3.2" class="scatter-point point-pos" />
          <circle cx="78" cy="55" r="3.2" class="scatter-point point-pos" />
          <circle cx="92" cy="52" r="3.2" class="scatter-point point-pos" />
          <circle cx="104" cy="42" r="3.2" class="scatter-point point-pos" />
          <circle cx="116" cy="35" r="3.2" class="scatter-point point-pos" />
          <circle cx="127" cy="31" r="3.2" class="scatter-point point-pos" />
          <circle cx="138" cy="22" r="3.2" class="scatter-point point-pos" />
          
          <text x="88" y="112" text-anchor="middle" class="axis-text">Sunlight Intensity (lux) →</text>
          <text x="-52" y="14" transform="rotate(-90)" text-anchor="middle" class="axis-text">Water Temp (°C) →</text>
        </svg>
      </div>
      <p class="summary-text">As sunlight increases, water temperature increases.</p>
    </div>

    
    <div class="card-item">
      <span class="badge badge-neg">Negative (↘)</span>
      <div class="chart-container">
        <svg viewBox="0 0 160 120">
          <defs>
            <marker id="arrow-neg" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#e11d48" />
            </marker>
          </defs>
          
          <line x1="28" y1="30" x2="148" y2="30" class="grid-line" />
          <line x1="28" y1="60" x2="148" y2="60" class="grid-line" />
          <line x1="28" y1="90" x2="148" y2="90" class="grid-line" />
          <line x1="68" y1="10" x2="68" y2="95" class="grid-line" />
          <line x1="108" y1="10" x2="108" y2="95" class="grid-line" />
          
          <line x1="28" y1="95" x2="152" y2="95" class="axis-line" />
          <line x1="28" y1="95" x2="28" y2="8" class="axis-line" />
          
          <line x1="38" y1="18" x2="142" y2="88" class="trendline-neg" marker-end="url(#arrow-neg)" />
          
          <circle cx="36" cy="22" r="3.2" class="scatter-point point-neg" />
          <circle cx="47" cy="30" r="3.2" class="scatter-point point-neg" />
          <circle cx="58" cy="26" r="3.2" class="scatter-point point-neg" />
          <circle cx="69" cy="44" r="3.2" class="scatter-point point-neg" />
          <circle cx="80" cy="50" r="3.2" class="scatter-point point-neg" />
          <circle cx="91" cy="58" r="3.2" class="scatter-point point-neg" />
          <circle cx="103" cy="62" r="3.2" class="scatter-point point-neg" />
          <circle cx="115" cy="74" r="3.2" class="scatter-point point-neg" />
          <circle cx="126" cy="71" r="3.2" class="scatter-point point-neg" />
          <circle cx="138" cy="85" r="3.2" class="scatter-point point-neg" />
          
          <text x="88" y="112" text-anchor="middle" class="axis-text">Water Depth (m) →</text>
          <text x="-52" y="14" transform="rotate(-90)" text-anchor="middle" class="axis-text">Water Temp (°C) →</text>
        </svg>
      </div>
      <p class="summary-text">As water depth increases, water temperature decreases.</p>
    </div>

    
    <div class="card-item">
      <span class="badge badge-zero">Zero / None (—)</span>
      <div class="chart-container">
        <svg viewBox="0 0 160 120">
          
          <line x1="28" y1="30" x2="148" y2="30" class="grid-line" />
          <line x1="28" y1="60" x2="148" y2="60" class="grid-line" />
          <line x1="28" y1="90" x2="148" y2="90" class="grid-line" />
          <line x1="68" y1="10" x2="68" y2="95" class="grid-line" />
          <line x1="108" y1="10" x2="108" y2="95" class="grid-line" />
          
          <line x1="28" y1="95" x2="152" y2="95" class="axis-line" />
          <line x1="28" y1="95" x2="28" y2="8" class="axis-line" />
          
          <line x1="34" y1="55" x2="144" y2="55" class="trendline-zero" />
          
          <circle cx="38" cy="30" r="3.2" class="scatter-point point-zero" />
          <circle cx="46" cy="80" r="3.2" class="scatter-point point-zero" />
          <circle cx="58" cy="46" r="3.2" class="scatter-point point-zero" />
          <circle cx="72" cy="84" r="3.2" class="scatter-point point-zero" />
          <circle cx="82" cy="22" r="3.2" class="scatter-point point-zero" />
          <circle cx="94" cy="68" r="3.2" class="scatter-point point-zero" />
          <circle cx="106" cy="34" r="3.2" class="scatter-point point-zero" />
          <circle cx="118" cy="82" r="3.2" class="scatter-point point-zero" />
          <circle cx="130" cy="52" r="3.2" class="scatter-point point-zero" />
          <circle cx="140" cy="26" r="3.2" class="scatter-point point-zero" />
          
          <text x="88" y="112" text-anchor="middle" class="axis-text">Water Depth (m) →</text>
          <text x="-52" y="14" transform="rotate(-90)" text-anchor="middle" class="axis-text">Fish Tag ID (#) →</text>
        </svg>
      </div>
      <p class="summary-text">Fish Tag ID numbers show no relationship to depth.</p>
    </div>
  </div>

</body>
</html>

What Is a Pattern in Science?

Patterns in the Periodic Table

Patterns in Weather Data

Patterns in Population Data

Patterns in Geological Formations

Patterns in Animal Behavior

Patterns in Plant Growth

science

Identifying Patterns in the Natural World

Siedem jednostek podstawowych układu SI i ich współczesne definicje

Wyprowadzanie jednostek pochodnych z jednostek podstawowych

Przedrostki SI — wielokrotności od kilo do jotta

Przedrostki SI — podwielokrotności od mili do jokto

Zamiana jednostek powierzchni i objętości w systemie metrycznym

Przeliczanie jednostek prędkości km/h na m/s i jednostek złożonych

Przeliczanie jednostek energii — dżul, kilowatogodzina i elektronowolt

Jednostki ciśnienia — paskal, bar, atmosfera fizyczna i milimetr słupa rtęci

Układ SI, przedrostki i przeliczanie jednostek fizycznych

Analiza wymiarowa — sprawdzanie jednorodności równań fizycznych

Wyprowadzanie postaci zależności fizycznych metodą analizy wymiarowej

Bezwymiarowe wielkości fizyczne — kąt, współczynnik tarcia i współczynnik załamania

Kąt płaski i bryłowy — radian oraz steradian w układzie SI

Pozaukładowe jednostki w astronomii — rok świetlny, AU i parsek

Temperatura bezwzględna — kelwin a skale Celsjusza i Fahrenheita

Trening przeliczania złożonych jednostek i analizy wymiarowej

Analiza wymiarowa i jednostki specjalne w fizyce

Using Patterns to Predict Phenomena

Applying Patterns to Design Solutions

Identifying Patterns in Experimental Data

Connecting Patterns Across Disciplines

Evaluating Whether a Pattern Is Real

Applying and Evaluating Scientific Patterns

What Is a Cause-and-Effect Relationship?

Correlation vs. Causation in Science

Identifying Variables in Cause-and-Effect Investigations

Designing Controlled Experiments for Cause and Effect

Foundations of Cause and Effect in Science

Zapis wykładniczy — notacja naukowa liczb w fizyce

Szacowanie rzędu wielkości i zaokrąglanie do najbliższej potęgi dziesięciu

Problemy Fermiego — jak szacować złożone wielkości z prostych założeń

Obliczenia szacunkowe w kinematyce i dynamice — ocena czasu i dystansu

Obliczenia szacunkowe energii i mocy w zjawiskach codziennych

Szacowanie rzędów wielkości i problemy Fermiego w fizyce

Cause and Effect in Ecosystems

Cause and Effect in Weather and Climate

Cause and Effect in Geological Processes

Cause and Effect in Chemical Reactions

Cause and Effect in Human Body Systems

Cause and Effect Across Scientific Disciplines

Organizing Data in Structured Tables and Repeated Trials

Calculating Mean Values and Significant Figures in Data

Sources of Error and Significant Figures in Measurement

Constructing and Interpreting Linear Scatter Plots

Graphing Non-Linear Trends, Schematics, and Spatial Maps

Data Processing, Graphical Analysis, and Uncertainty

Obsługa kalkulatora naukowego — kolejność działań i nawiasy

Funkcje trygonometryczne i odwrotne w obliczeniach fizycznych na kalkulatorze

Potęgowanie, pierwiastkowanie i funkcje wykładnicze w zadaniach fizycznych

Stałe fizyczne w pamięci kalkulatora i ich wprowadzanie

Analiza krytyczna wyniku obliczeń — czy otrzymana liczba ma sens fizyczny?

Rozpoznawanie typowych błędów wprowadzania danych do kalkulatora

Obliczenia numeryczne dla zjawisk w mikroświecie — atomy i cząstki

Obliczenia numeryczne dla zjawisk w skali makro i kosmicznej

Zintegrowany trening szacowania i obliczeń kalkulatorem w zadaniach maturalnych

Kalkulator naukowy i precyzyjne obliczenia w zadaniach fizycznych

Multiple Causes, One Effect

One Cause, Multiple Effects

Analyzing Cause and Effect in Complex Systems

Evaluating Cause-and-Effect Claims in Science News

Analyzing Complex Cause-and-Effect Relationships

Gathering SI and Qualitative Data in Investigations

Building Data Tables With Repeated Trials and Averages

Graphing Results With Repeated Trials

Evaluating Model Size, Scale, Properties, and Materials

Identifying Sources of Error in Investigations

Using Math to Compare Science Data

Identifying Key Features and Patterns in Science Data

Using Input-Output Tables for Cause and Effect

Data Collection and Analysis

Wielkości skalarne a wektorowe — definicje i przykłady w fizyce

Cechy wektora — punkt przyłożenia, kierunek, zwrot i wartość

Geometryczne dodawanie wektorów — metoda trójkąta

Geometryczne dodawanie wektorów — metoda równoległoboku

Dodawanie wielu wektorów — metoda wieloboku wektorowego

Odejmowanie wektorów i pojęcie wektora przeciwnego

Mnożenie wektora przez skalar dodatni i ujemny

Wektory w fizyce — pojęcia podstawowe i metody geometryczne

Układ współrzędnych i rzuty wektora na osie x oraz y

Obliczanie składowych wektora za pomocą funkcji trygonometrycznych

Obliczanie wartości wektora i jego kierunku ze składowych — twierdzenie Pitagorasa

Analityczne dodawanie wektorów przez sumowanie składowych

Rozkład siły na równi pochyłej na składową styczną i normalną

Składanie prędkości w ruchu względnym — pływanie w rzece i lot z wiatrem

Iloczyn skalarny dwóch wektorów i jego zastosowanie w definicji pracy

Warunki równowagi sił dla punktu materialnego — zerowanie się sumy wektorowej

Trening rozwiązywania złożonych problemów wektorowych w mechanice

Analityczne metody wektorowe i ich zastosowanie w mechanice

Distinguishing Causation from Correlation in Science

Identifying Anomalies, Outliers, and Sources of Error

Using Secondary Data in Scientific Investigations

Empirical Data Analysis and Error Evaluation

Identifying Physical and Chemical Changes in Everyday Life

Recognizing Signs of Chemical Changes

Using Evidence to Explain Matter Changes

Using Particle Models to Explain State Changes

How Temperature Changes Affect Matter

Measuring Temperature During State Changes

Recording State Changes in a Data Table

Understanding Aqueous Solutions and Their Properties

Solid, Liquid, and Gas Solutes in Aqueous Solutions

Concentration and Dilution Word Problems

Changes in Matter and Solutions

Finding Significant Features in Data

Using Math to Find Relationships in Data

Calculating Averages and Ranges in Science Data

Analyzing and Interpreting Data

Forces and Their Effects on Objects

How Force Changes an Object's Speed

How Force Changes an Object's Direction

Using Force to Change an Object's Direction

Net Force: Balanced vs. Unbalanced Forces

Applied Force Calculations Using Newton's Second Law

Showing Direction Changes on a Distance-Time Graph

Generating Velocity-Time Graphs from Motion Data

Finding Patterns in Force and Motion Data

Planning Investigations to Test Force Effects

Forces and Motion

What Is a System in Science?

Identifying System Boundaries

Parts of a System and Their Roles

Interdependence Among System Parts

Inputs and Outputs of Systems

Open vs. Closed Systems

Feedback Loops in Systems

Fundamentals of Systems

Friction as a Force Affecting Motion

Calculating Net Force on an Object

Investigating Balanced and Unbalanced Forces

Building Models to Explain Motion and Energy

Forces in Everyday Situations

Net Force, Friction and Force Investigations

Rozchodzenie się niepewności dla sumy i różnicy wielkości fizycznych

Rozchodzenie się niepewności dla iloczynu i ilorazu — metoda niepewności względnych

Szacowanie niepewności złożonych metodą pochodnej logarytmicznej lub różniczki zupełnej

Reguły identyfikacji cyfr znaczących w danych pomiarowych i stałych

Zaokrąglanie wyników w operacjach dodawania i odejmowania

Zaokrąglanie wyników w operacjach mnożenia i dzielenia

Standardowy zapis końcowy wyniku pomiaru wraz z jednostką i niepewnością

Trening praktyczny analizy niepewności i zapisu wyników laboratoryjnych

Pomiary pośrednie, cyfry znaczące i prezentacja wyników laboratoryjnych

Using Models to Explain Space Phenomena

The Earth-Sun-Moon System

How Earth's Orbit and Tilt Create Seasons

Predicting Seasonal Patterns from Data

Graphing Daylight Length Changes

Earth-Sun Cycles: Seasons and Daylight

Projektowanie tabeli pomiarowej — nagłówki, jednostki i wskazanie niepewności

Wybór zmiennej niezależnej i zależnej oraz przypisanie ich do osi x oraz y

Dobór zakresów osi i optymalne wykorzystanie powierzchni wykresu

Właściwe skalowanie liniowe osi — dobór kroków podziałki (1, 2, 5 lub 10)

OGS.8.SEP.6

Aligned learning resources

Related diagrams