Lab ·
Minitruck Eurasia infographic
My first D3 project: an infographic of a four-month road trip from Thailand to the Netherlands in a 14-year-old Daihatsu Hijet.
On Friday the 13th of July 2012, my travel partner Benz and I left Thailand for the Netherlands in a 14-year-old Daihatsu Hijet with a 659cc engine and a kickass sound system. It took us four months and a week. We collected data along the way, and in December 2012 I turned it into an infographic. It was my first project with D3.
The infographic is still online: open it. It's from 2012, so it isn't responsive and doesn't work well on a phone. Open it on a desktop. The code is on GitHub.
What's in it
Four sections, one per question.
- How did we drive? A map of the countries we passed through, with our route drawn on it. Click a country to open its page: the dates, days and kilometres, what it cost, the weather and the landscape, a star rating, a few words about what happened, and the stops on the route with a note for each.
- How many km did we drive? A line chart of the odometer, about 20,000 km in total.
- How much did it cost? A breakdown of the total (€9,396.85) and the average cost per day in each country.
- What did we spend on? One donut chart per country, split into gas, food and drink, accommodation, vehicle and miscellaneous.
Each country page has notes from the road. The one for an unknown road in Nepal reads: "Don't take this road. Ever. 3 hours to cross 30 kilometers of mud, sand & potholes."
The shipping bill is the part that hurts. Shipping, including bribes, came to €2,683.41, and there's a note on the page that we got scammed big time by our shipping agent in Kuala Lumpur.
The route
We kept a handwritten log of the cities we passed through. I plotted those points on the map by hand, and the stops you see when you open a country are the same points. There's no GPS track behind the line.
The map is a low-poly TopoJSON. I wanted a country to switch to a high-poly version when you clicked on it, but I couldn't get that to look right. In the end I settled for the low-poly shapes: the country page shows the same shape as the map, only bigger.
Learning D3 in 2012
The tricky part was D3's data flow. I used jQuery alongside it, because it was 2012. If I built it today I'd use React and visx, and it would be a lot easier.