Fourier Series Visualisation with D3

https://bl.ocks.org/jinroh/7524988

by colinprince • 5 years ago

257 45 5 years ago

bl.ocks.org

MarkLowenstein• 5 years ago

Love how tau is defined as a constant in there. Word is spreading!

erikschoster2• 5 years ago

Would you mind elaborating a little or pointing us toward where we can read more about this?

I just (more-or-less blindly, not grokking the actual math behind it) ported the yin algorithm from someone else's implementation this year and tau was defined as a range where tau min is samplerate / freq_max and tau max is samplerate / freq_min where freq_min and freq_max are the bounds of the detection algorithm, at least as I understood it. My port works but I never really understood tau (except as I described) -- if there's a way I can refactor this with a fixed tau that would be very interesting!

protomikron• 5 years ago

There's some more or less serious discussion, that instead of using π = 3.14... (Pi) in formulas, we should adopt τ = 6.28... (Tau). Proponents claim, that it would simplify many formulas that include the term "2π".

For example the circumference on the unit circle is 2π and would become just τ if we adopted it as a constant.

nayuki• 5 years ago

The Tau Manifesto by Michael Hartl: https://tauday.com/tau-manifesto

simonw• 5 years ago

I had so much trouble getting my head around Fourier transforms at University back in the 2000s - and now interactive diagrams like these make the whole concept click almost instantly. Love these.

123pie123• 5 years ago

The math(s) got me!! pages upon pages upon pages

nice demo, but this site is great as well

https://www.myfourierepicycles.com/

you can draw your own picture and it converts it to FT

kowlo3• 5 years ago

Great work! Also nice to see some recent D3.js work that isn't on observerable.

occamrazor• 5 years ago

It is on bl.ocks.org, which is managed by Mike Bostock, the founder of Observable. And there is an Observable banner on top.

kowlo3• 5 years ago

Indeed, those facts didn't escape me. But like I said: nice to see some recent D3.js work that isn't on observerable.

mirekrusin• 5 years ago

bl.ocks.org is little brother of observable. Observable grew from it. Personally I like observable for experimenting with interactive tutorials for npm packages, ie [0].

What I'm missing is typescript support, otherwise it's really cool.

[0] https://observablehq.com/@mirek/predule-parser-csv

nhinck• 5 years ago

The move to observable really killed my enthusiasm to continue using d3js in projects.

contravariant• 5 years ago

Perhaps interestingly this visualisation technically depicts only half of the Fourier transform. The full transform adds the exact mirror image of each circle to cancel out the horizontal movement (which is usually drawn vertically, but this visualization swaps the real and imaginary axes).

This means that what this visualisation effectively depicts is the analytical signal [1] which is what you get when you use the hilbert transform to 'recover' the imaginary part of the original signal. This transformation is convenient as it allows you to determine the instantaneous phase and amplitude at each point in time, so you can calculate a frequency and volume for every single moment in time.

[1] https://en.wikipedia.org/wiki/Analytic_signal

jimmySixDOF• 5 years ago

Id like to see what this would look like in a 3D model visualization similar to what 3blue1brown produce. These graphics communicate math so much better and are the perfect fit for AR/VR.

nitrogen3• 5 years ago

By sheer coincidence, I've been working on a couple of videos that explain analytic signals using 3D animations from my own animation engine, and why they're useful. I hope to upload the first one in the next week.

A link to my channel is in my HN profile, if you're interested in the earlier videos in the series.

ruph1234• 5 years ago

Have there been any new interactive learning materials come up that explain signal processing, fourier series, laplace transformations, etc. to mere mortals?

Everytime I want to understand control theory better I stumble over this and the literature is often quite (deliberately?) obtuse.

kowlo3• 5 years ago

Why would it be deliberately obtuse?

zsmi• 5 years ago

Does matlab count as an interactive learning material?

If it does then I can recommend Practical Signals Theory with MATLAB Applications by Richard J. Tervo

Lots of real world examples of systems and signals in a level appropriate for a first DSP class.

Honestly it's kinda like linear algebra in that everyone has their own favorite and there is a place for many styles. The best thing is to go a nearby college library and look at a lot of them and find an author that speaks to you.

ruph1234• 5 years ago

I don't have a license (anymore) sadly. But thank you!

buescher• 5 years ago

Which literature has seemed obtuse to you? What is your background?

blippage• 5 years ago

Prof Allen Downey published a book called Think DSP: https://greenteapress.com/wp/think-dsp/

