I am always surprised at the things I learn or appreciate when working little side projects.
My most recent project consisted of more than thirty interactive visualizations to explore various preattentive attributes, all created with d3.js.
It took me a while to get any momentum on actually starting to implement this thing. I hadn't seen that a site existed with a bunch of interactive visualizations that demonstrated preattentive attributes, I figured one was needed, and I didn't want to abandon the idea. I had a vague notion of what I wanted, but for some reason I wasn't hitting on anything that got me really moving. I had to keep circling around for a week or so, reading the literature, before I hit a point that I realized that I needed to start moving up the little mountain. Things then starting clicking as momentum built up, and the form started to reveal itself. Whew.
All of the visualizations required picking a random set of points on a grid. It's not a hard problem, but I had to think about it for a second after seeing a stackoverflow post about it. The basic idea is to treat the grid of points as a single list of points, and then randomly pick without replacement using Robert Floyd's beautiful (tiny!) algorithm, which I have written about before. I had first come across this when implementing the "When Will I Win the PowerBall" interactive visualization.
Prior to this visualization, I had not used much of the animation capabilities "built-in" to the svg spec. The magic word here is animateTransform, and it turned out to be a simple way to get the animation I wanted: the animation itself is nicely and powerfully customizable, too.
Gawd, the beautifully designed twitter bootstrap makes page layout/arrangement so easy and nice. Love it.
This stuff is great fun.