71 Sampling & Nyquist Theorem Visualizer

Interactive Signal Sampling and Aliasing Demonstration

71.1 Interactive Sampling Visualizer

Learning Objectives

By using this interactive tool, you will be able to:

Understand why sampling rate matters in IoT sensor systems
Visualize the Nyquist theorem and aliasing effects
Calculate minimum sampling rates for accurate signal capture
Apply these concepts to real sensor design decisions

For Beginners: What is Sampling?

Sampling converts continuous analog signals into discrete digital values.

Think of it like taking photos of a moving car:

Photo Rate	Result
1 photo/second	Can track slow movements
10 photos/second	Captures walking speed
1000 photos/second	Captures fast motion

The Nyquist Theorem says: To accurately capture a signal, you must sample at least 2x the highest frequency in that signal.

Signal at 50 Hz? Sample at minimum 100 Hz
Audio up to 20 kHz? Sample at minimum 40 kHz (CD uses 44.1 kHz)
Temperature changing slowly? Low sample rate is fine

71.2 Signal Generator

Create a signal to visualize sampling effects:

Show code

viewof signalFreq = Inputs.range([1, 50], {
  label: "Signal Frequency (Hz):",
  step: 1,
  value: 10
})

viewof signalAmplitude = Inputs.range([0.1, 2], {
  label: "Signal Amplitude:",
  step: 0.1,
  value: 1
})

viewof signalType = Inputs.radio(
  ["Sine", "Square", "Triangle", "Composite"],
  {label: "Signal Type:", value: "Sine"}
)

71.3 Sampling Configuration

Show code

nyquistRate = signalFreq * 2

viewof samplingRate = Inputs.range([1, 200], {
  label: "Sampling Rate (Hz):",
  step: 1,
  value: 50
})

samplingStatus = {
  const ratio = samplingRate / signalFreq;
  if (ratio >= 2) {
    return {status: "good", message: `Nyquist satisfied (${ratio.toFixed(1)}x signal frequency)`, color: "#27AE60"};
  } else if (ratio >= 1) {
    return {status: "warning", message: `Below Nyquist! Aliasing will occur (${ratio.toFixed(1)}x < 2x required)`, color: "#E67E22"};
  } else {
    return {status: "bad", message: `Severe aliasing! Sampling slower than signal (${ratio.toFixed(1)}x)`, color: "#E74C3C"};
  }
}

Show code

html`
<div style="background: ${samplingStatus.color}20; padding: 15px; border-radius: 8px; margin: 15px 0;
            border-left: 4px solid ${samplingStatus.color};">
  <strong style="color: ${samplingStatus.color};">
    ${samplingStatus.status === "good" ? "✓" : "⚠"} ${samplingStatus.message}
  </strong>
  <div style="margin-top: 10px; color: #666;">
    Signal: <strong>${signalFreq} Hz</strong> |
    Nyquist minimum: <strong>${nyquistRate} Hz</strong> |
    Your rate: <strong>${samplingRate} Hz</strong>
  </div>
</div>
`

71.4 Signal Visualization

Show code

signalData = {
  const points = [];
  const duration = 1; // 1 second
  const resolution = 1000; // points for smooth curve

  for (let i = 0; i <= resolution; i++) {
    const t = (i / resolution) * duration;
    let y;

    if (signalType === "Sine") {
      y = signalAmplitude * Math.sin(2 * Math.PI * signalFreq * t);
    } else if (signalType === "Square") {
      y = signalAmplitude * Math.sign(Math.sin(2 * Math.PI * signalFreq * t));
    } else if (signalType === "Triangle") {
      const phase = (signalFreq * t) % 1;
      y = signalAmplitude * (4 * Math.abs(phase - 0.5) - 1);
    } else {
      // Composite: fundamental + 3rd harmonic
      y = signalAmplitude * (Math.sin(2 * Math.PI * signalFreq * t) +
                             0.3 * Math.sin(2 * Math.PI * signalFreq * 3 * t));
    }

    points.push({t: t, y: y, type: "original"});
  }

  return points;
}

// Generate sample points
samplePoints = {
  const samples = [];
  const duration = 1;
  const numSamples = Math.floor(samplingRate * duration);

  for (let i = 0; i <= numSamples; i++) {
    const t = i / samplingRate;
    if (t > duration) break;

    let y;
    if (signalType === "Sine") {
      y = signalAmplitude * Math.sin(2 * Math.PI * signalFreq * t);
    } else if (signalType === "Square") {
      y = signalAmplitude * Math.sign(Math.sin(2 * Math.PI * signalFreq * t));
    } else if (signalType === "Triangle") {
      const phase = (signalFreq * t) % 1;
      y = signalAmplitude * (4 * Math.abs(phase - 0.5) - 1);
    } else {
      y = signalAmplitude * (Math.sin(2 * Math.PI * signalFreq * t) +
                             0.3 * Math.sin(2 * Math.PI * signalFreq * 3 * t));
    }

    samples.push({t: t, y: y});
  }

  return samples;
}

