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?
-
CSV files
- Electricity consumption by county
-
Excel files
- Population data for zip codes
-
Keyhole Markup Language (KML)
- Boundaries of the counties
-
Shape files?
- Use Shape Escape - http://shpescape.com
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
- Merge Table
- Update the map info window content
- Style the map markers
- Get embeddable code
Interactive visualizations
FusionTablesLayer in the Google Maps API
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
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
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
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
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
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
Click event listener
google.maps.event.addListener(layer, 'click', function(e) {
drawVisualization(e.row['County'].value);
});
Custom info windows
'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?
- Newspapers around the world
- Server connections for MMORPG
- Dashboard for Sales Operations
- Mapping store locations
- Crowd sourcing for potholes
What is it?
- REST API
- Send SQL-like queries
- CREATE, INSERT, UPDATE, DELETE
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...
- Tables and table metadata
- Table columns
- Info window templates
- Map feature styles
What is it?
- REST API
- Resources are represented as JSON objects
{
"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/