Intro to Google Fusion Tables


Kathryn Hurley
Developer Programs Engineer, Google
Oct 9, 2011

SVCC 2011

Agenda

What is Fusion Tables?

How can you use Fusion Tables?

Demo

Interactive visualizations

Examples

What is Fusion Tables?

What is Fusion Tables?

Data management system in the cloud that allows you to store, manage, visualize, and share your data.

*

* Source: Guardian "Deprivation mapped: how you show the poorest (and richest) places in England"

What is Fusion Tables? (cont.)

How can you use Fusion Tables?

What kind of data works well with Fusion Tables?

Let's take the electricity data as an example

 
County,   Sector,           2006,         2007,...
Alameda,  Non-Residential,  8008.850946,  9077.157293,...
Alameda,  Residential,      3088.726574,  2976.189711,...
Alameda,  Total,            11097.57752,  12053.347005,...
...
        
Source: Downloaded from the the California Energy Commission website

Upload your data

Go to docs.google.com

Select Create new > Table (beta)

Set Table Metadata and Attribution

Structured data

Types: Number, Text, Location, Date

Fusion Tables recognizes your location data, assigns type "Location"

Highlighted yellow means it hasn't been geocoded.

Share your data with others

Click the Share button in the top-right corner

View on a map

Select Visualize > Map (or bar chart, or line chart, etc.)

Fusion Tables geocodes your addresses

And the map...

Demo

Let's take a look at Fusion Tables

1769237

Interactive visualizations

FusionTablesLayer in the Google Maps API

Example

FusionTablesLayer in the Google Maps API

map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: new google.maps.LatLng(37.405073750176946, -119.8828125),
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: tableid
  }
});
layer.setMap(map);
        

FusionTablesLayer in the Google Maps API (cont.)

layer.setOptions({
  query: {
    select: 'geometry',
    from: tableid,
    where: "County = '" + county + "'"
  }
}); 
        

Fusion Tables in Google Chart Tools API

Example

Fusion Tables in Google Chart Tools API (cont.)

    
function drawVisualization(county) {
 google.visualization.drawChart({
  "containerId": "visualization",
  "dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=",
  "query": "SELECT Sector,'Total Usage' AS Use " +
           "FROM 1761814 " +
           "WHERE County = '" + county + "'",
  "chartType": "BarChart",
  "options": {
   "title": county
  }
 });
}

Examples

Texas Tribune

WNYC

Questions?

Advanced Fusion Tables


Kathryn Hurley
Developer Programs Engineer, Google
Oct 9, 2011

SVCC 2011

Agenda

Advanced Visualizations

Fusion Tables SQL API

Fusion Tables Table API

Fusion Tables in the Docs List API

Advanced Visualizations

Legend

Add a Legend

Example

Custom map control

function updateLegend() {
  var legendDiv = document.createElement('div');
  var legend = new Legend(legendDiv);
  legendDiv.index = 1;
  var position = google.maps.ControlPosition.LEFT_BOTTOM;
  map.controls[position].push(legendDiv);
}

// Generate the content for the legend
function Legend(legendDiv) {
  legendDiv.style.padding = '10px';
  var legendUI = document.createElement('div');
  legendUI.style.backgroundColor = 'white';
  legendUI.innerHTML = legendContent();
  legendDiv.appendChild(controlUI);
}

Fusion Tables Styling

Change the style based on the selected attribute

Example

Fusion Tables Styling in Google Maps API

if (sector == 'Residential') {
  styles = [{
    where: "'2010' > 0",
    polygonOptions: {
      fillColor: '#f4cccc'
    }
  }, {
    where: "'2010' > 200",
    polygonOptions: {
      fillColor: '#ea9999'
    }
  }...];
} else if (sector == 'Non-Residential') {
...
}
layer.set('styles', styles);

Map Styling

Styled Map

Example

Styled Map - Code

var style = [{
  featureType: 'all',
  elementType: 'all',
  stylers: [ { saturation: -99 } ]
}, {
  featureType: 'road.arterial',
  elementType: 'all',
  stylers: [ { visibility: 'off' } ]
}];

var styledMapType = new google.maps.StyledMapType(style, {
  map: map,
  name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');

Map + Chart

Map + Chart

Example

Chart Code (again)

    
function drawVisualization(county) {
 google.visualization.drawChart({
  "containerId": "visualization",
  "dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=",
  "query": "SELECT Sector,'Total Usage' AS Use " +
           "FROM 1761814 " +
           "WHERE County = '" + county + "'",
  "chartType": "BarChart",
  "options": {
   "title": county
  }
 });
}

Click Events

Chart updates on click

Example

Click event listener

google.maps.event.addListener(layer, 'click', function(e) {
  drawVisualization(e.row['County'].value);
});

Custom info windows

Example

'click' event listener

google.maps.event.addListener(layer, 'click', function(e) {
  var electricity = e.row['2010'].value;
  
  if (electricity > 5000) {
    e.infoWindowHtml = '<p style="color: red;">High Usage!</p>';
  
  } else if (electricity > 2500) {
    e.infoWindowHtml = '<p style="color: orange;">Medium Usage</p>';
  
  } else {
    e.infoWindowHtml = '<p style="color: green;">Low Usage</p>';
  }
});

Fusion Tables SQL API

What can you do with it?

What is it?

Examples

SELECT * FROM 123456

INSERT INTO 123456 (Name, Age) VALUES ('Kathryn', '?')

Fusion Tables Table API

What can you do with it?

Create, insert, update, delete...

What is it?

{
 "kind": "fusiontables#table",
 "tableId": "123456",
 "name": "test-table",
 "columns": [
  {
   "columnId": 0,
   "name": "ColumnA",
   "type": "STRING"
  },...
 ],...
}

Trusted Testers

fusion-tables-api-trusted-testers@googlegroups.com

Fusion Tables in the Docs List API

What can you do with it?

Update Permissions!

client = gdata.docs.client.DocsClient(source="demo")

url = "/feeds/default/private/full/-/table"
entry = client.GetDocList(
    uri="%s?title=%s&title-exact=true" % (url, "My Table"))[0]

scope = gdata.acl.data.AclScope(value="me@gmail.com", type="user")
role = gdata.acl.data.AclRole(value="owner")
acl = gdata.docs.data.Acl(scope=scope, role=role)

new_acl = self.client.Post(acl, entry.GetAclFeedLink().href)

Contact us

General questions:
googletables-feedback@google.com


API questions:
fusion-tables-users-group@googlegroups.com


+Kathryn Hurley, @GoogleFT


API Documentation:
code.google.com/apis/fusiontables/

Questions?