// Reconstructed signal (from samples)
reconstructedData = {
  const points = [];
  const duration = 1;
  const resolution = 1000;

  if (samplePoints.length < 2) return points;

  for (let i = 0; i <= resolution; i++) {
    const t = (i / resolution) * duration;

    // Simple linear interpolation between samples
    let y = 0;
    for (let j = 0; j < samplePoints.length - 1; j++) {
      if (t >= samplePoints[j].t && t <= samplePoints[j + 1].t) {
        const ratio = (t - samplePoints[j].t) / (samplePoints[j + 1].t - samplePoints[j].t);
        y = samplePoints[j].y + ratio * (samplePoints[j + 1].y - samplePoints[j].y);
        break;
      }
    }

    points.push({t: t, y: y, type: "reconstructed"});
  }

  return points;
}

Show code

// Create visualization
chart = {
  const width = 700;
  const height = 350;
  const margin = {top: 30, right: 30, bottom: 50, left: 50};

  const svg = d3.create("svg")
    .attr("viewBox", [0, 0, width, height])
    .style("max-width", "100%")
    .style("font-family", "system-ui");

  // Scales
  const xScale = d3.scaleLinear()
    .domain([0, 1])
    .range([margin.left, width - margin.right]);

  const yScale = d3.scaleLinear()
    .domain([-2, 2])
    .range([height - margin.bottom, margin.top]);

  // Grid
  svg.append("g")
    .attr("stroke", "#E5E5E5")
    .attr("stroke-width", 0.5)
    .selectAll("line")
    .data(d3.range(0, 1.1, 0.1))
    .join("line")
    .attr("x1", d => xScale(d))
    .attr("x2", d => xScale(d))
    .attr("y1", margin.top)
    .attr("y2", height - margin.bottom);

  // Zero line
  svg.append("line")
    .attr("x1", margin.left)
    .attr("x2", width - margin.right)
    .attr("y1", yScale(0))
    .attr("y2", yScale(0))
    .attr("stroke", "#999")
    .attr("stroke-dasharray", "4,4");

  // Original signal
  const line = d3.line()
    .x(d => xScale(d.t))
    .y(d => yScale(d.y));

  svg.append("path")
    .datum(signalData)
    .attr("fill", "none")
    .attr("stroke", "#3498DB")
    .attr("stroke-width", 2)
    .attr("d", line);

  // Reconstructed signal
  svg.append("path")
    .datum(reconstructedData)
    .attr("fill", "none")
    .attr("stroke", "#E74C3C")
    .attr("stroke-width", 1.5)
    .attr("stroke-dasharray", "5,3")
    .attr("d", line);

  // Sample points
  svg.selectAll(".sample")
    .data(samplePoints)
    .join("circle")
    .attr("cx", d => xScale(d.t))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5)
    .attr("fill", "#E67E22")
    .attr("stroke", "white")
    .attr("stroke-width", 2);

  // Vertical lines to samples
  svg.selectAll(".sample-line")
    .data(samplePoints)
    .join("line")
    .attr("x1", d => xScale(d.t))
    .attr("x2", d => xScale(d.t))
    .attr("y1", yScale(0))
    .attr("y2", d => yScale(d.y))
    .attr("stroke", "#E67E22")
    .attr("stroke-width", 1)
    .attr("stroke-dasharray", "2,2")
    .attr("opacity", 0.5);

  // Axes
  svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(xScale).ticks(10).tickFormat(d => d + "s"))
    .selectAll("text")
    .attr("font-size", 11);

  svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(yScale).ticks(5))
    .selectAll("text")
    .attr("font-size", 11);

  // Labels
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", height - 10)
    .attr("text-anchor", "middle")
    .attr("font-size", 12)
    .text("Time (seconds)");

  svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -height / 2)
    .attr("y", 15)
    .attr("text-anchor", "middle")
    .attr("font-size", 12)
    .text("Amplitude");

  // Legend
  const legend = svg.append("g")
    .attr("transform", `translate(${width - 180}, 15)`);

  legend.append("line")
    .attr("x1", 0).attr("x2", 20)
    .attr("y1", 5).attr("y2", 5)
    .attr("stroke", "#3498DB")
    .attr("stroke-width", 2);
  legend.append("text")
    .attr("x", 25).attr("y", 9)
    .attr("font-size", 11)
    .text("Original Signal");

  legend.append("line")
    .attr("x1", 0).attr("x2", 20)
    .attr("y1", 25).attr("y2", 25)
    .attr("stroke", "#E74C3C")
    .attr("stroke-width", 1.5)
    .attr("stroke-dasharray", "5,3");
  legend.append("text")
    .attr("x", 25).attr("y", 29)
    .attr("font-size", 11)
    .text("Reconstructed");

  legend.append("circle")
    .attr("cx", 10).attr("cy", 45)
    .attr("r", 5)
    .attr("fill", "#E67E22");
  legend.append("text")
    .attr("x", 25).attr("y", 49)
    .attr("font-size", 11)
    .text("Sample Points");

  return svg.node();
}

