I have a long list of things I want to write about, but the list is getting longer instead of shorter. I've been thinking lately about my writing process: writing down ideas, fleshing them out, learning a topic, writing a blog post, and making diagrams.

It's fun to write code for diagrams but it takes a long time. Bret Victor's talks make me painfully aware of how limited my tools are. Munificent Bob says he draws his illustrations by hand to save time. LostGarden has beautiful diagrams but it takes me a long time to use those tools. I've pondered a Wacom Cintiq or a Surface or a Galaxy Note or even a regular drawing tablet but I think paper and pen is simplest.

  • Big pages: 1-4 months, learning + writing + interactive diagrams. These include Curved Roads, 2d Visibility, and Polygon Map Generation. The Noise Functions page was mostly learning, but I had very few interactive diagrams, so it went quicker. The Hexagons Guide was some learning and some things I already knew, and the interactivity is low, so it went quicker.
  • Medium pages: 1-4 weeks, for topics I know, writing + interactive diagrams. Tower Defense Pathfinding and Probability for Damage Rolls would fit in this category. I knew the topics well, so much of the time was figuring out how I wanted to explain it, and implementing the diagrams.
  • Small pages: 1-4 days, writing + non-interactive diagrams.

I'm pondering doing more of the small pages. I can upgrade them later if needed.



Bram wrote at May 11, 2014 9:05 AM

Sometimes, when your diagrams are networks of shapes and arrows, you can skip the drawing part. Just specify the relationships in a text file, and dot from graphviz does the rest.

That said, your diagrams typically are not of this form and more complex. Custom drawings I typically do in inkscape, but yes, these take time. But as a bonus you can embed the svg source as is, and have your crafted handwork show beautifully in any scale with support for retina displays to boot.

Amit wrote at May 11, 2014 10:02 AM

Hi Bram, thanks — yes, I do use graphviz for some projects. I should revisit Inkscape. I like the idea of having svg that works well with retina displays. I also want to get a retina display at some point :)

DAve wrote at May 12, 2014 5:24 AM

Hi, just a comment to say that I really appreciate your interactive diagrams, and the time you take to create them. They really help in the understanding of your posts.

That said your static diagrams are superb, and your writing style is extremely clear and it is the combination of all of these that keep bringing me back to your site.

All in all I suppose I've just taken this opportunity to say thank you, and please keep up the good work :)

Josh Oleksyn wrote at May 13, 2014 7:54 AM

Maybe take a look at MathBox by Acko: http://acko.net/blog/making-mathbox/

Amit wrote at May 13, 2014 10:19 AM

Thanks Dave!

Josh: yes, MathBox is interesting and potentially useful. I'm using d3.js at the moment.

Tom wrote at June 20, 2014 7:44 AM

Hi, just wanted to say your interactive diagrams are awesome! I came across them on your Curved Paths article which was very interesting and helpful, thanks! I didn't realize at first that they were interactive, but eventually it become obvious and I went back and played with all of them. Very cool.