Creative Blog
Deep Time is an interactive infographic built for the modern web and iPad. It offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy. http://deeptime.info
The Idea
Introduction
This project was born out of an obsessive interest in science, time and cosmology, alongside a love for design, web technology and visual communication. I hope it will be a useful visual tool for students and teachers, as well as any human who is interested in this, hard to comprehend, but beautiful and wondrous subject of geological time.
Visual communication
Our planet has been in existence for 4.5 billion years, or 4500 million years. This is an incredibly vast amount of time which is hard to wrap one’s head around. The thought of one million years is mind-bending enough, never mind… one, two, three, and four billion!
The aim of this project was to try and put this huge time expanse into perspective in a visual sense, offering interactivity to explore the various stages of the Earth’s history using a 12 hour clock analogy.
Research
Sources & Inspiration
I have a passion for science documentaries and watch as many as I can. A few years ago there was a fantastic series here in the UK called Catastrophe which was presented by Tony Robinson. These programmes detailed how our planet’s history is deeply connected with some significant major catastrophes, resulting in the world we see and experience today. In actual fact, complex life would not be possible without these events.
The series really interested me and was a major inspiration for this project when I first drafted the idea last year. To help tell the story, each episode used a similar clock analogy, differing by using a 24 hour timeframe.
As part of my research, I re-watched the Catastrophe (2008) series twice. I also re-watched a few other documentaries, such as the excellent two-part First Life (2010) presented by Sir David Attenborough. If you are interested in these subjects, and haven’t already seen them, I highly recommend you check these out.
Using notes from these documentaries, I began to further explore the various factors involved using Wikipedia. This helped me to define an overall structure for the project in terms of points of interest and what I wanted to present.
This process was ongoing throughout the project cycle. Some of the design choices I made along the way further determined the final content.
The Calculations
Dividing a twelve hour clock
In order to display the various time periods and events around the clock face in as accurate way as possible, I had to do some initial calculations to produce a working scale (you can see this on the right side of the stone plaque). Essentially, it was a case of dividing 4500 by the amount of seconds in 12 hours, resulting in a value of 104,167 years per second.
Eon segments
Using this scale, the first task was to divide out the eons and eras onto the clock face. I did this using data from Wikipedia and mapped out the angles using the time scale. So for example, the Hadean Eon lasted 700 Ma (millions years), so 700 ÷ 6.25 = 112 minutes. Starting from 12 o’clock, this first segment spans for 1hr 52m.
The second task was to use the scale to determine the Life and Events time-points and work these into the application code later on.
Timings
Although the age of the Earth is only estimated at 4.5 billion years, it was a helpful number in terms of division and resulted in some nice maths. For example, the scale here for a minute is 6.25, which increments upwards really nicely giving rounded numbers at certain points in the visit time results.
The half-billion year markings divide perfectly into nine points, i.e, 4.5 ÷ 9 = 0.5. This made these points fit very elegantly around the clock face.
The Design
Overall look and feel
Right from the offset I wanted the infographic to feel aged and decided to present the overall design as a piece of parchment with a contrasting faded colour palette with rich text colour detail. It was important to me to convey a deep level of content in an uncluttered way, hiding things away waiting for the user to discover them at their own pace.
The eons and eras are colour matched to the pie chart, but the Life and Events swatches are really designed to convey time more than anything, so the more recent points have a richer colour definition, with the earlier points more faded/washed.
Typography choices
My typography choices were also extremely important to get right in order to induce a suitable ideological feeling to the overall piece. The are two main fonts used are; Goudy Bookletter 1911 Regular and Prociono Regular. Sorts Mill Goudy Regular was also used for the logo and sub headings which worked in unison with Goudy Bookletter. I absolutely love these fonts and would like to add a big thanks to the simply amazing work of The League of Moveable Type team.
One of the many unplanned little touches was the invention of the glowing text. You can see this in effect when you click on an item to reveal some supporting text detail. I felt that this created a feeling of magic, almost like a mystical scroll being activated. Obviously this also serves to highlight the related text paragraphs.
Layout & final placement
During the time involved in this project I made a fair amount of changes to my original design. This was a consequence of the build phase where important browser based testing begins and user experience factors are taken into consideration.
One of the luxuries of doing personal projects is you are not restricted, or governed, by time constraints. This allows plenty of time to reflect on all aspects of the project and make any necessary changes.
Now, this can of course have a downside, in that it’s sometimes hard to know when to stop and draw the line! Even a few days ago, when I was satisfied I was almost ready to launch this, I started to think about adding bits here and there.
The Technical Stuff
Modern web technology
The project makes extensive use of a range of modern web technology, namely; SVG, Canvas, CSS3, Web fonts, jQuery & JavaScript, and HTML5 markup.
To break this down a little, the working clock is rendered on a canvas element using the excellent Cool Clock JS library by Simon Baird. The interactive pie chart and wind-back markers are rendered with SVG and built using the awesome Raphael JS library by Dmitry Baranovskiy.
Working with the unknown
Getting all these elements to work together and do what I wanted was challenging to say the least. A great deal of the time this project took to produce was down to the interactivity and I had to write a substantial amount of jQuery and JavaScript, learning along the way how to work with Raphael JS.
Using a range of technologies is always going to be challenging, but I highly recommend just letting your imagination run wild, and then find the things you need to make them happen. Although I encountered many frustrating times where things just didn’t work, perseverance paid-off and I have now learned an immense amount of stuff which I am already using practically in some commercial work.
The Technical Build
Modern browsers
As this project uses modern techniques, versions of Internet Explorer other than 9 are not supported as there were just too many problems with lack of support. Thankfully, all modern browsers work as expected.
iPad & iOS
I had always planned for this project to be optimised for the iPad. I proposed that as long as I could get the overall experience to work well as a web app, the infographic would be very cool to play with on a tablet.
As you might expect, the layer of intricate interactivity I had introduced presented some significant problems to overcome in terms of touch events. I quickly discovered the Hoverable jQuery plugin which allows an alternative to simply tapping things.
Hoverable allows you to introduce tap-and-hold or long-taps to replicate a hover or click event, and offers double-tapping potential – both of which I made use of. The plugin also has a mechanism for tap-and-move interactions. Although practically this works very well, I felt this was a little too unintuitive to offer to users, requiring a more off-putting explanation.
The overall iPad experience integration really prolonged the project launch as I wrestled with many different factors. Once you open the door to that rabbit-hole, things just keep getting more complicated! To give you a flavour of this, here are some of the considerations I had to put into action:
- device detection and serve specifics
- make the infographic perform as a web app
- readjust the layout and some assets to cater for the iPad’s size
- specifically re-factor code and separate all touch events
- consider how to indicate using unorthodox touch interactions
- consider how to serve the typography for a pleasant reading experience
- consider how the app performs at both orientations
- include a notification for iPhones & Android (Android doesn’t currently render SVG)
As I played around and experimented, I decided I wanted the web app to work offline. This led me to learn how to work with the Application Cache HTML5 feature. Frustratingly, I had to abandon this at the final hour due to a problem with mobile Safari not being able to reference SVG web fonts (see Stack Overflow question). Considering the extra time I spent, this was a bitterly disappointing outcome and I look forward to being able to fix this if a solution emerges.
Typically, numerous bugs cropped-up, but thankfully I managed to sort them all out. Aside from the offline capability issue, I am very happy with the final Deep Time iPad experience. I also took away a great deal of useful newfound knowledge.
Visit timer
One of my favorite features is the visit timer. This was unplanned and took plenty of time and consideration to implement properly. I ended-up using the Countdown JS library by Keith Wood. This enabled me to count-up the visit time and create some nice callback features such as the wind-on marker. I also programmed the hover title to display the visit time in minutes which also changes in excess of an hour.
Excluded experiments
There were a couple of experimental things I had to exclude. As mentioned above, the offline web app capability was a major one, but I also tried to get a custom scroll bar system in place. This worked well using a neat hack but unfortunately the auto-scrolling functionality wouldn’t work with the required custom scroll bar CSS, so I had to abandon the custom scrollbars…a shame, but they only work in Webkit browsers anyway (see Stack Overflow question).
Conclusion
I have loved producing this project. It’s been a huge labour of love and taken many many hours to complete. I lost count of how many all nighters I threw at this one!
I hope you have found this write-up useful. Please feel free to leave feedback and ask questions if you have any, I am more than happy to expand of any of the above.
Thanks for stopping by and I hope you enjoy the project : )
