Skip to content

Instantly share code, notes, and snippets.

@andrewxhill
Last active August 29, 2015 14:01
Show Gist options
  • Save andrewxhill/2e969e0d45ceb3555cc4 to your computer and use it in GitHub Desktop.
Save andrewxhill/2e969e0d45ceb3555cc4 to your computer and use it in GitHub Desktop.

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

Slide links

From the Quick Demo

Download Eric the Bird

Platform demo

        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
          }
        });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment