7 ms·

Tools for thought: graphical algebra and Fourier analysis

344 points by michael_nielsen 11y ago

erichocean 11y ago
I absolutely love graphical explanations for concepts. Keep 'em coming!
stevofolife 11y ago
Well explained! If anyone's got something similar to this, please share.
- logicrook 11y ago
  In Conway's book of numbers, there are many similar visual explanations for beautiful combinatorial formulas in terms of pebbles and polygons.
elevensies 11y ago
RIP headphone users on slide 29.
jonahx 11y ago
This is beautiful. Another nice explanation in a similar vein: http://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/ http://betterexplained.com/articles/an-interactive-guide-to-...
thinkingkong 11y ago
Goddamnit Steven. Stop making everything you do so beautiful.
s_m_t 11y ago
Cool I wish the explanatory text weren't shoved off into a box below the cool stuff I want to be looking at. I think ideally the textual explanations should be overlaid on the graphical representations and at the very least they should be close to each other and within the same screen element. Personally I think I experience some type of distracting cognitive load when I have to switch contexts like that.
- jacobolus 11y ago
  These are slides from a lecture. The bit below would be spoken aloud.
  - s_m_t 11y ago
    That makes more sense
mathattack 11y ago
2 slides in and I thought "Wow, this is awesome!" Great way to show beauty in math. (It's more than just numbers and formulas!)
- kzrdude 11y ago
  Make sure you get to the last slide, it is stunning. This one: http://i.imgur.com/QWx4lVX.png http://i.imgur.com/QWx4lVX.png (but a screenshot is nothing).
colah3 11y ago
Breath taking. This technique could be used to visually prove many interesting properties of the continuous fourier transform. For example, you can visually prove that the fourier transform is its own inverse, up to a constant factor. It's a bit tricky to communicate such a visual proof in text, but here's a sketch: First, consider the fourier transform of the dirac delta function, which this visualization would reveal to be a wave. Apply the transform again, and it's visually clear that the wave destructively interferes and has a transform of 0, except for a single value. This reveals that, applying the Fourier transform twice gives you the original function, up to a constant inverse. (If you work through this carefully, you see the constant is negative.) What's interesting is that a visual proof like this can make a pretty non-trivial fact visually obvious. You could take this further. I'm pretty certain that one could get visual proofs that taking the derivative is multiplying by i times the frequency in frequency space. Or get a visual proof of the convolution theorem. If you have a visual proof of the convolution theorem, you can probably get a visual proof of the central limit theorem. [1] I actually tried to illustrate this visual proof of the Fourier transform's inverse several years ago. I tried to make static diagrams, not an animated version. I failed. I say this to emphasize how impressive Steven's feat is: not only did he make a beautiful visualization of this, not only did he make it a live animation, but he did it in a freaking web browser. It's really incredible. [1] These ideas come from a conversation between Michael Nielsen and I, after we saw Steven's talk.
- deleted 11y ago
  [deleted]
- deleted 11y ago
  [deleted]
- unconed 11y ago
  It could work. I just want to emphasize this is really an incomplete DFT. It's missing the upper bands and it's also sparsely sampling the ones it does show (the full DFT would have 512 non-aliased bands). I also think in the general case, what you describe only works for the CFT. Making it work with the DFT means you have to lie a little bit, because your "dirac delta" is really a sinc function sampled at the knots to come out [… 0, 0, 1, 0, 0 …]. In the case of the final visualization, it was produced on short notice, so my bands aren't actually perfectly aligned with the true DFT bands either. On the plus side, taking one frequency band and making the full-size one only took me an hour and that's because it was a lazy copy/paste job: https://gitgud.io/unconed/toolsforthought/blob/master/iframe/fourier.coffee https://gitgud.io/unconed/toolsforthought/blob/master/iframe... It could be made more compact with a for loop too, but I like the pedagogical value of just having the full JS DOM spelled out like that. The entire point of MathBox2 was to be able to produce visualizations like this without breaking my head or taking weeks. People seem to assume it's still a crazy amount of work, it's really not. e.g. The twisting transformation is just an affine skewing matrix in polar/cylindrical coordinates (.polar() + .transform()). The fades and other transitions are composable operators. Figuring out how to shove it into the GPU is now ShaderGraph's job, not mine, and the emitter API ensures the JS VM will inline and optimize it close to native, asm.js style. It all comes built-in and you can keyframe the parameters or specify them with live expressions. The fact that people keep bringing up "beauty" is mystifying to me, it's really not what I'm aiming for. This is just what the math looks like when you remove all the extraneous visual noise and let motion and space do the talking instead. I use the same bog-standard colors, curves and surfaces every time. Why that translates into "beauty", I really don't know, except that maybe beauty is simply what we call it when our brain recognizes symmetries and patterns we don't have conscious words for. https://acko.net/blog/mathbox2 https://acko.net/blog/mathbox2
vinchuco 11y ago
This is amazing, no doubt. Not just the craft but the ideas and presentation. However, I can't help but feel uncomfortable that this is not part of 'something bigger' -as many of the disconnected knowledge pieces across the web- that we could all contribute to (at the least for teaching/sharing/tweaking mathematics). I am talking about a vague idea of what LaTeX was for unifying typesetting but for unifying collaborative proofs+visualization. Call it "VS" [1] to make the following analogy: Before LaTeX, no one would have questioned your thesis for having handwritten equations on the gaps purposely left by you with the typewriter. It would not matter if you penciled the equation in or physically pasted a picture of it. No one would question the choice. Similarly, before this hypothetical VS, people use Matlab, Mathematica, Sage, CoQ etc without anyone questioning any of the choices for a result/proof/visualization. Even worse, before VS++ people publish papers on different journals with different degrees of access, many not even sharing the code used for arriving at such results, no way of verifying/visualizing unless you're running it in your head's OS. [1] https://www.youtube.com/watch?v=KvMxLpce3Xw https://www.youtube.com/watch?v=KvMxLpce3Xw (Vulcan School) [+] I may be repeating myself https://news.ycombinator.com/item?id=11129297 https://news.ycombinator.com/item?id=11129297
- Ericson2314 11y ago
  Let the field medalist speak. http://www.math.ias.edu/vladimir/files/2010_09_25_slides.pdf http://www.math.ias.edu/vladimir/files/2010_09_25_slides.pdf https://www.math.ias.edu/vladimir/sites/math.ias.edu.vladimir/files/2014_08_ASC_lecture.pdf https://www.math.ias.edu/vladimir/sites/math.ias.edu.vladimi...
  - vinchuco 11y ago
    Disregarding speech would be terrible, wouldn't it? Thanks for the pointers.
  - fao_ 11y ago
    > An algorithm which verifies "reliability" is applied to the constructed solution (e.g a proof). If this algorithm terminates then we know that we have a good solution of the original problem. If it does not then we may have to start looking for another solution. I might be misunderstanding things here, but doesn't that mean that there would exist proofs that are impossible to know the answer to, since there exist algorithms that are finite but will not terminate in human time? My brain is throwing up the Halting Problem, but I'm not entirely sure if that has any concrete relation to this.
rdtsc 11y ago
Agreed with other comments. Some really good insights. I wish I had those in school when I was learning this stuff: Some gems: > Every exponential curve of any base or offset can be drawn by scaling/ translating any other exponential curve, vertically/horizontally. > ... a cosine (or sine) is essentially an approximate sequence of parabolas, alternating upside down. This tells you about the Taylor series expansion, and is not that surprising if you know that sine and cosine are solutions to a second order differential equation. This one I found not completely intiuitive at first, had to think about it a bit: > With complex numbers, it is trivial to twist the graph
anacleto 11y ago
Impressive. No-brainer, awesome work. I actually used the mathematics behind some algorithms to design my own Blog. [0] http://leonardofed.io http://leonardofed.io
- an_ko 11y ago
  Aren't those exact copies from Mike Bostock's Visualizing Algorithms? https://bost.ocks.org/mike/algorithms/ https://bost.ocks.org/mike/algorithms/ Please give credit where it's due!
irixusr 11y ago
Spectacular. The only reason I was ever good at Math is because I found relationships like these despite my math teachers' best attempts to crush exploratory math. I can still remember them chiding me for not doing math their way. Certain great teachers aside, of course.
betolink 11y ago
This is exactly how Math should be explained, connecting the dots between abstractions and the real world! beautifully done!
hellofunk 11y ago
Very cool. I remember attending a lecture in Buenos Aires on "Fourier Analysis for Dummies" and this complicated mathematical term that had scared me for years suddenly seemed so straightforward. It's a neat thing to see others explain it in ways that don't involve all the equations.
chriswarbo 11y ago
Am I the only one who this doesn't work for? Tried in Chromium, Firefox and Conkeror; the best I get is a progress bar, then a set of axes with a single dot plotted on the y axis. :(
- mcguire 11y ago
  I'm on mobile; all I get is the title.
agumonkey 11y ago
Couldn't see it for lack of webgl but makes me wonder, how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ?
- JadeNB 11y ago
  > how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ? The answer to that is, I think, exactly why so many people don't like math; because, in math discovery, first comes the history, in the sense of the problem that motivates the nrew technique, then comes the metaphor comes, and only then is the math (which I suppose is what you mean by 'abstractions'?) built around it. Math professors, whether out of ignorance (we don't know the history), or preference (we learned this way and we like it), or even just time constraints (there's not time in a standard semester class to tell the full story of the concepts), will often teach only the math, or treat the intuition and metaphor as secondary; but they were, of course, the entire genesis of the subject. No-one retrofits intuition to mathematics; mathematics is rather a way for experienced practitioners to 'sanity-check' and formalise the intuition that they already have.

erichocean 11y ago

I absolutely love graphical explanations for concepts. Keep 'em coming!

stevofolife 11y ago

Well explained! If anyone's got something similar to this, please share.

logicrook 11y ago
In Conway's book of numbers, there are many similar visual explanations for beautiful combinatorial formulas in terms of pebbles and polygons.

elevensies 11y ago

RIP headphone users on slide 29.

jonahx 11y ago

This is beautiful. Another nice explanation in a similar vein: http://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/ http://betterexplained.com/articles/an-interactive-guide-to-...

thinkingkong 11y ago

Goddamnit Steven. Stop making everything you do so beautiful.

s_m_t 11y ago

Cool I wish the explanatory text weren't shoved off into a box below the cool stuff I want to be looking at. I think ideally the textual explanations should be overlaid on the graphical representations and at the very least they should be close to each other and within the same screen element. Personally I think I experience some type of distracting cognitive load when I have to switch contexts like that.

jacobolus 11y ago
These are slides from a lecture. The bit below would be spoken aloud.
- s_m_t 11y ago
  That makes more sense

mathattack 11y ago

2 slides in and I thought "Wow, this is awesome!" Great way to show beauty in math. (It's more than just numbers and formulas!)

kzrdude 11y ago
Make sure you get to the last slide, it is stunning. This one: http://i.imgur.com/QWx4lVX.png http://i.imgur.com/QWx4lVX.png (but a screenshot is nothing).

colah3 11y ago

Breath taking. This technique could be used to visually prove many interesting properties of the continuous fourier transform. For example, you can visually prove that the fourier transform is its own inverse, up to a constant factor. It's a bit tricky to communicate such a visual proof in text, but here's a sketch: First, consider the fourier transform of the dirac delta function, which this visualization would reveal to be a wave. Apply the transform again, and it's visually clear that the wave destructively interferes and has a transform of 0, except for a single value. This reveals that, applying the Fourier transform twice gives you the original function, up to a constant inverse. (If you work through this carefully, you see the constant is negative.) What's interesting is that a visual proof like this can make a pretty non-trivial fact visually obvious. You could take this further. I'm pretty certain that one could get visual proofs that taking the derivative is multiplying by i times the frequency in frequency space. Or get a visual proof of the convolution theorem. If you have a visual proof of the convolution theorem, you can probably get a visual proof of the central limit theorem. [1] I actually tried to illustrate this visual proof of the Fourier transform's inverse several years ago. I tried to make static diagrams, not an animated version. I failed. I say this to emphasize how impressive Steven's feat is: not only did he make a beautiful visualization of this, not only did he make it a live animation, but he did it in a freaking web browser. It's really incredible. [1] These ideas come from a conversation between Michael Nielsen and I, after we saw Steven's talk.

deleted 11y ago
[deleted]
deleted 11y ago
[deleted]
unconed 11y ago
It could work. I just want to emphasize this is really an incomplete DFT. It's missing the upper bands and it's also sparsely sampling the ones it does show (the full DFT would have 512 non-aliased bands). I also think in the general case, what you describe only works for the CFT. Making it work with the DFT means you have to lie a little bit, because your "dirac delta" is really a sinc function sampled at the knots to come out [… 0, 0, 1, 0, 0 …]. In the case of the final visualization, it was produced on short notice, so my bands aren't actually perfectly aligned with the true DFT bands either. On the plus side, taking one frequency band and making the full-size one only took me an hour and that's because it was a lazy copy/paste job: https://gitgud.io/unconed/toolsforthought/blob/master/iframe/fourier.coffee https://gitgud.io/unconed/toolsforthought/blob/master/iframe... It could be made more compact with a for loop too, but I like the pedagogical value of just having the full JS DOM spelled out like that. The entire point of MathBox2 was to be able to produce visualizations like this without breaking my head or taking weeks. People seem to assume it's still a crazy amount of work, it's really not. e.g. The twisting transformation is just an affine skewing matrix in polar/cylindrical coordinates (.polar() + .transform()). The fades and other transitions are composable operators. Figuring out how to shove it into the GPU is now ShaderGraph's job, not mine, and the emitter API ensures the JS VM will inline and optimize it close to native, asm.js style. It all comes built-in and you can keyframe the parameters or specify them with live expressions. The fact that people keep bringing up "beauty" is mystifying to me, it's really not what I'm aiming for. This is just what the math looks like when you remove all the extraneous visual noise and let motion and space do the talking instead. I use the same bog-standard colors, curves and surfaces every time. Why that translates into "beauty", I really don't know, except that maybe beauty is simply what we call it when our brain recognizes symmetries and patterns we don't have conscious words for. https://acko.net/blog/mathbox2 https://acko.net/blog/mathbox2

vinchuco 11y ago

This is amazing, no doubt. Not just the craft but the ideas and presentation. However, I can't help but feel uncomfortable that this is not part of 'something bigger' -as many of the disconnected knowledge pieces across the web- that we could all contribute to (at the least for teaching/sharing/tweaking mathematics). I am talking about a vague idea of what LaTeX was for unifying typesetting but for unifying collaborative proofs+visualization. Call it "VS" [1] to make the following analogy: Before LaTeX, no one would have questioned your thesis for having handwritten equations on the gaps purposely left by you with the typewriter. It would not matter if you penciled the equation in or physically pasted a picture of it. No one would question the choice. Similarly, before this hypothetical VS, people use Matlab, Mathematica, Sage, CoQ etc without anyone questioning any of the choices for a result/proof/visualization. Even worse, before VS++ people publish papers on different journals with different degrees of access, many not even sharing the code used for arriving at such results, no way of verifying/visualizing unless you're running it in your head's OS. [1] https://www.youtube.com/watch?v=KvMxLpce3Xw https://www.youtube.com/watch?v=KvMxLpce3Xw (Vulcan School) [+] I may be repeating myself https://news.ycombinator.com/item?id=11129297 https://news.ycombinator.com/item?id=11129297

Ericson2314 11y ago
Let the field medalist speak. http://www.math.ias.edu/vladimir/files/2010_09_25_slides.pdf http://www.math.ias.edu/vladimir/files/2010_09_25_slides.pdf https://www.math.ias.edu/vladimir/sites/math.ias.edu.vladimir/files/2014_08_ASC_lecture.pdf https://www.math.ias.edu/vladimir/sites/math.ias.edu.vladimi...
- vinchuco 11y ago
  Disregarding speech would be terrible, wouldn't it? Thanks for the pointers.
- fao_ 11y ago
  > An algorithm which verifies "reliability" is applied to the constructed solution (e.g a proof). If this algorithm terminates then we know that we have a good solution of the original problem. If it does not then we may have to start looking for another solution. I might be misunderstanding things here, but doesn't that mean that there would exist proofs that are impossible to know the answer to, since there exist algorithms that are finite but will not terminate in human time? My brain is throwing up the Halting Problem, but I'm not entirely sure if that has any concrete relation to this.

rdtsc 11y ago

Agreed with other comments. Some really good insights. I wish I had those in school when I was learning this stuff: Some gems: > Every exponential curve of any base or offset can be drawn by scaling/ translating any other exponential curve, vertically/horizontally. > ... a cosine (or sine) is essentially an approximate sequence of parabolas, alternating upside down. This tells you about the Taylor series expansion, and is not that surprising if you know that sine and cosine are solutions to a second order differential equation. This one I found not completely intiuitive at first, had to think about it a bit: > With complex numbers, it is trivial to twist the graph

anacleto 11y ago

Impressive. No-brainer, awesome work. I actually used the mathematics behind some algorithms to design my own Blog. [0] http://leonardofed.io http://leonardofed.io

an_ko 11y ago
Aren't those exact copies from Mike Bostock's Visualizing Algorithms? https://bost.ocks.org/mike/algorithms/ https://bost.ocks.org/mike/algorithms/ Please give credit where it's due!

irixusr 11y ago

Spectacular. The only reason I was ever good at Math is because I found relationships like these despite my math teachers' best attempts to crush exploratory math. I can still remember them chiding me for not doing math their way. Certain great teachers aside, of course.

betolink 11y ago

This is exactly how Math should be explained, connecting the dots between abstractions and the real world! beautifully done!

hellofunk 11y ago

Very cool. I remember attending a lecture in Buenos Aires on "Fourier Analysis for Dummies" and this complicated mathematical term that had scared me for years suddenly seemed so straightforward. It's a neat thing to see others explain it in ways that don't involve all the equations.

chriswarbo 11y ago

Am I the only one who this doesn't work for? Tried in Chromium, Firefox and Conkeror; the best I get is a progress bar, then a set of axes with a single dot plotted on the y axis. :(

mcguire 11y ago
I'm on mobile; all I get is the title.

agumonkey 11y ago

Couldn't see it for lack of webgl but makes me wonder, how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ?

JadeNB 11y ago
> how did people visualize/understand Fourier without all the neat abstractions, metaphors, and history ? The answer to that is, I think, exactly why so many people don't like math; because, in math discovery, first comes the history, in the sense of the problem that motivates the nrew technique, then comes the metaphor comes, and only then is the math (which I suppose is what you mean by 'abstractions'?) built around it. Math professors, whether out of ignorance (we don't know the history), or preference (we learned this way and we like it), or even just time constraints (there's not time in a standard semester class to tell the full story of the concepts), will often teach only the math, or treat the intuition and metaphor as secondary; but they were, of course, the entire genesis of the subject. No-one retrofits intuition to mathematics; mathematics is rather a way for experienced practitioners to 'sanity-check' and formalise the intuition that they already have.