{"id":2157,"date":"2015-06-09T09:00:15","date_gmt":"2015-06-09T13:00:15","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=2157"},"modified":"2017-08-15T02:53:01","modified_gmt":"2017-08-15T06:53:01","slug":"a-swiss-railway-clock-in-d3","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/a-swiss-railway-clock-in-d3\/","title":{"rendered":"A swiss railway clock in D3.js"},"content":{"rendered":"

\"Screen<\/a><\/p>\n

 <\/p>\n

The other day I saw this cool JavaScript+CSS clock<\/a> and I immediately thought that I wanted to create an analog clock in D3.js. First of all as an exercise, but also with the aim \u2013perhaps\u2013 of smuggling it in to a future dashboard \ud83d\ude09<\/p>\n

It seemed straightforward: just paint the clock and re-paint it each second. Right? Well, yes if you’re lazy. The better way is to paint the clock and periodically rotate the hands.<\/p>\n

As with most things on the internet, turns out I was late to the party. Some much more clever people have built D3 clocks<\/a> and even a multi-clock D3 visualization<\/a>\u00a0for displaying multiple time zones.<\/p>\n

Good. I had some ideas and a starting point.<\/p>\n

I’m in love with the Swiss Federal Railways (SBB) clock<\/a>, designed by Hans Hilfiker<\/a>. It’s an emblem of the most effective train system in the world, and a testimony of exquisite swiss modernism. I wanted to make that<\/em>.<\/p>\n

There’s already an SVG visualization of the SBB clock<\/a> (here’s the code<\/a>). As I was checking it out, it made me realize for the first time that the axis of rotation is not at the end of the hands, but like at 10% of its length. And that extra length is different for the seconds hand.\u00a0Also, that ball at the end of the seconds hand was going to be tricky.<\/p>\n

As with all great designs of that era, everything is proportional in that clock. I noticed that I would be able to derive all the measurements from the width of the minute ticks. So I defined a starting measurement unit and multiplied away!<\/p>\n

The key for doing the hands rotation in D3 is to enclose each hand in its own g element and rotate those g elements using setInterval<\/a>. The rotation of the hands in the SBB clock is smooth, and thankfully D3 offers transitions<\/a> for seamless interpolations.<\/p>\n

The seconds and minutes hands have to rotate 6\u00cb\u0161 each time (360\u00cb\u0161\u00c3\u00b760) and the hours hand has to rotate 30\u00cb\u0161. Since the clock shows only 12 hours, you have to multiply 30\u00cb\u0161 by the modulo 12 of the hours.<\/p>\n

   \r\nclockHand.transition().duration(1000).ease('linear').attr('transform', function(d,i) {\r\n\tif (d.unit==='hours'){\r\n\t\treturn 'rotate('+d.numeric%12 * 30+')';\r\n\t} else {\r\n\t\treturn 'rotate('+d.numeric * 6+')';\r\n\t}\r\n});\r\n<\/pre>\n
I was able to quickly put together a very rudimentary version\u00a0and tweak the design little by little. Then I decided not to waste my first tests, got a little bit carried away and externalized all the functions that defined the characteristics of the clock. I\u00a0ended up with a module\u00a0that enables you to create multiple instances of the clock, each with its own configuration, defined in the ‘face’ variable of the configuration object.<\/p>\n
\r\nd3clock({\r\n\ttarget:'#sbb',\r\n\tface:'sbb',\r\n\twidth:500,\r\n\t\/\/date:'Mon May 25 2015 10:09:37',\r\n\tTZOffset:{\r\n\t\thours:0\r\n\t}\r\n});\r\n<\/pre>\n
<\/div>\n
<\/div>\n
<\/div>\n