4 ms·

I really, _really_ love this kind of visual guide. Do you guys know of anything similar for other (unrelated) learning subjects? Edit: just saw this one in the

I really, _really_ love this kind of visual guide. Do you guys know of anything similar for other (unrelated) learning subjects? Edit: just saw this one in the footer of the Waveforms page. http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

atarian 9y ago
Here's a ML one (linked to by the above site): http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ Distill has some great ML articles that are kind of similar: https://distill.pub/ https://distill.pub/
joshwcomeau 9y ago
Creator here, also keen to know if anyone has suggestions. The r2d3 one was (obviously) a huge inspiration, it's such a nice way to learn things. I can't seem to find it now, but either the NY Times or the Washington Post built something similar, for the 2018 US house/senate races. Lots of graphs as you scroll, with scroll-based events, IIRC. EDIT: ah, how could I forget Nicky Case's explorabl.es! Was a huge inspiration for me as well.
- matt_j 9y ago
  Mike Bostock is the creator of d3.js and does, or did, a bunch of visualizations for NY Times. Check his website, it's amazing. https://bost.ocks.org/mike/ https://bost.ocks.org/mike/
- zaxomi 9y ago
  Nice work! I have a suggestion about the chord: With a single chord like this I think it sounds better to tune it with "just intonation". For a major chord it is [ f * 1, f * 1.25, f * 1.5 ]. With these frequencies the chord will not wobble.
  - joshwcomeau 9y ago
    Thanks for the feedback; I saw this further down the comments as well. Will give it a shot! EDIT: Yep, sounds way better. Will definitely have to look more into this! Thanks again.
  - H1Supreme 9y ago
    A little wobble can be nice though. When I write synthesizer patches, I almost always detune the oscillators a few cents.
    - zaxomi 9y ago
      On a synth in a musical piece, absolutely. But in a technical piece like this, I prefer if it isn't.
- ohtwenty 9y ago
  there's the https://pudding.cool https://pudding.cool site that kind of does this stuff?
trevyn 9y ago
Bret Victor has been a major protagonist of interactive visualization: http://worrydream.com/ http://worrydream.com/ "The Ladder of Abstraction" is close to this explicit document style, but if you're interested in the history and philosophy of interactive visualization, you can lose days on that site.
mnx 9y ago
Here's a whole page of them: http://explorabl.es/ http://explorabl.es/
- hathawsh 9y ago
  Wow, thanks for sharing. That site and all the sites it links to restore my faith in humanity.
t0mek 9y ago
There's one about programming the hexagonal grids (eg. for the turn-based strategy games): https://www.redblobgames.com/grids/hexagons/ https://www.redblobgames.com/grids/hexagons/
chrislo 9y ago
I love these kind of things too and link to them frequently from my audio-themed newsletter (http://webaudioweekly.com http://webaudioweekly.com). I'm particularly fond of Tero Parviainen's interactive explorations of generative music, for example: https://teropa.info/blog/2017/01/23/terry-rileys-in-c.html https://teropa.info/blog/2017/01/23/terry-rileys-in-c.html
- joshwcomeau 9y ago
  Hi Chris! Creator here, I'm a subscriber to Web Audio Weekly. Appreciate the work you do, always excited when I receive it :)
  - chrislo 9y ago
    Thanks Josh! This is going in the next issue, of course :)
dominotw 9y ago
> Do you guys know of anything similar for other (unrelated) learning subjects? Raft consensus http://thesecretlivesofdata.com/raft/ http://thesecretlivesofdata.com/raft/
mizzao 9y ago
Tensorflow Playground, more of a self-driven place to play with machine learning: http://playground.tensorflow.org/ http://playground.tensorflow.org/
jpindar 9y ago
Here's a favorite of mine that lets you explore Fourier synthesis. Be sure to left-click for more settings. http://toxicdump.org/stuff/FourierToy.swf http://toxicdump.org/stuff/FourierToy.swf Edit: Oh, it's down. But I'll leave this here in case it's a temporary problem.
- jpindar 9y ago
  Ah. Here's one that was inspired by that one. http://beneskildsen.github.io/fourier/fourier.html http://beneskildsen.github.io/fourier/fourier.html
ajkjk 9y ago
Check out https://idyll-lang.org/ https://idyll-lang.org/ , a language that aspires to make making these easy.
nighthawk454 9y ago
Here's a fantastic one for complex numbers. It visually motivates the "imaginary" axis, how complex numbers describe rotation and motion, and why they're useful. https://acko.net/blog/how-to-fold-a-julia-fractal/ https://acko.net/blog/how-to-fold-a-julia-fractal/
fao_ 9y ago
There's the 4D toybox by the person who's making Meigakure: https://www.youtube.com/watch?v=0t4aKJuKP0Q https://www.youtube.com/watch?v=0t4aKJuKP0Q
mohitmun 9y ago
Please checkout 3Blue1Brown. 3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.

