Driving from Thailand to the Netherlands – Datavis with d3.js

Driving from Thailand to the Netherlands – Datavis with d3.js

Last year, me and my wife drove from Thailand to the Netherlands. A merry road trip of about 20,000 kilometer. During this trip we collected some data about our journey: the route, spending, kilometers driven, etc.

Pie charts of what we spent our money on in each country
Pie charts of what we spent our money on, in each country.

Now, back in Holland, looking for a job, I have some time on my hands. So I thought it would be a fun weekend project to dive into D3.js and make a visualization of the data we have collected. I know first-hand how hard it is to find these things when planning a trip like this.

Have a look at the data about our trip.
Note that this is built with SVG, so doesn’t work in older browsers.

Why D3.js?

D3.js uses SVG instead of the more widely implemented canvas, but I find SVG a lot more pleasant to work with. When creating SVG elements with JavaScript you have a nice JavaSript object you can work with, even if the element has scaled or changed it’s location.

With canvas you work directly with pixels, not objects. Sure there are workarounds, but hey, it’s a personal project…

Since SVG elements are part of the DOM, albeit in an ugly XML syntax, we can style them with CSS. Bonus!

And D3.js is a very nice, stable library used by the likes of The New York Times.

The Journey

After living in Bangkok for a decade, one evening, sitting in our garden, me and my wife decided to relocate to Europe. After a few drinks we came up with idea to buy a cheap mini truck, basically a glorified tuk-tuk, and drive to The Netherlands.

Benz and mini truck having breakfast in Iran.
My wife and mini truck having breakfast in Iran.

After a long time preparing, we left last July, drove to Malaysia, shipped our car to India and drove through Nepal, Pakistan, Iran, Turkey and into Europe. It took a bit over 4 months and was a truly amazing experience.

How was it made?

  1. First I got the map data from an open-sourced GeoJSON file.
  2. Then I created the routes (one big one for the entire route, and a more detailed one for each country) and POIs in Google Maps, exported them as KML and converted them to GeoJSON. So all the maps & their elements are in GeoJSON and can be reused, regardless of map projection, scale, etc.
  3. Then I created another 3 JSON files: one for the all the data of the countries which we visited, this one also holds the data I exported from Google Maps. One for the global route and finally one with the Kilometers we drove each day. These I load through AJAX.
  4. When clicking on a country the country shape is duplicated on its own layer and the different shapes get scaled and transformed with D3.js’ transitions.
When clicking on a country, the shape of that country gets duplicated. The original map & new shape are scaled and translated.
When clicking on a country, the shape of that country gets duplicated. The original map & new shape are scaled and translated.
  1. The tooltips and the data you see on the left when clicking on a country are not SVG, but absolutely positioned HTML elements. This I regret now, since it’s a bunch of extra work to keep the proper position when scaling the SVG (which I haven’t done yet).
  2. Apart from the map, there are a few charts, standard D3.js functionality.
Bar charts, etc. are standard D3.js functionality. Fun and easy to work with.
Bar charts, etc. are standard D3.js functionality. Fun and easy to work with.

All functionality is in its own little AMD module, connected with Require.js. I have included jQuery and have used it for a few things. I regret this too: D3.js uses the same DOM selector engine as jQuery, has it’s own asynchronous loading functions, etc. Ah well, live and learn…

Demo

If you have a browser that supports SVG, have a look at the data visualization.

PS, in no way do I claim to know much about datavis, so if there are any experts out there who have some constructive comments, I’d love to hear from you.