I love information design.
I spend a lot of time sorting our photos on Flickr into various categories and sub-categories, creating Google Maps of routes we’ve ridden and cities we’ve visited, and religiously tracking information like where we stay each night and how many miles we travel per day.
When we made the decision to go on this adventure, it wasn’t long before I came up with the idea for our “trip at a glance” widget: the list of statistics that you see on the right-hand side of this blog. Coming up with the idea and figuring out how to make it all work are two different things, but with the help of a friend and a lot of trial and error we got everything up and running in time for our departure date.
I wanted to do a write-up about the process because a) I like explaining things and b) it’s not really as difficult as I thought it would be. You could do the same thing yourself without too much trouble.
Why Make a Widget?
I’ve always liked tracking information while I travel. I’ve taken a few long road trips where I recorded things like total mileage for the day, where I stopped to eat and how much I spent on gas. The intention was always to crunch the numbers once I got home and, along with the photos, put together a great trip album.
My bookshelves are filled with exactly no samples of this.
Inevitably when I return from these trips, the vacation is usually over, catching up on work takes priority and before I know it weeks have passed and I’ve lost interest in sitting down and pouring through the hastily scribbled notes and crumpled receipts I’ve crammed into some manilla folder. Sad but true. But for this trip we’ll be traveling so far, through so many countries and by so many different means that I really wanted to have a statistical record of it. It was clear that for it to work the information would really need to be entered and crunched as we went.
Recording the Data
The solution was obviously to create some sort of online database, but I was doing all this for fun and didn’t have any money to spend on paying someone to create a custom solution.
While I was brainstorming on how to get the back-end working I started building up a quick framework in Excel of what information I wanted to track. It started out as a pretty straightforward spreadsheet with columns for Date, City, Country, Miles Traveled, and Cost of Lodging. With just those bits of information it was possible to create a number of interesting stats like “Days on the Road”, “Total Days Spent in Each Country”, and “Average Daily Mileage.” This eventually grew to include the most and least expensive places we’d stayed, our average daily food cost , and a breakdown of our trip mileage by means of transportion.
I had a fully functioning spreadsheet all laid out but I still hadn’t figured out how to create an online database that would let me enter the data, let alone go back and correct any errors or omissions. Luckily for me it was about this time that I discovered that Google Docs could solve all those problems.
Enter the Google Doc
For those not familiar with Google Docs, it’s a set of free, web-based word processing, spreadsheet and presentation applications created by Google. I already wrote a post here about how ridiculously helpful its been on our trip. It’s not really any different from Word or Excel, except that all the files are edited and stored online. The documents can be viewed and even edited by multiple people and it allows you to access the documents almost anywhere in the world, from any computer.
The best part for this project was that once you’ve created a spreadsheet you can make it available online as a .pdf, .html page or (perfectly for our needs) an RSS feed. What an RSS feed is and exactly how it works isn’t really that critical - basically its just a tool we can use to make the spreadsheet data available to the widget we were going to create. It let us bypass the entire problem of making a custom database, and allows us to simply read the data directly off the spreadsheet we’ll be updating as we travel. Google Docs is free and all you have to do is sign up to use it. In fact if you already have a Google or Gmail account, than you can just log into that.
Here, Use Our Spreadsheet
So, now that we’ve worked the kinks out of it, I’ve made a version of our spreadsheet available online for anyone to use. Click here to open the spreadsheet in a new window.
Of course you’re welcome to make your own spreadsheet too. The only reason that I’m posting this is that some of the formulas that display things like “Most Expensive Lodging” or “Most Days in One Country” are a rediculously complicated. If I had been able to grab them out of someone else’s spreadsheet I would have. Instead I tried making my own which took forever… and then still had to ask for help from the Google Docs help forums.
The spreadsheet I’m linking to is actually a slightly simplified version of the one we use but if you want to track additional information like Temperature or Altitude it’s easy to add columns and not too hard to figure out the appropriate calculations. If you do decide to use it and have any questions, feel free to email me.
Saving the Spreadsheet
Once you open the spreadsheet simply go to File > Make a Copy and save it as your own file; to update, edit and use as you see fit. If you make any great improvements to it please let me know!
The database exists, how do I tap into it?
From here on out the project definitely got more complicated, and this is where my good friend Taylor Wright came in. He’s a fantastic programmer and without his help the project wouldn’t have gotten any further than this.
The next step was to create a “widget” that would appear on the site and display the data. Because time was so short I tried to make things as simple as possible. All the calculations were handled on the spreadsheet, so that all we needed to do was create a widget that would receive and display a list of data – no crunching necessary. This blog is powered by WordPress and uses the Thesis theme. These are both very flexible platforms and there were probably any number of programs or coding languages that we could have used to build the widget.
We (Taylor) decided to use Adobe Flex – since it was a program he was experimenting with at the time and this project would make a great learning exercise. I would like to give myself a little credit here as I tried to do as much of the programming as I could myself, constantly coming back to Taylor for help, but with all the last minute trip planning, I just didn’t have the debugging hours that I needed (which were significantly higher than the time Taylor would take). In the end he was definitely the one that pulled it all together.
All we needed the widget to do was to read the data coming from the RSS feed (that looks like this), do some basic text formatting and that was it. The biggest stumbling block we came across was finding out at the last minute that Google doesn’t like sending data directly to Flash-based applications. There’s a potential security vulnerability that’s somehow involved and the result was that with less than a week to go it looked like the solution we’d been working for the past couple of months was going to be useless.
And then we discovered Yahoo Pipes. Yahoo Pipes actually lets you do quite a few things if you’re looking to “aggregate, manipulate, and mashup content from around the web.” For our purposes however, just like with Adobe Flex, we are using the tool at about .001% of its potential, but that’s all we needed it for.
Google doesn’t like sending data directly to Flash-based applications, but it will send it to Yahoo pipes which lets you manipulate and crunch the data in a number of ways before exporting it. This is our pipe. You’re welcome to clone it, but once you figure out exactly how to use Yahoo Pipes (which takes about 15 minutes) you’ll find that you already know everything you need to recreate exactly what we’ve used the program for.
And that was it! Keeping in mind that I’ve skimmed over hours of debugging and troubleshooting, not to mention all the things we tried that didn’t work, but anyone that’s done any programming knows that’s always part of it. You’ve probably noticed that I haven’t actually discussed any of the specifics of the code either. That’s because this is a travel blog and if you really are interested in the code, read a bit further and you’ll see the link to download all the files yourself. Then if you have any questions, you’re welcome to fire off an email.
So, to use the whole system we log into our spreadsheet every day (or so), write down the date, our current city and country, how many miles we traveled that day, save the spreadsheet, and almost instantly the stats on the website are updated. The whole project was tricky, but not too tricky, and if you’re interested in building your own, we’re including all the files you’ll need below.
Adobe Flex is sort of open source. Adobe offers a free compiler, but Flex Builder, the program Taylor used to create the widget costs around $250. However the code isn’t that complicated and there are any number of languages you could build this in, so we’ve made it available in a couple of formats.
Here is a link to a .zipped file that includes both the Adobe Flex document as a .swf file as well as an MXML version of the code. This will at least let you open the code to get a look at it in any text editor.
The code is free to use for most things; it’s Creative Commons licensed. And if you have any thing to say about suggestions on how to improve it or ways you’ve modified it. Let us know!
A Dangerous Statistics Widget by Connal Hughes and Taylor Wright is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Based on a work at www.redlamp.org.
