Visualizing Auckland Public Transport

For some time now, I’ve been looking to do something with the transport data from Auckland Transport. They provide all bus routes and times via a set of CSV’s that are available for download on their website. It’s just been about finding time to really sit down and make something meaningful.


I decided to go with a visualizing of Auckland traffic. That is, creating live maps that show in “realtime” how buses are moving across Auckland. Above is a sample of what I created using a live map in my browser, and moving pins around. I decided to try and be accurate with speed and time of when buses were moving. I didn’t get it 100% correct, but I got pretty close to it. Because it runs in the browser, it’s really hard to see all of Auckland at once. Too much animation essentially kills the browser in it’s tracks, but I’ve got a few working pretty swish!

Below is a set of live visualizations of how AT transport moves. If you’re just interested in the cool images, check them out! Below I’ve written a bit more how I build them. Caution, most of these are LARGE. I do not recommend opening them on mobile, especially not on mobile data. I should also note that on some browsers/computers, it does start lagging when there are a lot of buses on the move.

Dominion Road/Mt Eden Road/Sandringham Road

Waiheke Island

St Heliers

Now onto the more geeky stuff.

After downloading the data from Maxx, I had to join up all the files. The general gist was you have Routes, that do many trips (So bus number 335 may do 5 trips a day). On those trips, they will stop at a set amount of bus stops at the same time each day.

I decided early on I wanted to do something with a live map. The easiest way I found was using Leaflet with Animated Pins. This got me started, but there were a few things I had to do a bit of fiddling to get right.

I had to output a JSON object that could be read into javascript. Not too hard, from C# I could use to serialize out a list of trips and their stops etc. But to do every bus trip in a day outputted a gigantic file that no browser would be able to load. In the end I had to specify latitude and longitude boundaries of what stops I wanted to include. Because of this, the visualizations above are centered around a particular area, but it would theoretically be possible to output all of Auckland, but your browser can’t handle it.

The speed of the animated pins was a big problem. I had to take each stop along the way and judge the distance between it and the stop before it using their latitude/longitude values. From there I could get the total distance traveled. I could then take the first and last stop, and work out how long overall it took. This gave me an average speed to use. Ideally, I could have worked out the distance and time between each bus stop, but the animated pins was a real pain to get working when you are trying to give individual speeds for each point on it’s journey.

Another issue was start times. Although it ended up being relatively easy to fix. With each trip, I output the total number of seconds that corresponds to that time of day. I then have a timeout that fires once a second on the webpage. Each time that timeout fires, I check whether any buses that haven’t started yet, should be starting (e.g. their start time is less than the current time in the simulation), if they have, I place the pin and start moving it.

Because I was hurriedly coding everything, it is still a bit of a mess and still kind of tailored to do what I wanted to do, but I’ve put the code up on Github for anyone that wants a play around. Repository is here : Again, it’s basically just a proof of concept so it’s not amazingly well coded, but feel free to take a look and build your own visualization.

Let me know what you think in the comments below!

Visualizing Auckland Public Transport