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.
I was already a WebStorm devotee, but had only recently been making use of the maturing javascript toolchain of yeoman and friends. This time I included the deployment itself as a grunt task, and became more familiar with the workflow in general. Despite new little bottlenecks to deal with at some point (such as the change/build/see-result-of-change delay), it feels pretty good.
Gawd, the beautifully designed twitter bootstrap makes page layout/arrangement so easy and nice. Love it.
I have done a good bit of programming in my life, both server-side and front-end. Every now and then I would find myself doing visualization-ish stuff, but it hasn't been until the last couple of years that I have been slowly finding a comfortable "home" pursuing various visualization efforts, situated at the confluence of awesome browser features and the staggering capabilities of javascript and javascript libraries.
This stuff is great fun.
No comments:
Post a Comment