Google maps tutorial (part 5/5): How to create a free heat map with Google Fusion Tables

Tutorial goals: understand the ideas behind Google Fusion Tables heat maps; create an interactive map showing state-by-state U.S. population, as shown in the sample below.

(This post is part five of a 5-part tutorial on creating Fusion Tables intensity map; the other parts are listed as related posts at end of this post)

How Fusion Tables works to create heat maps

It is essential that you understand the idea and the steps in creating a Fusion Tables map; otherwise, you will easily get lost when working on the demo map in this tutorial.

In its simplest form, a Fusion Tables map is a fusion, or merger, of two tables. In the U.S. population example, I have two tables: one contains state-by-state population numbers, the other one contains geographic information of each state (i.e., shape and boundary). We need to instruct Fusion Tables to pull state name, population and boundary information, and plot the state-by-state information onto a base map.

The typical workflow is that you manage to get hold of two tables, upload them to Fusion Tables, merge the two tables, visualized the new table on a map, style the map, then share it. To give you an idea what all the tables look like, see below for screen shots of the three tables in the U.S. population map: (a) population table, (b) geometry table and (c) the merged table. (Click thumbnails below to view larger screen shots in a gallery)

A step-by-step guide to creating Fusion Tables heat maps

Let’s practice recreating the U.S. population heat map shown at the start of this post; to begin with, click to download the two tables onto your computer: the U.S. population table and the U.S. state boundary geometry table. If you don’t have a free Google account, create one by going to the Account Creation page, or by clicking the Create an account button on the top-right corner of any Google sign-in page.

Again, a Fusion Tables heat map is created in three steps:

  1. upload two tables
  2. merge tables; visualize the merged table on a map
  3. style and share the map

Step 1. Upload the two tables to Fusion Tables

1.1 Log in to your Google Drive account, click the red “create” button on the upper left corner, then choose Fusion Table in the popup window.

1.2 The next window asks you where to locate the first table. Our tables are on the computer, so click the “Browse” button to locate and select the population.csv file, then click “Next.”

How to create heat maps

1.3 Make sure you see the population.csv file is imported and shown as below, then click “Next.”

How to create heat map

1.4 In the next window, you can edit basic information that will be associated with the uploaded table, especially the table name and description. If you don’t know what to change, just leave them and click “Finish.”

How to create heat map

1.5 The next window shows the uploaded table. Notice that this table has 49 rows, each corresponding to one contiguous continental state; also notice that the state names in the “Region” column are in yellow – this means Fusion Tables recognizes them as location and is trying to geocode them, which in other words means matching the texts with real locations. For our purpose, we are using a separate state boundary file so we don’t have to wait for and rely on Fusion Tables to finish this geocoding process.

How to create heat map

1.6 Next we need to upload the second table, states.kml, which is the one that contains geographic information of state boundaries. IMPORTANT: to import the second table, you need to open a new browser window or tab and repeat the process above. The uploaded table looks like the screen shot below and has 56 rows each corresponding to a U.S. state or territory. Notice that it has four columns: description, name, id, geometry. The geometry column contains geographic information for each state, and Fusion Tables uses this geometry information to plot the states on the map.

How to create heat map

Step 2: Merge and visualize uploaded tables

2.1 Now that the two tables have been uploaded (imported) to Fusion Tables, the next step is to merge them into one that has population numbers and state boundary information. Go back to the uploaded population table, click on File and in the drop-down menu, select “Merge,” as shown below.

How to create heat map

2.2 In the next window, Fusion Tables asks what and where the second table is – it is the one that contains geometry information and, if you didn’t change the default info, is titled “states.” Select the table and click Next.

How to create heat map

2.3 In the next window, confirm the source of match. We are matching state names in the “Region” column of the first table with state names in the “name” column of the second table:

How to create heat map

2.4 The next window asks what columns you want to keep in the merged table. When a table is created (by someone else), it may contain columns that are not pertinent to our purpose, so you may want to skip those columns to avoid a cluttered interface. In this example, we don’t need to keep the description and id columns, so un-check them and click “Merge.”

GFT10

2.5 If everything has been done right, you should see a window confirming the two tables have been successfully merged, the new table comes with the title “Merge of Continental U.S. population and states”; click “View table” to view the new table.

How to create heat map

2.6 When you examine the new table, notice it has 49 rows for 49 states, it also has three columns: region (state name), population, and geometry (geographic boundary). Click on the “Map of geometry” tab and you will see a heat map which needs editing and styling.

How to create heat map

Step 3: Style and share the map

3.1 We need to make changes to the map styles so that it displays features and functions we desire. Click on “Change feature styles” button and you will see the “Change map feature styles” window.

Google Fusion Tables tutorial

3.2 Below is a screencast video showing you how to change the map styles: we break the range of population numbers into several buckets, select a color scheme and apply a different shade for each bucket; the map legend is not included in the map by default and we need to add one.

3.3 IMPORTANT: in the map preview, click the “Done” button to finish editing and styling the map. But BEFORE you click “Done,” you need to zoom in on the map to for a better view of U.S., reason being that by default, the shared map shows a zoomed-out view of the map and other people would have to zoom in multiple times.

How to create heat map

3.4 IMPORTANT: by default, your map can only be viewed by you; before you can share the map in any way, you must change the privacy setting to “Public.” To do that, click the Share button on the upper-right corner of the map, click “Change…” and in the new window select the visibility option of “Public on the web.” Click Save and back to the Sharing settings window.

How to create heat map

3.5 You have multiple options to share your map: email, twitter, G+, and Facebook. If you want to embed the map in a blog post or another web page, you can get the embedding codes by clicking the “Map of geometry” tab and them “Publish;” in the new window, make changes to the map height and width if you wish, and copy the embed codes.

How to create heat map

Want to learn more about Google mapping? Here’s some popular books on Amazon that you can check out:

Related posts:

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin manages an online marketing company. He also manages MulinBlog Online J-School (www.mulinblog.com/mooc), a free online journalism training program, which offers courses such as Audio Slideshow Storytelling; Introduction to Social Media Marketing; Writing for the Web; Google Mapping for Communicators; Introduction to Data Visualization; Introduction to Web Metrics and Google Analytics.
This entry was posted in Data journalism, Digital tools and tips. Bookmark the permalink.

3 Responses to Google maps tutorial (part 5/5): How to create a free heat map with Google Fusion Tables

  1. Pingback: Google Fusion Table | Ross's Blog

Leave a Reply