# DSP examples using Observable Plot

**URL:** <https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434>\
**Category:** Show and tell\
**Created:** [April 9, 2022, 4:29am UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434 "2022-04-09T04:29:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![skybrian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/skybrian/32/6516_2.png) [@skybrian](https://talk.observablehq.com/u/skybrian)\
**Post date:** [April 9, 2022, 4:29am UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434/1 "2022-04-09T04:29:47Z")

</div>

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

[Understanding Convolution](https://observablehq.com/@skybrian/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.)

```auto
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?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 9, 2022, 3:36pm UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434/2 "2022-04-09T15:36:13Z")

</div>

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…

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

```

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

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

```

And then you could say

```auto
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](https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html). Here’s a D3 example:

> **[You Draw It](https://observablehq.com/@d3/you-draw-it)**
>
> Ref. “You Draw It: How Family Income
> Predicts Children’s College Chances” by Gregor Aisch, Amanda Cox, and Kevin Quealy.

---

<div class="post-metadata">

**Author:** ![skybrian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/skybrian/32/6516_2.png) [@skybrian](https://talk.observablehq.com/u/skybrian)\
**Post date:** [April 12, 2022, 3:43am UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434/3 "2022-04-12T03:43:44Z")

</div>

Thanks!

I wrote another page with more examples:

[Multiple-Pass Moving Average Filters](https://observablehq.com/@skybrian/multiple-pass-moving-average-filters)

---

<div class="post-metadata">

**Author:** ![skybrian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/skybrian/32/6516_2.png) [@skybrian](https://talk.observablehq.com/u/skybrian)\
**Post date:** [April 16, 2022, 2:09am UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434/4 "2022-04-16T02:09:59Z")

</div>

Here’s another page: [Tachometer signal processing](https://observablehq.com/@skybrian/tachometer-signal-processing?collection=@skybrian/digital-signal-processing).

---

<div class="post-metadata">

**Author:** ![skybrian](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/skybrian/32/6516_2.png) [@skybrian](https://talk.observablehq.com/u/skybrian)\
**Post date:** [May 2, 2022, 11:13pm UTC](https://talk.observablehq.com/t/dsp-examples-using-observable-plot/6434/5 "2022-05-02T23:13:31Z")

</div>

Another one:  
[How to convert digital pulses to a sine wave using convolution](https://observablehq.com/@skybrian/how-to-convert-digital-pulses-to-a-sine-wave-using-convoluti)