Small Tasks that “Scaffold”

Last night in Amit’s class on learning and teaching code, we discussed the role of “small tasks” or “puzzles” as an early stage of learning to code.

Martin’s Challenges

Last year when I was working with Google’s Big Picture Data Viz research team in Cambridge, Martin Wattenberg helped me learn Javascript by posing a few small challenges. It was a fantastic way to learn, as I really started to understand what was going on in the DOM (Document Object Model) and how I could use Javascript to control the SVG elements. I also started to see how I could use trigonometry and math to define the object’s properties efficiently. And, when I started to bring in functions from D3 it was to gain efficiency/control and felt like the solution rather than confusing magic.

I documented some of the process at the time, so have included links to those posts. Unfortunately some of the image links in the posts seem to have broken (Wordpress weirdness?), but I was able to fix many of them.

Small Steps to Learning Javascript/D3

First: draw a smily face using SVG.

Second: do the same, but use Javascript to control the SVG.

At this point, I took a detour into creating polygons of arbitrary types and making them spin because I wanted my smily face to have spinning stars for eyes. More steps here & here & here.

Third: use Javascript (no D3) to create a bar chart, aka - draw lots of rectangles :). Blog posts one, two, three.

From there I made a histogram, learned to read in real data, and highlighting days of the week. A bit later, I started playing with colors and building in more and more D3.

Looking Back

Looking back,it makes me smile to re-read this progression and see how nice it was to celebrate the small successes. Small steps, put together, really can take you a long way :).

Since then I’ve made a fully fledged analysis tool in D3/javascript hosted on AppEngine shown in Figure 10 of this research paper. I also now feel like I can “sketch” in Javascript and D3 in a way that seemed hard to imagine a year ago. While it might have been faster to take examples and adapt them, I’m so glad that I took the time to start from the basics because I understand what D3 is manipulating, because I worked through the tedium of drawing element by element. I feel like I can build what I sketch on paper instead of being constrained to what others have done.