andrewxhill/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>CartoDB + D3 Drought Maps</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
    <style type="text/css">

    body{
        width: 900px;
        background: black;

    }
    svg {
      width: 450px;
      height: 300px;
      padding: 0; margin: 0;
      background: black;
    }
    svg:active {
      cursor: move;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
    #first_layer path {
      fill-opacity:0;
      fill: transparent;
      stroke: #ddd;
      stroke-width:0.5px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #second_layer path {
      cursor: pointer;
      fill-opacity:0;
      fill: transparent;
      stroke-width:0.6px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    </style>
  </head>
  <body>
    <script type="text/javascript">

    var first_layer = 'd3_world_borders';
    var second_layer = "usa_drought_2012"

    var sql = new cartodb.SQL({ user: 'staging20', format: 'topojson', dp: 5});

    // Define our SVG element outside our SQL functions
    var svgs = [];
    for (var i = 0; i < 4; i++){
      var svg = d3.select("body")
            .append("svg")
            .call(d3.behavior.zoom()
                .on("zoom", redraw))
            .append("g");
      svg.append("g").attr("id", "first_layer");
      svg.append("g").attr("id", "second_layer");
      svgs.push(svg);
    }

    // Our projection.
    var xy = d3.geo.mercator()
               .scale(3000)
               .center([-65,28])
               .precision(0);
    var path = d3.geo.path();


    var stroke = d3.scale.linear()
        .domain([0, 1, 2, 3, 4])
        .range(["#FFFFB2", "#FED976", "#FEB24C", "#FD8D3C", "#F03B20"]);

    //add our background map
    sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL AND iso3 = 'USA' ", {table_name: first_layer})
      .done(function(collection) {
        for (i in svgs){
          svgs[i].select("#first_layer")
              .append("path")
              .datum(topojson.mesh(collection))
              .attr("d", path.projection(xy));

            // add our drought map
            sql.execute("SELECT ST_Simplify(the_geom,0.01) the_geom, dval, {{js_month}} as month  FROM usa_drought_2012 WHERE date_part('month', date_of)::int - 1 = {{js_month}} ORDER BY dval ASC", {table_name: second_layer, js_month: i*2})
              .done(function(data) {
                  if (data.objects[0]){
                    var m = data.objects[0].properties.month/2;
                    var tj = {drought: {type: "GeometryCollection", geometries: []}};
                    for (j in data.objects){
                      tj.drought.geometries.push(data.objects[j])
                    }
                    data.objects = tj
                    svgs[m].select("#second_layer")
                      .selectAll("path")
                        .data(topojson.object(data, data.objects.drought).geometries)
                      .enter().append("path")
                      .attr("d", path.projection(xy))
                      .attr("stroke", function(d) { return stroke(d.properties.dval); });
                    }
              })
              .error(function(errors) {
                // console.log('Errors! Oh no!')
              });
        }
      })
      .error(function(errors) {
        // console.log('Errors! Oh no!')
      });

    function redraw() {
      for (i in svgs){
        svgs[i].attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      }
    }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>CartoDB + D3 Drought Maps</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
	<style type="text/css">

	body{
	width: 900px;
	background: black;

	}
	svg {
	width: 450px;
	height: 300px;
	padding: 0; margin: 0;
	background: black;
	}
	svg:active {
	cursor: move;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	}
	#first_layer path {
	fill-opacity:0;
	fill: transparent;
	stroke: #ddd;
	stroke-width:0.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	#second_layer path {
	cursor: pointer;
	fill-opacity:0;
	fill: transparent;
	stroke-width:0.6px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var first_layer = 'd3_world_borders';
	var second_layer = "usa_drought_2012"

	var sql = new cartodb.SQL({ user: 'staging20', format: 'topojson', dp: 5});

	// Define our SVG element outside our SQL functions
	var svgs = [];
	for (var i = 0; i < 4; i++){
	var svg = d3.select("body")
	.append("svg")
	.call(d3.behavior.zoom()
	.on("zoom", redraw))
	.append("g");
	svg.append("g").attr("id", "first_layer");
	svg.append("g").attr("id", "second_layer");
	svgs.push(svg);
	}

	// Our projection.
	var xy = d3.geo.mercator()
	.scale(3000)
	.center([-65,28])
	.precision(0);
	var path = d3.geo.path();


	var stroke = d3.scale.linear()
	.domain([0, 1, 2, 3, 4])
	.range(["#FFFFB2", "#FED976", "#FEB24C", "#FD8D3C", "#F03B20"]);

	//add our background map
	sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL AND iso3 = 'USA' ", {table_name: first_layer})
	.done(function(collection) {
	for (i in svgs){
	svgs[i].select("#first_layer")
	.append("path")
	.datum(topojson.mesh(collection))
	.attr("d", path.projection(xy));

	// add our drought map
	sql.execute("SELECT ST_Simplify(the_geom,0.01) the_geom, dval, {{js_month}} as month FROM usa_drought_2012 WHERE date_part('month', date_of)::int - 1 = {{js_month}} ORDER BY dval ASC", {table_name: second_layer, js_month: i*2})
	.done(function(data) {
	if (data.objects[0]){
	var m = data.objects[0].properties.month/2;
	var tj = {drought: {type: "GeometryCollection", geometries: []}};
	for (j in data.objects){
	tj.drought.geometries.push(data.objects[j])
	}
	data.objects = tj
	svgs[m].select("#second_layer")
	.selectAll("path")
	.data(topojson.object(data, data.objects.drought).geometries)
	.enter().append("path")
	.attr("d", path.projection(xy))
	.attr("stroke", function(d) { return stroke(d.properties.dval); });
	}
	})
	.error(function(errors) {
	// console.log('Errors! Oh no!')
	});
	}
	})
	.error(function(errors) {
	// console.log('Errors! Oh no!')
	});

	function redraw() {
	for (i in svgs){
	svgs[i].attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	}
	}

	</script>
	</body>
	</html>