DSP examples using Observable Plot

Show and Tell
1

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
2

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

doti(sine)

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:

3 Likes
3

Thanks!

I wrote another page with more examples:

Multiple-Pass Moving Average Filters

1 Like
4

Here’s another page: Tachometer signal processing.

1 Like
5

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