Fusion Tables Tutorial: National Parks in Canada

Bring Your Data in Fusion Tables

For this session of the workshop, you will be working with a csv file containing the location, area and year established for each National Park in Canada.

  1. Download the data modified for this workshop. Save the data and rename it adding your own Full Name to the .csv file name. Credit: Parks Canada. The original data can be found here
    2.  Import the data into Fusion Tables. Log into Google with this account:
            Username: instituteworskhop2012@gmail.com
            Password: ilovemaps

        2.a Go to Google Documents: Click on Create - Table (beta). See graphic below.

            2.b Import the table choosing From this Computer and browse to the table you just downloaded.

            2.c Click Next and leave the defaults as shown below:

            2.c Click Next and Finish. Your table should look something like this:



            2.d Get acquainted with your data. Fusion Tables is very similar to other spreadsheets programs.
            Use the scroll button to see all the fields and make sure you understand what they mean.

Create a Google Site to visualize the outputs of Fusion Tables

  Each one of us is going to create their own Google Site to publish the graphics and maps we will be creating in Fusion Tables.
  1. Go to: https://sites.google.com/
  2. Click on Create
  3. Make sure you include your name on the site so you know which one belongs to you
  4. This is the website you will use to save the graphics and maps created during this session.

Map Visualization

Using Fusion Tables we will be creating something similar to this map:


Notice there is a column with text highlighted in yellow. Fusion Tables chooses the most left column of any table that possibly contains geographic information. In this case, "Geographic Location" is the column we want to use to geocode our table.

If the column you want to use for geocoding is not hightlighted in yellow, go to Edit - Modify Columns and select the column you want to use. Under Type, make sure you choose Location, as shown below:


  1. Geocoding

    Click on Visualize - Map
    The Google engine starts geocoding (locating objects on the surface of the Earth) based on the "Geographic Location" field.


  2. Changing the Symbology

    Click on one of the dots to see the window-pop up that comes with it. By default every location has the same red dot and the pop-up window will include all of the columns from the table.

    Click on Configure Styles:


    You have several options to display your locations:

    - Fixed: uses the same default symbol for all points
    - Bucket: uses different symbols based on classes made from buckets of a numeric field
    - Column: you can have different symbols for different rows based on a column that you populate with the symbols you want. For more information, click on the Learn More link.
    In this case, we will use a column that I have previously populated with the marker name I wanted to use "parks".

    Click on Column. Choose Marker as the column. Your window should look like this:

  3. Changing the Pop-Up Window

    Click on one of the new markers to see the pop-up window. You will notice that by default, all of the columns are added.

    Click on Configure Info Window:


    In the Automatic tab, all of the columns are checked to be displayed on the map. Uncheck some of them and see the results on the pop-up window.

    Click on Configure Info Window again. In the Custom tab, you can do basic HTML coding to change the color and size of fonts, alignments and programmatic text added to the pop-up window.

    Copy and paste the text below into the Configure Info window (Custom HTML text box):

    <div class="googft-info-window"

        style="font-family: sans-serif; width: 330px; height: 430px; overflow-y:auto">

       <div style="text-align:center"><img src="{Photo}" style="width: 200px;" /></div>

        <h2 class="color: brown">{Geographic Location}</h2>

    <p>This gorgeous park includes <em>{Description}.</em></p>

      <p>It was established in {Year Established}.</p>

      <p>Find more about this Park at the <a href="{Web Link}">

          National Parks of Canada Website</a></p>

    </div>

    Your window should look something like this:


    Click on the Save button.

    Congratulations! You just created your first Map using Fusion Tables!!
  4. Sharing your Map!

    There are several ways that you can share your map:

    - Get link: copy and paste the link to anybody who would like to see the file as it is in Fusion Tables.

    - Share: it gives specific people permission to access the datatable you just created in Fusion Tables. Emails them the link to the map. They will need to sign it to see it. This button is also used to change the privacy options of your table, so you can embed it on your website.


    - Export to Kml: creates a static copy of the map data for viewing in Google Earth. You can use email the file to colleagues or upload it to your website to share as single file. However, any changes to the Fusion Table that you do afterwards will not appear in this static copy of your data.

    Save the Kml to your local hard drive and double click to open the file in Google Earth. Explore your data briefly. Below is a snapshot of the Kml in Google Earth.

