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.
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.
D3.js uses SVG instead of the more widely implemented
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.
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.
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?
- First I got the map data from an open-sourced GeoJSON file.
- 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.
- 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.
- 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.
- 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).
- Apart from the map, there are a few charts, standard D3.js functionality.
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…
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.