notes.md

Hands on

First dataset

April Unemployment data:

http://www.bls.gov/web/laus/laumstrk.htm

File available here

https://dl.dropboxusercontent.com/u/1307405/CartoDB/unemployment_rate_2014.csv

Steps

• Georeference by state_name
• Turn unemployment_rate to numeric
• Create choropleth
• Change basemap

Another look at unemployment

Source: http://blog.splitwise.com/2014/01/06/free-us-population-density-and-unemployment-rate-by-zip-code/ Backup: https://dl.dropboxusercontent.com/u/1307405/trash/Unemployment%2BUnsorted.csv.zip

https://saleiva3.cartodb.com/tables/unemployment_20unsorted/

Steps

• Add new column, percentage::numeric
• Write old data into new data

update unemployment_20unsorted set percentage = replace(unemp_rate, '%', '')::int where unemp_rate != ''

• Create bubble map
• Create visualization
• Publish visualization as link
• Apply dynamic SQL

SELECT * FROM unemployment_20unsorted ORDER BY percentage ASC

• Refresh visualization

SELECT * FROM unemployment_20unsorted ORDER BY percentage DESC

• Refresh visualization

SELECT * FROM 
  unemployment_20unsorted 
WHERE 
  ST_Distance(the_geom::geography, CDB_LatLng(38.8951, -77.0367)::geography) < 1000000

• Refresh visualization

Resources

• Community forum
• Tutorials
• Documentation
• Academy

Slide links

• LA Times Pollution
• Popular dog names in Vancouver
• WSJ Changing Continent
• Chicago lot finder
• Island climbing map
• Melbourne urban forest
• Illustreets UK living metrics
• Living cities
• Eric the bird
• PLUTO data tour
• Syrian refugee report
• Iceland
• Global Forest Watch
• NYCHenge

From the Quick Demo

Download Eric the Bird

• http://lifewatch.inbo.be/blog/posts/tracking-eric.html
• Backup: https://dl.dropboxusercontent.com/u/1307405/trash/tracking_eric.zip

Platform demo

• polling places: https://gist.github.com/mheadd/986863
• CartoDB.js API https://github.com/CartoDB/cartodb.js/blob/develop/doc/API.md

        var layer = layers[1];
        layer.setInteractivity('cartodb_id, latitude, longitude');
        layer.setInteraction(true);
        layer.on('featureOver', function(e, latlng, pos, data, layer) {
          console.log(data);
        });

• add div

        <p class="streetview"></p>

• create url

        var url;
        layer.on('featureOver', function(e, latlng, pos, data, layer) {
          var loc = 'http://maps.googleapis.com/maps/api/streetview?size=300x190&location='+data.latitude+','+data.longitude+'&sensor=false&fov=110';
          console.log(loc);
        });

• show image

        var url;
        layer.on('featureOver', function(e, latlng, pos, data, layer) {
          var loc = 'http://maps.googleapis.com/maps/api/streetview?size=300x190&location='+data.latitude+','+data.longitude+'&sensor=false&fov=110';
          console.log(loc)
          if (loc != url){
            url = loc;
            var i = new Image();
            i.src = url;
            $('.streetview').html(''); //clear old if exists
            $('.streetview').append(i); //add image
          }
        });