Using ObservableHQ to experiment with literate programming.

Unearthing some old tweet to share with you today:

I made a thing in @observablehq.
🤓
Visualizing an Algorithm loop 🔁 iterations with #JavaScript #ES6 #Generator, and a #Proxy for time-travelling 👨‍🔬.

I like literate programming!https://t.co/FaQcvZ9deN

— David Lacourt (@david_lacourt@mamot.fr) (@doppelganger9) October 18, 2018

Observable HQ

a magic notebook for visualization.

Check the introduction for yourself: it is something that you need to manipulate to better understand (a.k.a. Kinesthetic learning).

You may have noticed from previous posts that I’m really fond of the Fun Fun Function YouTube channel.

Inspired by MPJ, I tried to use the ObservableHQ website to do some kind of literate programming or expressive playground: combining code with text in a readable form.

Here is the result of this experiment from October, 18th of 2018.

Using JavaScript Generators to create a time-traveling visualization of an algorithm

Link to this Observable notebook.

I will try to embed it directly here, but for now, you’ll have to visit the link above.

Conclusion

Wow, that was a quick post. Unless you read the Notebook linked, that is.

As always, I learned a ton on the way and ended up with nice executable documentation for a concept helping me visualize how algorithm work.

I hope you too learned a few things.

Thanks for reading this blog, If you have any questions, please use the Github Repository’s Issues to start a conversation, or use Twitter: my DMs are open.