DSP examples using Observable Plot

Just thought I’d show off this simple notebook translating some examples from a DSP textbook:

Understanding Convolution.

I’m wondering if there’s any shortcut for this idiom that I used to plot array elements using dots. (The dotY variant does something else.)

Plot.dot(sine, {x: (d, i) => i, y: d => d})

Also, what would be a good way to edit the elements in an array interactively? A row of sliders, maybe?

1 Like

Nice, thanks for sharing!

You can use dotY for the y part, but there’s no current dot shorthand for x = 0, 1, 2, 3…

Plot.dotY(sine, {x: (d, i) => i})

You could also make your own helper mark if you like:

function doti(data, {x = (d, i) => i, y: d => d, ...options} = {}) {
  return Plot.dot(data, {x, y, ...options});

And then you could say


As for editing the elements interactively, an idea that comes to mind is the “You Draw It” technique used by The Upshot, e.g., You Draw It: How Family Income Predicts Children’s College Chances. Here’s a D3 example:



I wrote another page with more examples:

Multiple-Pass Moving Average Filters

1 Like

Here’s another page: Tachometer signal processing.

1 Like

Another one:
How to convert digital pulses to a sine wave using convolution