Skip to content

Signal Processing Timeline

Copy this iframe to your website:

1
<iframe src="https://dmccreary.github.io/signal-processing/sims/timeline-viewer/main.html" width="100%" height="752px"></iframe>

Run MicroSim in Fullscreen

View the events in vis.js JSON format

Description

This MicroSim is an interactive timeline of 50 milestones in the history of electronic signal processing. Each milestone is a box joined by a thin vertical line to a dot on the year axis. Boxes that would overlap are stacked in rows, so a year with several events (1996 has three) shows a column of boxes above one dot. The view opens on the years 1980 to 2000.

There are no buttons or sliders; you work directly on the timeline:

  • Pan: drag left or right to move through time. The timeline stops at 1800 and 2030.
  • Zoom: scroll the mouse wheel (or pinch on a touch screen) to widen or narrow the visible span. The span is limited to between 1 year and 40 years.
  • Read: the year axis at the bottom shows one label per year.

The events come from events.json, which lists an id, a text content and a start year for each milestone. The file was produced by an AI chatbot prompt (see Development Notes), so treat each year as a starting point for your own checking rather than as a citation.

The milestones touch many of the techniques taught in this book. This simulation belongs with Chapter 2: Introduction to Signals and Systems, and several entries point ahead to later chapters:

Milestone on the timeline Where this book covers the technique
Nyquist-Shannon Sampling Theorem Chapter 5: Sampling and Quantization
Introduction of the Fast Fourier Transform (FFT) Chapter 7: DFT, FFT and Frequency Domain Analysis
Development of Wavelet Transform for Signal Analysis Chapter 8: Advanced Transforms
Introduction of Adaptive Filters, Invention of the Kalman Filter Chapter 11: Adaptive Signal Processing
Invention of JPEG, Introduction of MPEG, Introduction of MP3 Chapter 13: Multirate Signal Processing and Compression

Lesson Plan

Learning Objectives

After using this MicroSim, students will be able to:

  1. Locate a milestone on the timeline by panning and zooming, and read its year from the axis.
  2. Compare the number of milestones in each decade and describe the pattern.
  3. Relate at least five milestones to the chapter of this book that covers the underlying technique.
  4. Evaluate the reliability of a one-year-per-event timeline by checking entries against an independent source.

Target Audience

College undergraduates at the start of a signal processing course, or anyone using the book as a survey of the field. Plan 15 to 25 minutes.

Prerequisites

No mathematics is needed. Familiarity with the words sampling, filter and transform helps when relating milestones to chapters.

Activities

  1. Read the opening view. Leave the timeline on its 1980 to 2000 opening view. Count the boxes dated 1980 to 1999: there are 17. Two more boxes, dated 2000 (First Software-Defined Radio and Multi-Input Multi-Output for Wireless Communication), sit on the right-hand edge. Find the year with three boxes: it is 1996 (digital hearing aids, HDTV standards and digital TV transmission), and the three connector lines meet the axis at a single dot.
  2. Zoom and pan across the whole list. Zoom out until the zoom stops at 40 years, then pan from the left limit to the right limit. The earliest entry is the telegraph (1837) and the latest is cloud-based signal processing (2022). Place a 40-year window at 1836 and both the telegraph (1837) and the telephone (1876) are visible, the longest gap between two consecutive event years in the list (39 years).
  3. Build a decade tally. Count the milestones in each decade and sketch a bar chart. Expected result: the 1990s have 11 milestones, the 1960s and the 1980s have 6 each, the 1970s, 2000s and 2010s have 5 each, and the 1950s have none. Discuss what could make a decade look busy or empty (see Common Misconceptions).
  4. Check three dates. Pick one entry that starts with "Invention of", one with "Introduction of" and one with "First". Look each up in an independent source (the Wikipedia articles under References are a start). Record the year you find and what that year marks: the first idea, a patent, a published standard, or a first product. Expected observation: you must decide which of these the entry means before you can say whether its year agrees.

Assessment

  1. How many milestones does the timeline contain, and what are the earliest and latest years? 50 milestones, from 1837 (Invention of the Telegraph) to 2022 (First Commercial Use of Cloud-Based Signal Processing).
  2. Which decade contains the most milestones, and how many? The 1990s, with 11.
  3. "Introduction of Pulse Code Modulation (PCM)" is dated 1948 and "First Commercial Use of PCM in Telephone Systems" is dated 1968. How many years separate them, and what does that suggest about a single year per event? 20 years. An idea can be introduced long before it is deployed, so one year per event hides which stage the year marks.
  4. Which decades between the 1830s and the 2020s have no milestone at all? The 1840s, 1850s, 1860s, 1880s, 1910s and 1950s.
  5. Why should you check a date from this timeline against another source before citing it? The list was produced from a chatbot prompt with one year per entry and no sources, and its entries mix inventions, standards and first uses, so the year may refer to a different stage than you assume.

Common Misconceptions

  • "The year on the timeline is when the technique was invented." Entries are worded differently ("Invention of", "Introduction of", "First Commercial Use of"), and the PCM pair shows a 20-year gap between introduction and commercial use. Zoom in on both entries and compare their wording.
  • "A busy decade means most progress happened then, and an empty decade means none did." The list was generated from a prompt asking for 50 milestones, so it is a sample. It has no entry for the 1950s and 11 for the 1990s, but the gap says only that the prompt's answer included none.

References

  1. vis-timeline Timeline documentation - visjs.github.io - the options and events used by this MicroSim (zoom limits, axis scale, item margins).
  2. vis-timeline on GitHub - GitHub - source and release history of the library loaded at version 7.7.3.
  3. Signal processing - Wikipedia - an independent overview for checking the scope and dates of milestones.
  4. Nyquist-Shannon sampling theorem - Wikipedia - independent source for the first entry students can verify in Activity 4.
  5. Fast Fourier transform - Wikipedia - independent source for the FFT entry and a bridge to Chapter 7.
  6. Fetch API - MDN Web Docs - the browser call the sketch uses to load events.json.

Development Notes

  • Library: the page uses the standalone vis-timeline 7.7.3 build from a pinned CDN URL. It replaces the legacy vis 4.21.0 package. The new library reads a bare string such as "1980" as milliseconds, so timeline-viewer.js converts four-digit year strings to dates before building the timeline. events.json is unchanged.
  • Files: the entry page is main.html. timeline-viewer.html is a redirect stub so existing links keep working.
  • Iframe: the number of stacked rows depends on the page width, so the page height varies from about 700 px (wide) to about 1050 px (phone). The iframe is 752 px high, which fits widths of about 760 px and up, and it is left scrollable so narrower pages can still reach every row.
Prompt history