71.5 IoT Sampling Scenarios

Apply sampling theory to real IoT applications:

Show code

iotScenarios = [
  {
    name: "Temperature Monitoring (Building)",
    signalCharacteristics: "Slow changes: 0.01-0.1 Hz (minutes to hours)",
    minNyquist: "0.2 Hz",
    practicalRate: "1 sample/minute (0.017 Hz) to 1 sample/second",
    reasoning: "Temperature changes slowly in buildings. Oversampling wastes power and storage.",
    powerImpact: "Low sample rate = years of battery life"
  },
  {
    name: "Vibration Monitoring (Industrial)",
    signalCharacteristics: "High frequency: 10-10,000 Hz",
    minNyquist: "20,000 Hz",
    practicalRate: "25-50 kHz typical",
    reasoning: "Machine vibrations contain high frequencies that indicate bearing wear, imbalance.",
    powerImpact: "High sample rate = continuous power needed"
  },
  {
    name: "Heart Rate Monitor (Wearable)",
    signalCharacteristics: "ECG: 0.5-40 Hz",
    minNyquist: "80 Hz",
    practicalRate: "100-250 Hz for medical grade",
    reasoning: "Must capture QRS complex details for accurate heart rate and arrhythmia detection.",
    powerImpact: "Moderate - duty cycling helps"
  },
  {
    name: "Motion Detection (PIR)",
    signalCharacteristics: "Human movement: 0.5-10 Hz",
    minNyquist: "20 Hz",
    practicalRate: "10-50 Hz polling",
    reasoning: "Captures human walking and arm movements. Higher for sports applications.",
    powerImpact: "Low to moderate"
  },
  {
    name: "Audio Capture (Voice)",
    signalCharacteristics: "Speech: 300-3400 Hz (telephone), up to 8 kHz (quality)",
    minNyquist: "16 kHz",
    practicalRate: "8-48 kHz depending on quality",
    reasoning: "Phone uses 8 kHz, music uses 44.1-48 kHz to capture full spectrum.",
    powerImpact: "High - significant processing"
  },
  {
    name: "GPS Position (Asset Tracking)",
    signalCharacteristics: "Movement: depends on speed (walking ~1 Hz, driving ~0.1 Hz)",
    minNyquist: "2 Hz for walking",
    practicalRate: "1-10 Hz for vehicles, 0.01-0.1 Hz for stationary assets",
    reasoning: "Sample more often when moving, less when stationary to save power.",
    powerImpact: "GPS is power hungry - adaptive sampling critical"
  }
]

viewof selectedIoTScenario = Inputs.select(iotScenarios, {
  label: "IoT Application:",
  format: s => s.name
})

Show code

html`
<div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin: 20px 0;">
  <h4 style="margin-top: 0; color: #2C3E50;">${selectedIoTScenario.name}</h4>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
    <div style="background: white; padding: 15px; border-radius: 8px;">
      <div style="color: #666; font-size: 12px;">SIGNAL CHARACTERISTICS</div>
      <div style="font-weight: bold; color: #2C3E50;">${selectedIoTScenario.signalCharacteristics}</div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px;">
      <div style="color: #666; font-size: 12px;">MINIMUM NYQUIST RATE</div>
      <div style="font-weight: bold; color: #E67E22;">${selectedIoTScenario.minNyquist}</div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px;">
      <div style="color: #666; font-size: 12px;">PRACTICAL SAMPLE RATE</div>
      <div style="font-weight: bold; color: #27AE60;">${selectedIoTScenario.practicalRate}</div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px;">
      <div style="color: #666; font-size: 12px;">POWER IMPACT</div>
      <div style="font-weight: bold; color: #3498DB;">${selectedIoTScenario.powerImpact}</div>
    </div>
  </div>

  <div style="background: #E8F4FD; padding: 15px; border-radius: 8px; margin-top: 15px;">
    <strong>Design Reasoning:</strong> ${selectedIoTScenario.reasoning}
  </div>
</div>
`

