Flippy Clocks

I have always loved the classic flip clock style, and it makes an interesting test for my HTML5/canvas programming skills. This little clock project uses no images, instead it uses 60 hidden canvases to draw the top and bottom halves of the flip cards. These are then assembled into the final clock which appears live on screen.

Try it live here.

Live Earthquake Monitor - WebGL

Earthquakes, while devastating, are an amazing natural phenomenon. When, where and how deep under the Earth's surface tell us a huge amount about the way the Earth works...

About 18 months ago I made an interactive, live and very informative website mapping recent earthquakes:

View it live here.

This was my first ever interactive website of this type of complexity and I am still very proud of the result! Still, styles change, my programming ability improves and, most importantly, new technology becomes available. This is the all-new updated result:

View it live here.

This new version makes use of WebGL which is a new way of displaying 3D graphics in your browser. This technology is not available in all web browsers yet (it is available in recent versions of Firefox and Chrome) but allows fast, smooth, full 3D graphics. In short it looks beautiful, try it out!

Software used:
Three.js: Excellent javascript library to simplify using WebGL.

Astronomical Clock

The Prague astronomical clock is a work of beauty.

Image linked from Wikipedia

This clock, if you know how to read it, tells you the time, the date, the position of the sun in the sky, the position and phase of the moon, the current time of sunrise and sunset. Quite impressive for a clock installed in 1410!

Now you can enjoy the confusing complexity right here on your desktop:

View it live here.

This clock shows similar information, it tells you the time, the date, the position of the sun in the sky, the current time of sunrise and sunset and the precise time difference between when the sun is highest in the sky and 12 noon. It is a challenge to read, but there are some hints on the website (click on [show/hide] in the help box). This pdf may help too...

Unlike the Prague astronomical clock which is only accurate in Prague my one at richardwheeler.net works perfectly no matter where you are in the world by using HTML5 geolocation to find your location and then recalculating the clock display.

Better than that it can also show you what an astronomical clock would look like if you were at the same latitude and longitude, but on a different planet! This is a bit buggy (it doesn't accurately calculate the time of the year) but gives a little insight into how astronomical clocks would appear on other planets. Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto.

In these extraterrestrial versions of the clock the hour hand still moves once around a 24 hr dial or twice around a 12 hr dial per day on that planet. The second hand still moves once per second, but the different length of the day means may move more or less than 1 step on the dial. This is particularly strange for Mercury where the year is 88 Earth days, but it takes 176 Earth days from sunrise to sunrise (a Mercury day); the day is longer than the year.

The dial with the zodiac symbols also has big changes between planets. This is because its eccentricity (the distance it is offset from the centre of the clock) depends on the axial tilt of that planet. Uranus is particularly strange because its axial tilt is near 90 degrees; it spins on its side.

Software used:

Notepad(!)

Dynamic word mapping

Word maps or word clouds are a great way of mapping out the important words in a paragraph of text. Words that appear more often (excluding very common words) appear larger, concisely summarising the paragraph.

This dynamic word map:

Is the word map from this paragraph of text (from Wikipedia):

A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea. Especially in British English, the terms spidergram and spidergraph are more common, but they can cause confusion with the term spider diagram used in mathematics and logic. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid to studying and organizing information, solving problems, making decisions, and writing.The elements of a given mind map are arranged intuitively according to the importance of the concepts, and are classified into groupings, branches, or areas, with the goal of representing semantic or other connections between portions of information. Mind maps may also aid recall of existing memories.By presenting ideas in a radial, graphical, non-linear manner, mind maps encourage a brainstorming approach to planning and organizational tasks. Though the branches of a mindmap represent hierarchical tree structures, their radial arrangement disrupts the prioritizing of concepts typically associated with hierarchies presented with more linear visual cues. This orientation towards brainstorming encourages users to enumerate and connect concepts without a tendency to begin within a particular conceptual framework.The mind map can be contrasted with the similar idea of concept mapping. The former is based on radial hierarchies and tree structures denoting relationships with a central governing concept, whereas concept maps are based on connections between concepts in more diverse patterns. However, either can be part of a larger personal knowledge base system.

There are some very cool online tools, like Wordle, for making word maps like these, but they are not "dynamic". I wanted one where it constantly updates as you type the words in... so I made one! Try it out here.

The logic for making the word map is quite simple. Imagine making a word map based on each word that appears in this sentence, what would that word map look like?

1. Take the input: "Imagine making a word map based on each word that appears in this sentence, what would that word map look like?"
2. Filter out the 100 most common words and all capital letters and punctuation. This leaves: imagine, making, map, based, appears, sentence, map
3. Count the number of times each of these words occurs: imagine (1), making (1), map (2), based (1), appears (1), sentence (1)
4. Starting with the most common word add them to the mind map. For each word start in the middle and spiral outwards, placing each word at the first place where there is a big enough space for it (based on its bounding box):

This is a really simple way to summarise text in a surprisingly accurate way, this is the word map of the abstract from my PhD thesis:

I think it summarises what I worked on very well!

Websites:
Dynamic word mapper at richardwheeler.net

Book Scanning

I have an old book which I am mining data from... The problem is paper is a pain; there is no Ctrl+F function and unless the index includes the terms you are after (which, in this case, it doesn't) then searching turns into a real pain.

The solution? Scan it.
The problem? How to scan it.

Unlike printed, typed or even many handwritten documents it's not easy to pull apart a book and scan the pages with an automatic machine, especially when the book is old, out of print and quite valuable. Most book scanners (including Google's) use cameras instead. This is my setup:

A very high-tech setup.

It's all very simple; a camera, a tripod to hold the camera still, remote shutter button to snap the pictures, lots of lamps for even illumination and a data connection to the computer so I didn't fill up the memory card too fast.

It was a pretty chunky book (801 pages) and it took a total of 489 shots (including reshoots of slightly out-of-focus pages) to capture all of it. That took nearly 1.5 hours, or about 10 seconds per photo. So what does a whole book look like?

With some magic semi-automated processing these images are all that is needed for a perfect scan. Using ImageJ I converted them to black and white, subtracted the background and cropped/rotated the pages. These are some samples:

These processed images can simply be fed into Adobe Acrobat or other similar optical character recognition (OCR) software to translate the image of the text into machine-understandable, fully-searchable text. Exactly what I need!

Software used:

ImageJ: Automated image processing

Adobe Acrobat: OCR

The Problem with Figures

One problem with normal scientific writing is the separation of data (in figures) 

technical details (in figure legends and methods sections) and the scientific conclusions (in the 

main text). But don't worry! Edward Tufte has the answer through sparklines.

[click for the pdf]

Software used:

Microsoft Office - Graph and text production

Fonts:

Gentium Plus (main text)

Titillium Text (headings)

QR Time - the least useful clock ever

QR time - click to visit the site.

Probably the least useful clock ever, requiring a barcode reader to read the time!