brianally

I wanted to experiement with ways to build a split-flap display that could be updated in real time, using d3 to managae the updates. My first task was to learn what the heck these things are called, so i dutifully searched online for something like, "train station schedule sign rolling numbers". Google made Wiki's page the top result. Thanks, Google!

For this first attempt i wanted to use only HTML, rather than SVG. The idea would be that the data for each character would be attached to a parent div, each of which contained a pair of "flap" divs. The flaps are ½ the character height, with the bottom one having been translated downward while its content (the character) is translated back up, thus revealing the bottom half of the character.

Unfortunately, i'd forgotten that the manner in which an element behaves with respect to its z-index depends on the stacking context. And i'd just made a hash of

This is a simple game to amuse small children. Click anywhere on the map to see an animated line drawn between the last location and the next courtesy of Google's Directions API. We begin with the first location centred on the map. Change cities using the select list at top-left.

The lines are animated with CSS, a questionable alternative to using d3's transition() that i've outlined here.

I've thrown in the towel. That CSS transition technique seems to be unreliable for complicated paths. Occassionally, the path will appear to begin drawing somewhere close to the end, reach the end, then continue drawing from the beginning until it reaches the point where it had started. Meanwhile, that portion that had first been drawn will have "erased" itself, so the path stops before it reaches the end. That technique, whatever its (questionable) merits probably should not be used for complicated paths.

Regardless, i'll leave this up should someon

One of Mike Bostock's examples shows how a line can be made to appear to be animated as its drawn to the screen using a trick with the CSS stroke-dasharray property. You can see it in action here.

As usual with d3, the code is very concise and easy to understand. (OK, not all d3 code is easy to understand but still.) However, i wondered whether the transition could be applied with CSS. Not completely, of course, as we require the length of the line to set up the initial dasharray. But what if we wanted to set the transition time in our CSS?

Sure, it's a bit ridiculous, but let's just pretend our workflow involves designers handling all the styles. Or, we have a component that does this one thing and we don't want to have to set the timing in our JS, even if just to pass it in as an int. Maybe we're anal about having presentation logic in our JS.

Yeah, i know--it's SVG.

So, right away i figured it should be easy enough to declare the stroke-dashoffset transition in