andrewxhill/index.html

## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>U.S. States</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.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{
        background:white;
    }
    svg {
      width: 960px;
      height: 500px;
      background: none;
    }
    svg:active {
      cursor: move;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
    .globe {
      fill: black;
      fill-opacity: 1;
      stroke: #111;
      stroke-width:1px;
    }
    #first_layer path {
      stroke: #333;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    </style>
  </head>
  <body>
    <script type="text/javascript">

    var first_layer = 'd3_world_borders';

    //var sql = new cartodb.SQL({ user: 'viz2', format: 'geojson', dp: 5});

    // Define our SVG element outside our SQL functions
    var svg = d3.select("body")
            .append("svg")
            .call(d3.behavior.zoom()
                .on("zoom", redraw))
            .append("g");

    var fill = d3.scale.linear()
        .domain([0, 1000, 10000000, 100000000, 1000000000])
        .range(["#fdfdfd", "#6ab9fa", "#39a2f8", "#098bf5", "#0666b4"]);

    // Our projection.
    var xy = d3.geo.mercator()
              .scale(2000)
              .center([40,30]);

    var path = d3.geo.path()
                .projection(xy)

    svg.append("g").attr("id", "first_layer");

    //sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom, pop2005 as population FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})

    d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT the_geom, pop2005 as population FROM topojson_wb WHERE the_geom IS NOT NULL&format=topojson&dp=5", function(collection) {
      //var subunits = topojson.object(collection);
      var tj = {countries: {type: "GeometryCollection", geometries: []}};
      for (i in collection.objects){
        tj.countries.geometries.push(collection.objects[i])
      }
      collection.objects = tj

      svg.select("#first_layer")
        .selectAll("path")
          .data(topojson.object(collection, collection.objects.countries).geometries)
        .enter().append("path")
        .attr("fill", function(d) { return fill(d.properties.population); })
        .attr("stroke-width", "0.5px")
        .attr("fill-opacity", "0.7")
        .attr("d", path.projection(xy));
            });

    function redraw() {
      svg.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>U.S. States</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.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{
	background:white;
	}
	svg {
	width: 960px;
	height: 500px;
	background: none;
	}
	svg:active {
	cursor: move;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	}
	.globe {
	fill: black;
	fill-opacity: 1;
	stroke: #111;
	stroke-width:1px;
	}
	#first_layer path {
	stroke: #333;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var first_layer = 'd3_world_borders';

	//var sql = new cartodb.SQL({ user: 'viz2', format: 'geojson', dp: 5});

	// Define our SVG element outside our SQL functions
	var svg = d3.select("body")
	.append("svg")
	.call(d3.behavior.zoom()
	.on("zoom", redraw))
	.append("g");

	var fill = d3.scale.linear()
	.domain([0, 1000, 10000000, 100000000, 1000000000])
	.range(["#fdfdfd", "#6ab9fa", "#39a2f8", "#098bf5", "#0666b4"]);

	// Our projection.
	var xy = d3.geo.mercator()
	.scale(2000)
	.center([40,30]);

	var path = d3.geo.path()
	.projection(xy)

	svg.append("g").attr("id", "first_layer");

	//sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom, pop2005 as population FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})

	d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT the_geom, pop2005 as population FROM topojson_wb WHERE the_geom IS NOT NULL&format=topojson&dp=5", function(collection) {
	//var subunits = topojson.object(collection);
	var tj = {countries: {type: "GeometryCollection", geometries: []}};
	for (i in collection.objects){
	tj.countries.geometries.push(collection.objects[i])
	}
	collection.objects = tj

	svg.select("#first_layer")
	.selectAll("path")
	.data(topojson.object(collection, collection.objects.countries).geometries)
	.enter().append("path")
	.attr("fill", function(d) { return fill(d.properties.population); })
	.attr("stroke-width", "0.5px")
	.attr("fill-opacity", "0.7")
	.attr("d", path.projection(xy));
	});

	function redraw() {
	svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	}

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