- Get Kml Network Link: it creates a dynamic link so you can make changes to your Fusion Tables data after you already shared it and these changes will be reflected in Google Earth. However, your map must be shared as Public or Unlisted for this to happen.


In Google Earth, click on Add menu - Network Link. You will have a dynamic connection to your data in Fusion Tables.

- Get embeddable Link: it allows you to embed the interactive map in your website. This option also requires you to share the map as Public or Unlisted.


You will embed the map you just created into your own Google Site.
  1. Share the map

    1.1 From the map view, click the Share button.

    1.2 Under Visibility options, select Public or Unlisted radio button

  2. Embed the map

    2.1 Click Get Embeddable Link

    2.2 Copy the HTML code in the box (select the code and click Control + C)


    2.3 Navigate to your Google Site that you created at the beginning of this session.


    2.4 Click on the Edit Page button

    2.5 Change the edit settings to HTML editing mode by clicking on the Edit HTML source button

    2.6 Paste the HTML code into your Google Site window that appears.

    2.7 Click Save to stop editing and save your edits.


Congratulations! You have your own website with an interactive map all created by yourself with no programming experience!!

LINE CHART: Square Kilometers Added per Year

Our goal is to create an interactive line chart graphic like the one shown below that displays the area of national parks added every year.

  1. Go to Visualize - Line:
  2. Select Year Established as your X Axis and Park Area in Square Kilometers as your Y Axis

  3. Click on Get Embeddable Code

  4. Copy and Paste the HTML code in your Google Site. Remember, you need to be in an editing mode and it has to be in an HTML viewing setting.

  5. Save your edits on your website and explore the line chart.
Congratulations! You just created your first interactive Graphic with Fusion Tables!!

Bar Chart:  Area of National Parks Established in the 70's

In this exercise we will be creating an interactive graphic that only displays the National Parks established in 1970's and the area that each one of them encompasses. In order to do this, we will have to "filter" the database on the fly. The results are displayed below.

  1. Go to Visualize - Bar:

  2. Add a Filter: only the National Parks Established in the 1970's. Following the settings below:

    These are the settings for the Filter:
    Filter field: Year Established. Relation: starts with. Condition: 197

  3. Click on the Apply button

  4. Select the graphic fields:
    Entity: Geographic Location
    Value: Park Area in Square Kilometers

  5. Click on Get Embeddable Code

  6. Copy and Paste the HTML code in your Google Site. Remember, you need to be in an editing mode and it has to be in an HTML viewing setting.

  7. Save your edits on your website and explore the bar chart.

PIE CHART: Total Area per Year for Parks Established during or after 1980

We are going to build an interactive graphic that shows the proportionate area of Parks added per year since 1980. For this purpose, we will have to filter the data to display only data after 1979 and we will have to aggregate the results for each year. The final graphic will look like this:

  1. Go to Visualize - Bar:

  2. Add a Filter: only the National Parks Established during or after 1980. Following the settings below:
    Settings for the Filter:
    Filter field: Year Established. Relation: >=. Condition: 1980

  3. Click on the Apply button

  4. Aggregate your data: get the sum of all the area for the parks established each year

    Settings:
    Show aggregate: Park Area in Square Kilometers. Check the Sum box.
    Aggregated by: Year Established.

  5. Click on the Apply button

  6. Click on Get Embeddable Code

  7. Copy and Paste the HTML code in your Google Site. Remember, you need to be in an editing mode and it has to be in an HTML viewing setting.

  8. Save your edits on your website and explore the pie chart.

TIMELINE: Area of National Parks Added per Year in Sq Km 

In this final exercise we want to build an interactive timeline that displays the Area of National Parks added per year to try to see some trends per decade. Our final graphic should look like this:


  1. Go to Visualize - Timeline:

  2. Follow the expression below:

  3. Explore the timeline graphic. Click on the vertices on the chart to see their values and click on one of the scroll buttons (shown below) to narrow your timeline.

  4. Click on Get Embeddable Code

  5. Copy and Paste the HTML code in your Google Site. Remember, you need to be in an editing mode and it has to be in an HTML viewing setting.

  6. Save your edits on your website and explore the timeline graphic.

Congratulations! You just finished your Introductory Session in Fusion Tables!!


SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

Download
  12k v. 1 Mar 17, 2012, 6:27 PM Institute Workshop
ċ

View
  Mar 18, 2012, 4:05 PM Patricia Carbajales
Comments