It can be bought, but is available for free. Code is also available via GitHub. It uses Python and Jupyter.

"The premise of this book (and the other books in the Think X series) is that if you know how to program, you can use that skill to learn other things. I am writing this book because I think the conventional approach to digital signal processing is backward: most books (and the classes that use them) present the material bottom-up, starting with mathematical abstractions like phasors."

ruph1234• 5 years ago

Great tip, thank you!

a-dub• 5 years ago

understanding digital signal processing by lyons is a classic.

of the standard texts, my favorite was the proakis one.

also used linear systems and signals by lathi in school, it was okay.

sva_• 5 years ago

I'm not sure you know it, since it isn't new, but this is pretty neat:

https://jackschaedler.github.io/circles-sines-signals/

It's also done with (an old version of) d3.

ruph1234• 5 years ago

Wow this is pretty much what I had in mind, thank you so much!

cabalamat3• 5 years ago

From the code:

    function FT(A, N, φ) {
        φ = φ || 0;

Just don't. Identifiers should start with [A-Za-z_] and contain [A-Za-z0-9_] and no other characters.

siddboots• 5 years ago

Maybe where you’re from that’s the accepted convention, but in some domains (e.g., scientific computing, statistical programming) it is common to mix in Greek letters . If the symbol is widely understood, it absolutely makes sense to use it.

cabalamat3• 5 years ago

Here's a program with 3 identifiers. One uses Latin alphabet, one Greek and one Cyrillic. Can you tell which is which?

   Κ = 1
   K = 2
   К = 3

As for "widely understood", consider a program that uses 10 Greek symbols each of which is known by 90% of programmers (a high estimate IMO). If the program is looked at by 10 programmers, the probability that they'll all know the symbols is 0.0027%.

EdvardM2• 5 years ago

I'm a simple guy. I see anything related to Fourier series/transform, me like. To me, it's like solution to at least 16% of all the problems I have. My only gripe is that I can't thank Fourier personally for the genius he had.

sidpatil• 5 years ago

To me, it's like solution to at least 16% of all the problems I have.

What are some examples of problems you've solved with Fourier series/transforms?

melony• 5 years ago

Not specific to Fourier but an optimized FFT implementation can be used in many places as a stand-in for convolution.

EdvardM2• 5 years ago

There's a good list in Wikipedia for FFT (though it's a bit more specific than just FT, but still application of it):

- fast large-integer and polynomial multiplication, - efficient matrix–vector multiplication for Toeplitz,- circulant and other structured matrices, - filtering algorithms (see overlap–add and overlap–save methods), - fast algorithms for discrete cosine or sine transforms (e.g. fast DCT used for JPEG and MPEG/MP3 encoding and decoding), - fast Chebyshev approximation, - solving difference equations, - computation of isotopic distributions.[47] - modulation and demodulation of complex data symbols using orthogonal frequency division multiplexing (OFDM) for 5G, LTE, Wi-Fi, DSL, and other modern communication systems.

And naturally for any time-based signal about half a gazillion applications due to it's ability to detect "traits" which can be stored/read efficiently due to time => freq transform

doctorhandshake• 5 years ago

Wow. I’ve been using FFT for more than 20 years but never understood the underlying math better than I did after about 10 seconds of watching this animation.

_448• 5 years ago

Looking at the visualisation in the above link, I remembered this[0] video I saw a few days back.

[0] https://www.youtube.com/watch?v=ds0cmAV-Yek

tasty_freeze• 5 years ago

If you like this, you might also like Bill Hammack's series on a mechanical version of a fourier synthesizer (OK) and analyzer (wow!). Although it is multiple parts, each one is very short.

https://www.youtube.com/watch?v=NAsM30MAHLg

As a side note, the guy who designed it was Michelson, famous for the Michaelson/Morley experiment that disproved the existence of the luminiferous ether.

qwertox• 5 years ago

Thank you! I've just watched the second video and it is amazing.

It reminded me of a Reddit post I saw a couple of hours ago:

"How a piano key works"

https://www.reddit.com/r/gifs/comments/ptyges/how_a_piano_ke...

drio• 5 years ago

Cool! Thank you for sharing. I wrote a similar version myself recently:

https://observablehq.com/@drio/visualizing-the-fourier-serie...

and I have a follow up that I call Alien Machines:

https://observablehq.com/@drio/fourier-series-part-2-machine...

Thank you, Fourier!

Fourier Series Visualisation with D3

Related Stories