atarian 9y ago

Here's a ML one (linked to by the above site): http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ Distill has some great ML articles that are kind of similar: https://distill.pub/ https://distill.pub/

joshwcomeau 9y ago

Creator here, also keen to know if anyone has suggestions. The r2d3 one was (obviously) a huge inspiration, it's such a nice way to learn things. I can't seem to find it now, but either the NY Times or the Washington Post built something similar, for the 2018 US house/senate races. Lots of graphs as you scroll, with scroll-based events, IIRC. EDIT: ah, how could I forget Nicky Case's explorabl.es! Was a huge inspiration for me as well.

matt_j 9y ago
Mike Bostock is the creator of d3.js and does, or did, a bunch of visualizations for NY Times. Check his website, it's amazing. https://bost.ocks.org/mike/ https://bost.ocks.org/mike/
zaxomi 9y ago
Nice work! I have a suggestion about the chord: With a single chord like this I think it sounds better to tune it with "just intonation". For a major chord it is [ f * 1, f * 1.25, f * 1.5 ]. With these frequencies the chord will not wobble.
- joshwcomeau 9y ago
  Thanks for the feedback; I saw this further down the comments as well. Will give it a shot! EDIT: Yep, sounds way better. Will definitely have to look more into this! Thanks again.
- H1Supreme 9y ago
  A little wobble can be nice though. When I write synthesizer patches, I almost always detune the oscillators a few cents.
  - zaxomi 9y ago
    On a synth in a musical piece, absolutely. But in a technical piece like this, I prefer if it isn't.
ohtwenty 9y ago
there's the https://pudding.cool https://pudding.cool site that kind of does this stuff?

trevyn 9y ago

Bret Victor has been a major protagonist of interactive visualization: http://worrydream.com/ http://worrydream.com/ "The Ladder of Abstraction" is close to this explicit document style, but if you're interested in the history and philosophy of interactive visualization, you can lose days on that site.

mnx 9y ago

Here's a whole page of them: http://explorabl.es/ http://explorabl.es/

hathawsh 9y ago
Wow, thanks for sharing. That site and all the sites it links to restore my faith in humanity.

t0mek 9y ago

There's one about programming the hexagonal grids (eg. for the turn-based strategy games): https://www.redblobgames.com/grids/hexagons/ https://www.redblobgames.com/grids/hexagons/

chrislo 9y ago

I love these kind of things too and link to them frequently from my audio-themed newsletter (http://webaudioweekly.com http://webaudioweekly.com). I'm particularly fond of Tero Parviainen's interactive explorations of generative music, for example: https://teropa.info/blog/2017/01/23/terry-rileys-in-c.html https://teropa.info/blog/2017/01/23/terry-rileys-in-c.html

joshwcomeau 9y ago
Hi Chris! Creator here, I'm a subscriber to Web Audio Weekly. Appreciate the work you do, always excited when I receive it :)
- chrislo 9y ago
  Thanks Josh! This is going in the next issue, of course :)

dominotw 9y ago

> Do you guys know of anything similar for other (unrelated) learning subjects? Raft consensus http://thesecretlivesofdata.com/raft/ http://thesecretlivesofdata.com/raft/

mizzao 9y ago

Tensorflow Playground, more of a self-driven place to play with machine learning: http://playground.tensorflow.org/ http://playground.tensorflow.org/

jpindar 9y ago

Here's a favorite of mine that lets you explore Fourier synthesis. Be sure to left-click for more settings. http://toxicdump.org/stuff/FourierToy.swf http://toxicdump.org/stuff/FourierToy.swf Edit: Oh, it's down. But I'll leave this here in case it's a temporary problem.

jpindar 9y ago
Ah. Here's one that was inspired by that one. http://beneskildsen.github.io/fourier/fourier.html http://beneskildsen.github.io/fourier/fourier.html

ajkjk 9y ago

Check out https://idyll-lang.org/ https://idyll-lang.org/ , a language that aspires to make making these easy.

nighthawk454 9y ago

Here's a fantastic one for complex numbers. It visually motivates the "imaginary" axis, how complex numbers describe rotation and motion, and why they're useful. https://acko.net/blog/how-to-fold-a-julia-fractal/ https://acko.net/blog/how-to-fold-a-julia-fractal/

fao_ 9y ago

There's the 4D toybox by the person who's making Meigakure: https://www.youtube.com/watch?v=0t4aKJuKP0Q https://www.youtube.com/watch?v=0t4aKJuKP0Q

mohitmun 9y ago

Please checkout 3Blue1Brown. 3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.