script.js

var apiKey = '0a6b68796bfcfe694987a9ddf3eddd1b735dcd7f';
var urlBase = 'http://api.census.gov/data/2011/acs5';
var current = $('#whichValue').val();
var transforms = {
  "Mean Commute": function(a) {
    var b = [];
    var ct,i;
    for (i = 0; i < a.length; i++) {
      ct = [parseFloat(a[i][0]) / parseFloat(a[i][1]), a[i][2], a[i][3]];
      if (!ct[0]) {
        ct[0] = 0;
      }
      b.push(ct);
    }
    return b;
  },
  "Income Car Vs Trans": function(a) {
    var b = [],i,ct;
    for (i = 0; i < a.length; i++) {
      ct = [parseFloat(a[i][0]) - parseFloat(a[i][1]), a[i][2], a[i][3]];
      if (!ct[0]) {
        ct[0] = 0;
      }
      b.push(ct);
    }
    return b;
  },
};

function buildParams(isCounty) {
    var params = {
        "key":apiKey,
        "get":$('#whichValue option:selected').data('get'),
    };
    // county vs. state-level?
    if (isCounty) {
        params.for = 'county:*';
        params.in = 'state:*';
    } else {
        params.for = 'state:*';
    }
    return params;
}
$('#whichValue').on('change',function(){
	current = $('#whichValue').val();
	$.get(urlBase, buildParams(isCountyZoom),'json')
    .then(function(a){
        var metric = $('#whichValue option:selected').val(),
            transform = transforms[metric];
        if (transform) {
            a = transform(a);
        }
        if (isCountyZoom) {
            buildCountyValues(countyShapes, a);
        } else {
            buildStateValues(stateShapes, a);
        }
        showAll();
    })
});
var m = L.map('map');
//if(!location.hash){
    m.setView([42.076,-89.505], 4)
var isCountyZoom = false; // county vs state-level view?
m.on("zoomend", function () {
    if (m.getZoom() < 7) {
        isCountyZoom = false;
    } else {
        isCountyZoom = true;
    }
});
//};

var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg';

var attributionText = 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

var mapquestSubdomains = '1234';

var optionsObject = {
	attribution : attributionText,
	subdomains : mapquestSubdomains
}

var mq=L.tileLayer(url, optionsObject).addTo(m);
var watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',{attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'});
var rt = rTree();
var countyObj={};
var stateObj={};
var countyShapes, stateShapes;
var countyScale = d3.scale.quantile();
countyScale.range(d3.range(11));
var stateScale = d3.scale.quantile();
stateScale.range(d3.range(11));
var layerControl = L.control.layers({"Stamen Watercolor":watercolor,"Map Quest Open":mq}).addTo(m);
var counties = L.geoJson({features:[]},{
	onEachFeature:function (f,l){
	var out = [];
	if (f.properties){
		for(key in f.properties){
			out.push(key+": "+f.properties[key]);
		}
		if(countyObj[f.id]){
			out.push(current+': '+countyObj[f.id].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
		}
		l.bindPopup(out.join("<br />"));
	}
	},style:function(f){
			return {fillColor:colorbrewer.RdYlBu[11][countyScale(countyObj[f.id])],weight:0,fillOpacity:0.6}
		
	}
}).addTo(m);

var states = L.geoJson({features:[]},{
	onEachFeature:function (f,l){
        // TODO
        //alert('state');
        var out = [],
            id = f.properties.STATE;
        if (f.properties){
            for(key in f.properties){
                out.push(key+": "+f.properties[key]);
            }
            if(stateObj[id]){
                out.push(current+': '+stateObj[id].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
            }
            l.bindPopup(out.join("<br />"));
        }
	},style:function(f){
        var id = f.properties.STATE;
        return {fillColor:colorbrewer.RdYlBu[11][stateScale(stateObj[id])],weight:0,fillOpacity:0.6}
	}
}).addTo(m);

function buildCountyValues(data, rows){
    buildValues(data, rows, countyObj, countyScale);
}

function buildStateValues(data, rows){
    buildValues(data, rows, stateObj, stateScale, true);
}

function buildValues(data, rows, storeObj, scale, isState) {
    var vals = [],
        width = rows[0].length,
        getId = function (r) {
            // helper to get id from a row
            var idIdx;
            if (isState && width == 2 || width == 3) {
                idIdx = 1;
            } else if (isState && width == 3 || width == 4) {
                idIdx = 2;
            }
            if (isState) return r[idIdx];
            else         return r[idIdx] + r[idIdx+1];
        };
	_.each(rows,function(r){
        var val = parseFloat(r[0],10),
            id = getId(r);
        storeObj[id] = val;
        vals.push(val);
	});
	scale.domain(vals);
}


layerControl.addOverlay(counties,"Counties");

//m.addHash({lc:layerControl});
$.when($.ajax('json/us-counties.json'), $.get(urlBase, buildParams(true),'json'),
       $.ajax('json/states.json'), $.get(urlBase, buildParams(false), 'json'))
.then(function(a, b, c, d){
    countyShapes = a[0];
    stateShapes = c[0];
    buildCountyValues(countyShapes, b[0]);
    buildStateValues(stateShapes, d[0]);

    rt.geoJSON(countyShapes,function(err,success){
        if(!err){
            showAll();
        }
    });
});

m.on("contextmenu moveend",showAll);
function showAll(){
    states.clearLayers();
	counties.clearLayers();

    if (isCountyZoom) {
        showViewableCounties();
    } else {
        states.addData(stateShapes);
    }
}

function showViewableCounties() {
	var bounds = m.getBounds();
	counties.addData(
		rt.bbox(
			[
				[bounds.getSouthWest().lng,bounds.getSouthWest().lat],
				[bounds.getNorthEast().lng,bounds.getNorthEast().lat]
			]
		)
	);
}