This explorer was generated by Claude (Anthropic) for the DSP 101 course materials. Every pixel column of every spectrogram on this page is a real transform of real samples. The page contains an iterative radix‑2 FFT with an explicit bit‑reversal permutation; the short‑time Fourier transform frames the signal at the hop you choose, multiplies each frame by the window you choose, and transforms it. A spectrogram that was painted to look plausible instead of computed would be a defect, not a simplification, so nothing here is painted.
Computed live (kind a) — nearly everything: Δt, Δf and their product from N and fs; the frame count, hop, bin count and FFT count of the work actually done; each window's measured half‑power main‑lobe width and measured peak side‑lobe level, obtained by transforming the window itself zero‑padded to 8192 points; the two‑tone resolvability verdict, which is found by looking for two separated local maxima with a real dip between them in this page's own computed spectrum rather than by comparing the spacing to a formula; the click's measured smear in frames and in milliseconds; and the chirp's measured peak bin per frame.
Published figures (kind b) — exactly one column of one table. The textbook peak side‑lobe levels sit beside the measured ones in the window table so you can compare them; they are labelled “published” there. Note the repository's own lessons disagree with each other about Blackman by 1 dB, so the measured number is the one this page treats as primary. Illustrative (kind c): the default signal parameters, the default sample rate and the noise level. Nothing illustrative is plotted as data.
Window definitions and the published side‑lobe figures: F. J. Harris, “On the use of windows for harmonic analysis with the discrete Fourier transform,” Proc. IEEE, vol. 66, no. 1, pp. 51–83, Jan. 1978. STFT and time‑frequency resolution: A. V. Oppenheim and R. W. Schafer, Discrete-Time Signal Processing, 3rd ed., ch. 10. Colour map: viridis (S. van der Walt and N. Smith, matplotlib, 2015), interpolated here in linear‑light sRGB.
The audio half of the syllabus lab is deferred, not dropped.
courses/dsp101/SYLLABUS.md asks the lab to “record or load audio”
and to show “speech and music spectrograms”. This page has no microphone
capture and no playback: audio work is parked repository‑wide
(TODO.md §9), so the signals here are synthesised test cases chosen
because each one wants a different window. You are looking at the STFT half of the
lab.
Course demo — linked from the lesson deck in both languages; the page itself is English‑only for now. Built for
DSP-101 Module 9 (SYLLABUS.md:377, “Lab: Generate
Spectrograms”). One idea, two knobs: a window of N samples gives you
Δt = N/fs of time resolution and
Δf ≈ fs/N of frequency resolution, and their product
is fixed. Spend N on one and you have spent it. The three spectrograms side by side are
the whole argument; the rest of the page exists so you can read them. Seeded, so the same
settings always draw the same picture.
Each thumbnail is live and shows the frame under the cursor, at the current settings. A spectrogram is a stack of DFTs, not a magic image — this row is the proof, and panel D below is the last thumbnail at full size.
Frame m starts at sample 0. Its length is the window length N.
Tapering the ends is what stops the frame's hard edges being read as signal.
Zero-padding to NFFT adds bins between the ones you had. It does not add resolution.
Magnitude in dB, referenced to the loudest bin in the whole spectrogram, then clipped at the floor you set.
dB → viridis, low at the bottom. Stack one of these per frame and you have the spectrogram.
Different signals want different windows. That is the point of having five of them: there is no window length that is right for all of these, and one of them is deliberately impossible.
Seeded Gaussian noise — illustrative default. “New noise” redraws it from the next seed; the same seed always gives the same noise.
The sample rate sets the top of the frequency axis (fs/2, the Nyquist frequency) and it scales Δt and Δf together. Both defaults are illustrative.
Total samples L, and therefore how many frames there are to draw.
dB relative to the loudest bin in the whole spectrogram. Everything at or below the floor is drawn in the map's darkest colour, so a low floor shows the noise and a high floor hides it. Display only — it changes no computation.
This is the knob the page is about. Every sample you add to N buys frequency resolution and spends time resolution, at a fixed exchange rate.
Overlap decides how often you look, not how well you see. Too little and an event can fall between frames; past about 75 % you are paying for frames that mostly repeat what the last one said.
The cursor is operable three ways: this slider, that number box, or the spectrogram itself — click it or focus it and use the arrow keys, Page Up/Down, Home and End.
A live spectrogram at 87.5 % overlap is many hundreds of FFTs, and there are four spectrograms on this page. So the frame count is capped, and the cap is stated here rather than hidden: a silent cap reads as “we covered everything”. While you drag a slider the caps are lower (coarse); on release the page recomputes (refined).
Identical samples, identical window shape, identical overlap. Only N differs. Read left to right: sharp vertical edges means good time resolution; sharp horizontal lines means good frequency resolution. No panel has both, and that is not an implementation limit — it is Δt·Δf = 1.
—
—
—
—
—
—
—
Click or drag to move the frame cursor; or focus this plot and use the arrow keys. The column under the cursor is drawn full size in panel D.
—
The shaded span is the N samples of frame m. The curve inside it is the window shape w[n], drawn to scale — those are the weights that frame's samples were multiplied by.
—
The magnitude spectrum of frame m alone. This is the column the spectrogram drew as colour, so if you can read this you can read the image.
—
Each verdict below is read off this page's own computed output. None of them compares your settings to a rule of thumb and prints a sentence.
—
The two right-hand columns are measured by transforming each window itself, zero-padded to 8192 points, in your browser, right now. The last column is quoted from Harris (1978) for comparison — it is the only published number on this page.
| Window | Half-power width bins |
Δf effective Hz |
Peak side lobe measured, dB |
Peak side lobe published, dB |
|---|
The measured half-power width is what turns the ideal Δf = fs/N into the resolution you actually get: a taper widens the main lobe, which is the price of its lower side lobes. So the window shape moves the constant in Δt·Δf, and never removes it.
Five live thumbnails of one frame, so “a spectrogram is a stack of DFTs” is something you can watch instead of something you are told.
All five recompute from the samples under the cursor.
in: x[n], m → out: one pixel column
The comparison one slider cannot make. Short: crisp edges, fat frequency bands. Long: thin frequency lines, edges dragged out in time.
Same samples, same shape, same overlap, three N.
in: x[n] → out: 3 spectrograms
Full size, with the movable frame cursor and a numeric colour key.
Keyboard-operable: it is a real slider.
in: x[n], N, hop, NFFT → out: image + cursor
The frame's span and the window's actual weights, drawn on the signal.
Move the cursor and watch the span slide by exactly one hop.
in: m → out: span + w[n]
The spectrum the colour column encodes, with the peak's dB and Hz printed.
A heat map cannot be read by colour alone; this is the numeric route in.
in: frame m → out: |Xm[k]| dB
Are the two tones actually two peaks with a dip between them? How many frames does one click light up? Does the chirp's peak bin really climb?
Read off the computed output, never from a formula.
in: the STFT → out: words plus numbers
#440154: 14.37:1 on cream #faf8f4,
1.06:1 on the dark surface #132135.#fde725: 1.19:1 on cream, 12.83:1 on the dark
surface. Mid-map #23918c: 3.60:1 and 4.24:1.--text
(16.30:1 on cream, 13.11:1 on dark). Overlays that must sit on the map —
cursor, window outline, tone markers — are a cased pair, a 3px black casing
under a 1.5px white core; swept over the whole map at 2001 points the better of the two
never drops below 4.60:1. White alone bottoms out at 1.26:1 on the yellow end and
black alone at 1.38:1 on the purple end, so one ink cannot do this job.TODO.md §9), so there is no microphone capture and no playback
here. The synthetic signals are chosen because each one wants a different window,
which is the teaching point; they are not a substitute for a speech spectrogram.capped and the flag is derived from the work actually done, so it cannot
claim otherwise.—