71.6 Sampling Rate Calculator

Calculate the minimum sampling rate for your application:

Show code

viewof maxFrequency = Inputs.range([0.1, 10000], {
  label: "Highest Signal Frequency (Hz):",
  step: 0.1,
  value: 100
})

viewof safetyMargin = Inputs.range([1, 5], {
  label: "Safety Margin Multiplier:",
  step: 0.5,
  value: 2.5
})

calculatedRate = {
  const nyquist = maxFrequency * 2;
  const practical = maxFrequency * safetyMargin;
  const samplesPerSecond = practical;
  const bitsPerSample = 16; // Typical ADC resolution
  const dataRateBps = samplesPerSecond * bitsPerSample;

  return {
    nyquist: nyquist,
    practical: practical,
    dataRateBps: dataRateBps,
    dataRateKBps: dataRateBps / 8 / 1000,
    samplesPerHour: practical * 3600,
    storagePerDay: (dataRateBps / 8) * 86400 / 1e6
  };
}

Show code

html`
<div style="background: linear-gradient(135deg, #E8F6F3 0%, #D5F4E6 100%);
            padding: 20px; border-radius: 12px; margin: 20px 0;">
  <h4 style="margin-top: 0; color: #16A085;">Calculated Sampling Requirements</h4>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
    <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
      <div style="color: #666; font-size: 12px;">NYQUIST MINIMUM</div>
      <div style="font-size: 24px; font-weight: bold; color: #E67E22;">
        ${calculatedRate.nyquist.toLocaleString()} Hz
      </div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
      <div style="color: #666; font-size: 12px;">RECOMMENDED RATE</div>
      <div style="font-size: 24px; font-weight: bold; color: #27AE60;">
        ${calculatedRate.practical.toLocaleString()} Hz
      </div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
      <div style="color: #666; font-size: 12px;">DATA RATE (16-bit)</div>
      <div style="font-size: 24px; font-weight: bold; color: #3498DB;">
        ${calculatedRate.dataRateKBps.toFixed(2)} KB/s
      </div>
    </div>

    <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
      <div style="color: #666; font-size: 12px;">STORAGE PER DAY</div>
      <div style="font-size: 24px; font-weight: bold; color: #9B59B6;">
        ${calculatedRate.storagePerDay.toFixed(2)} MB
      </div>
    </div>
  </div>

  <div style="margin-top: 15px; color: #666; font-size: 13px;">
    <strong>Note:</strong> Practical systems use 2-5x the Nyquist rate to account for anti-aliasing filters and signal variations.
  </div>
</div>
`

71.7 Knowledge Check

Question 1

A temperature sensor captures readings that change at most once per minute. What is the minimum sampling rate according to Nyquist?

1 sample/minute
2 samples/minute
1 sample/second
60 samples/second

Answer

B) 2 samples/minute - If the signal changes at most once per minute (1/60 Hz), Nyquist requires at least 2x that rate = 2 samples/minute. In practice, you’d sample more often for reliability.

Question 2

A vibration sensor needs to detect frequencies up to 5 kHz. You’re seeing strange low-frequency patterns in the data. What’s likely happening?

The sensor is broken
Aliasing due to undersampling
Electrical interference
Temperature drift

Answer

B) Aliasing due to undersampling - High frequencies that aren’t properly sampled “fold back” and appear as lower frequencies. If sampling at less than 10 kHz (2 x 5 kHz), frequencies above Nyquist will alias to false lower frequencies.

Question 3

Why do practical IoT systems often sample at 2.5-5x the Nyquist rate instead of exactly 2x?

To waste power intentionally
To allow for anti-aliasing filter rolloff and signal variations
Because Nyquist is wrong
To fill storage faster

Answer

B) To allow for anti-aliasing filter rolloff and signal variations - Real analog filters can’t cut off sharply at Nyquist. Extra margin allows the filter to attenuate high frequencies before they alias, and accommodates signals that occasionally exceed expected bandwidth.

71.1 Interactive Sampling Visualizer

71.2 Signal Generator

71.3 Sampling Configuration

71.4 Signal Visualization

71.5 IoT Sampling Scenarios

71.6 Sampling Rate Calculator

71.7 Knowledge Check

71.8 Related Resources