brianally

Split-Flap Display

a work in progress

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.~~

UPDATE

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

	#!/usr/bin/php

	<?php
	/*
	Example shell script for using the ReRanger class.
	https://github.com/brianally/ReRanger
	*/

	use \InvalidArgumentException as InvalidArgumentException;

	"Population and dwelling counts, for Canada and census subdivisions (municipalities), 2011 and 2006 censuses"
	"Geographic code","Geographic name","Geographic type","Incompletely enumerated Indian reserves and Indian settlements, 2011","Population, 2011","Population, 2006","2006 adjusted population flag","Incompletely enumerated Indian reserves and Indian settlements, 2006","Population, % change","Total private dwellings, 2011","Private dwellings occupied by usual residents, 2011","Land area in square kilometres, 2011","Population density per square kilometre, 2011","National population rank, 2011","Provincial/territorial population rank, 2011"
	"01","Canada",,T,33476688,31612897,F,T,5.9,14569633,13320614,8965121.4248,3.7341
	"1001101","Division No. 1, Subd. V (N.L.)",SNO,F,62,65,F,F,-4.6,83,28,894.1406,0.0693,4540,352
	"1001105","Portugal Cove South (N.L.)",T,F,160,222,F,F,-27.9,90,69,1.1400,140.3509,4136,306
	"1001113","Trepassey (N.L.)",T,F,570,763,F,F,-25.3,335,258,55.8094,10.2133,2833,144
	"1001120","St

	NPRI Number Facility Name Company Name Province City Address Postal Code Rural Address NAICS Name NAICS Data Link 2013 NOx Emissions (t) 2013 SOx Emissions (t) 2013 VOC Emissions (t) 2013 PM2.5 Emissions (t) 2013 PM10 Emissions (t) 2013 TPM Emissions (t) 2013 NH3 Emissions (t) 2013 CO Emissions (t) NPRI Data Link NAICS2 NAICS3 NAICS4 NAICS6 Latitude Longitude
	0000003758 Hanlan Robb Gas Plant Direct Energy Marketing Ltd. Alberta Edson PO Box 6480 Road East T7E1T8 0 124.04 2182.45 9.97 2.02 2.02 -99.00 -99.00 74.63 http://www.ec.gc.ca/inrp-npri/donnees-data/index.cfm?do=facility_substance_summary&lang=En&opt_npri_id=0000003758&opt_report_year=2013 53.20450000 -116.81120000
	0000015596 Marten Hills 12-18-76-25w4 Canadian Natural Resources Limited Alberta N/A 0 21.90 26.16 -99.00 1.03 1.03 -99.00 -99.00 -99.00 http://www.ec.gc.ca/inrp-npri/donnees-data/index.cfm?do=facility_substance_summary&lang=En&opt_npri_id=0000015596&opt_report_year=2013 55.58560000 -117.89160000
	0000019534 Wapiti 12-03 Devon C

	<?php
	class Category extends AppModel {

	public $hasAndBelongsToMany = [
	'Item' => [
	'className' => 'Item',
	'with' => 'CategoryItem',
	'foreignKey' => 'category_id',
	'associationForeignKey' => 'item_id'
	]

	<?php
	// app/Lib/Routing/Route/PageSlugRoute.php
	//
	App::uses('Page', 'Model');
	App::uses('CakeRoute', 'Routing/Route');
	class PageSlugRoute extends CakeRoute {

	public function parse($url) {
	$params = parent::parse($url);
	if (empty($params)) return false;

	<?php
	App::uses('AppModel', 'Model');
	App::uses('SimplePasswordHasher', 'Controller/Component/Auth');

	class User extends AppModel {

	public $actsAs = [
	'Acl' => ['type' => 'requester']
	];

	<?php
	// see User model at:
	// https://gist.github.com/brianally/f4f70f5bb8c0f2304307

	App::uses('AppShell', 'Console/Command');

	class UserShell extends AppShell {

	public $uses = array('User');