[MUSIC PLAYING]
Hi.
I'm Chris Broadfoot.
Welcome to this week's episode of Google
Maps Developer Shortcuts.
Now this week I'm not going to show you how to build
something really hands on.
I'm just going to show you a demo that I built for the
O'Reilly Strata Conference last year, and hopefully I can
inspire you to do something similar.
Now it's this really cool mashup using WebGL and the
Maps API, and some very cool GPS tracks that I
found on the internet.
I'm using the CanvasLayer library to show my WebGL
directly on top of the map, and do all of the interaction
to do with panning and zooming and all of that.
Now let's talk about the data set that I found.
It's from a company called UBA, who basically provide a
taxi service.
Now the interesting thing that they do is they charge the
customers based on the GPS in the phone of the driver and
the customer, so they've got all these
really cool GPS tracks.
They anonymized a whole bunch of these and provided a week's
worth of GPS data.
So that's 25,000 trips and about 1.1 million data points,
all anonymized, of course, and provided it for a
visualization competition.
Now I took this data and I showed it at the Strata
Conference, as I said.
And I'm just going to show it again, because I think it's
really cool, and I want more people to see this sort of
thing being done.
Now let's look at the data.
So this is essentially what it looks like.
It's a tab-separated file.
I got it off a site called Infochimps.
Anyway, so the first column is the ID of the route.
So this is the first route, and you can see down here,
this is where the second one starts.
And you get a time stamp for the GPS point
and the point itself.
So that's really, really simple, but lets you build up
all sorts of interesting visualizations.
OK.
So the first thing I did, of course, was to go and put all
of these on a map.
Now if you've ever tried to plot more than, say, 10,000 or
20,000 points on a Google Maps map, you may
have had some trouble.
So here I'm using WebGL, which is a way to visualize massive
amounts of data in the browser.
So you've got all the power of the graphics card, and you
could build games and all sorts of great graphical
applications.
So let's switch over here.
This is all 1.1 million points plotted.
Now I've drawn them with some transparency so that they
start to build up, and you get a real sense of the
most-driven roads in the city.
So even if the Google Map wasn't in the background,
you'd still see all of these tracks and these roads
starting to build up.
But because I have put the map in the background, I'm using a
styled map to subdue all the colors, remove all the labels,
so that the data really comes alive.
OK.
So that's quite interesting, and you might see some
patterns like this sort of fuzzy area around the
financial district.
I presume that's because there's a lot of tall
buildings and the GPS sensitivity--
sorry, the accuracy is much lower.
So zooming back out, the first thing I did with this data was
take a slice of time.
So up here in the top left, you can see I've got the time
slice that's being displayed.
So this is eight and a half minutes on Sunday afternoon.
So then the next thing I did was change the rendering
slightly, and render points that are further back in that
time slice with a smaller radius and slightly
transparent.
Now this gives the effect of a worm sort of thing so that you
get a sense of the direction that the taxi is going in and
where it's been.
Now the great thing about this is once I start to move
through this time slice, you get these worms moving across
the screen.
So here I'm just moving forward in time.
So this is moving forward in time linearly, but you get a
sense of the speed of these cars.
So you can see they go quite fast on the highways and slow
in the city.
So we're up to about 5:00 PM now.
And I can go faster and faster and faster, and if I go
really, really fast, I can go all the way through the week.
So you get a sense of when the traffic is quite low--
well, essentially when UBA isn't being used very much,
which is a proxy for the general traffic
network in the city.
So then the next thing I did was take each of those routes,
and because I knew the taxi number, the ID of that route,
I could string those together and get a reading of the speed
of the car--
essentially the distance it travelled divided by the time
between samples.
So by colorizing each point based on its speed--
so here I'm drawing in green the fast cars and the slow
ones with red--
you get a sense of the fast and slow streets.
So you can see that the Highway 101 is quite fast into
the city, but once again, around the financial district
things start to turn a little bit red.
Now I've got up here another little panel that lets me
change some more parameters of the rendering.
So for example, if I zoom in, I could,
perhaps, turn up the opacity.
Yeah, maybe blur the map a little or
increase the point size.
And so this is a really great interactive
interface, I think.
So I spent quite a long time just sort of exploring this
data, which was very fun.
So yeah, once again, you can see that the GPS accuracy
around the city is quite bad.
And these are maybe things that you wouldn't realize by
analyzing your data problematically.
But once you can visualize it with your eyes, you start to
see these patterns.
The brain is very good at recognizing patterns.
And you'll see that there's these small pockets of these
slow areas, presumably back streets or
something like that.
And there's another great one down here near the airport.
I think this is a taxi or a cab waiting bay, so it's quite
slow down there.
OK, so by combining all of these effects, we get these
colored squiggles moving around the map, which I think
is quite cool.
So say you wanted to use this for traffic analysis.
Perhaps we'll take a slightly larger slice of the day.
So this is about--
what's that--
three hours.
OK, let's go down to two hours.
And we can just slide all the way through the week, and you
get this sense of the city pulsing and coming alive and
going to sleep at night.
And you can sort of see the problem times of the week.
So you can see it's quite busy here--
that's Saturday night--
and very, very quiet around 4:00 till 6:00 on a Sunday,
and then gets busy again.
So this is all made possible using WebGL and the Maps API.
Go over and check out the CanvasLayer library.
It's in the Google Maps Utility library.
And watch Brendan and Paul talking here on the Office
Hours, July 24 last year, to find out more about
CanvasLayer.
Anyway, that's my demo.
Thank you for watching, and I'll see you next week.
[MUSIC PLAYING]