The right paradigm: Maps

- [Instructor] In this movie, we're going to talk about Maps. You can't really talk about map-based data visualization without talking about Google Maps. They pretty much single handedly brought maps back to the masses. Well, I guess, I mean that's not entirely fair 'cause they were preceded by some others in the field, right? But Google made Maps great and ubiquitous in a way that really no one else has. And you can really visualize so many different things. So here I am searching for hockey rinks in Boston, and as you can see, what Google Maps shows you is so many different things, right, there's so much data in this view.

You know I see the roads. If I zoom in, I can click on things and see markers. I can see the thing that I've searched for. In fact Google Maps is so great that the more I zoom and the more I zoom, I get more and more detail. Different colorings to represent different types of things like this is a university campus. And if I zoom in far enough, I'll even see the shapes of the buildings, right. So I can recognize this u-shaped building as opposed to these other buildings I might be walking by. It's an incredibly rich visualization of unbelievable amount of data.

So as a developer, you can do a lot of things with Google Maps. And you know you have the base layers, the base maps that you see as a regular user using Google Maps. And of course you have Satellite view and Street view. You have access to all of those different views of the maps, and you also have the ability to do other things with your data. So there's the ability to show places and do custom markers on those different places. You can use the routing information. How do I get from point A to point B? Google Maps will figure that out and how to show it.

There are also some other really interesting data visualization tool sets available to you via the JavaScript API. So this example we can see this is tracking flights to and from London, and so you have the ability to put objects on Google Maps in layers and show them interacting with real data in real time. Or in this example where we can see earthquakes. And so the data is represented as dots on the screen and the size and the colors all represent something about the earthquakes. This example is a heat map showing population density around the world.

And finally, you can do other interesting things with Google Maps such as this which is actually a puzzle where you have different shaped objects on the map and you have to click and drag them and put them into place. And if you get it right, it snaps into place and changes color. There's so much you can do with Google Maps API. I encourage you to play around with it and experiment and try different things. When it comes down to it, there are really five of what I would call standard ways to show data on maps. And we're going to walk through them one by one and show some examples.

So the first one is Markers. Markers are for pointing out points of interest on a map, located at a very specific latitude and longitude on the map. So this is the example I showed earlier where I searched on Google Maps for hockey rinks in the Boston area. And you can see the markers are dropped in place at a specific location to show every search results. These little red dots with the white squares represent each hockey rink that showed up. Platforms like Google Maps have builtin functionality like these little roll-over callout windows.

And you can actually custom design callouts in Google Maps and lay them on top of it as well. Sometimes you want to put a marker in a specific spot such as this marker that is for the TD Garden where the Boston Bruins play. It's in a very specific spot. It's at a very specific latitude and longitude, exactly where that building is in Boston. But sometimes you want a marker just to sort of generally represent like a region like Boston. And if we were to do that, it would drop a marker right here in the heart of Boston which isn't meant to really be at a specific latitude and longitude. It's more to show a general area and labeling.

If you don't know what the exact latitude and longitude is for a location, whether a specific address or a general place like Boston, Massachusetts, you can actually just Google it now. Just search for Boston, lat, long, and Google will just give it right to you in an easily digestible format. Okay, so right there in the upper left hand corner, we have latitude and longitude. You can search for a specific address or a general region, even something as broad as Massachusetts, and it'll give you the latitude and longitude for the geographic center of that location.

Another basic approach to showing data is layers on top of a map to indicate the data associated with the region. It's great for showing the data itself, not just the content that's associated with the region like markers do. So markers show you there's a hockey rink in this place and here's information about it, maybe in a callout. In the case that I'm describing using layers, you actually have the data built into the map itself. One way to show data on top of the map is in these layers that are in this case dots, point clusters. So the circle size indicates the amount of data.

In this case there's also a label showing me the number. Interactivity can do a lot to add functionality. So for instance as I zoom in on this map and I zoom in on this dot here, it'll actually break up. So that 210 which was aggregating a bunch of data points breaks out. And I can see as I'm zooming in closer to see more detail, 40 of them are over here, 31 over here, 10 over here, etc. And once again, the more I zoom in, the more granular I get until I get to the point where I can see just where all the individual dots are that make up those aggregated numbers that I was looking at before.

Another very common approach in mapping data is called a Chloropleth. So you see these all the time during elections, right? So you see a map with red and blue states and that tells you who voted which way in that state. A lot of times they're binary, on and off, or categories like red versus blue. But other times they're used to represent variations in data values. So for instance in this map, we're looking at country scores in terms of their resilience to various risks that they face.

This was created for the FM Global Resilience Index, and we only have four shades of blue. So the most resilient countries are in the darkest shade of blue and the least resilient are in the lightest shade of blue. The shading makes it relatively easy to see the variance between the values. I really like chloropleth maps because you know the country itself is the color. It does show you the value that you're looking at. But of course there are risks with chloropleths. For instance, you know, looking at very small countries, so for instance some of these islands over here in Indonesia, now in this case they all belong to one country so maybe you can sort of tell what shade it is.

But sometimes you have countries that are just a single island like some of these Caribbean countries. If they're the lightest blue, I can't easily tell if it's blue or gray. So you know the risk with chloropleth is you're relying on the size of the country to show things and if the country is small, it can be difficult to see. So use it with caution. Sometimes a cartogram is another option. But in general, chloropleths are great. Another way to show data on a map is called a Heat Map.

And so this is similar to a chloropleth in that you're showing data associated with regions, but this is really great to show the concentration of data on a fairly micro level even from a macro view. So I'll show an example to explain what I mean by that. So what we're looking at here is the use of the hashtag MTVhottest when tweets are being sent out around the world. So the size of the dot represents the volume of tweets and you can see the clock running down here so you can see the timing of these tweets happening.

And so this dynamic animated view, I'm seeing them happen not exactly in real time but I can see them happening over time. If I switch over to the static view, what I see is an overall heat map. So I can see that overall of the entire time period being tracked how many tweets happened in one region compared to another region. Once again, if I zoom in on the map, that aggregated view of the heat map starts breaking into its component parts, and I can zoom in and I can continue to zoom in and zoom in and zoom in and get more and more detail.

And so I can see the relative strength of certain regions, the relative number of times the tweets were shared, and see it in sort of an overall intensity view rather than a specific geographic share of the view like I would in a chloropleth. Finally maps are very often used to show Flows between regions. And the way this is often done is simply by putting arrows on things, right. So here I'm looking at the exports or imports of some goods between various countries.

So in this case, the thickness of the line indicates the volume of the flow. And in this particular example, China is highlighted because that's the focus of this particular data display. If the object is to show movement of something between regions, then flows like this are a basic default to use. Maps are by definition data visualization. They're showing you location data in a visual form. So laying more stuff on top of a map is a very effective way to share information that's geographic in nature.

These five forms that we've gone through are a great start. And like with a bar chart, I challenge you to always think about when it might not be a good idea to use them, when you might want to try something else. And like going beyond the bar chart, you need a compelling reason to do so.