January 14, 2013 19:05
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Exploding world</title>
    <script src="http://d3js.org/d3.v3.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: #4a8dcb;
    }
    svg:active {
      cursor: move;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
    .globe {
      fill: #4a8dcb;
    }
    #first_layer path {
      fill-opacity:0.8;
      fill: #222;
      stroke: #ddd;
      stroke-width:0.5px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #second_layer circle {
      cursor: pointer;
      fill-opacity:1;
      fill: white;
      stroke-width:0.1px;
      stroke:black;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .halo {
      font-weight: 700;
      fill: none;
      stroke: white;
      stroke-width:4px;
      font-size: 14px; 
    }
    .text {
      font-weight: 700;
      fill: #777;
      stroke: none;
      stroke-width:0px;
      font-size: 14px; 
    }

    </style>
  </head>
  <body>
    <script type="text/javascript">

    var first_layer = 'd3_world_borders';
    var second_layer = 'd3_populated_places';

    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");

    // Our projection.
    var xy = d3.geo.orthographic();

    var force = d3.layout.force().size([960,500]);

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

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

    sql.execute("SELECT ST_Simplify(the_geom,0.001) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})
      .done(function(collection) {
        var nodes = [],
            links = [];

        collection.features.forEach(function(d, i) {
          //if (d.id == "02" || d.id == "15" || d.id == "72") return; // lower 48
          var centroid = path.centroid(d);
          centroid.x = centroid[0];
          centroid.y = centroid[1];
          centroid.feature = d;
          nodes.push(centroid);
        });

        force
            .gravity(0.01)
            .nodes(nodes)
            .start();

        var node = svg.selectAll("g")
            .data(nodes)
          .enter().append("svg:g")
            .attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
            .call(force.drag)
            // .call(drag)
          .append("svg:path")
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .attr("d", function(d) { return path(d.feature); });

        function tick() {
          node.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
          })
          .attr("d", function(d) { return path(d.feature); 
        });


        };
        force.on("tick", tick);

      })
      .error(function(errors) {
        // console.log('Errors! Oh no!')
      });


    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>Exploding world</title>
	<script src="http://d3js.org/d3.v3.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: #4a8dcb;
	}
	svg:active {
	cursor: move;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	}
	.globe {
	fill: #4a8dcb;
	}
	#first_layer path {
	fill-opacity:0.8;
	fill: #222;
	stroke: #ddd;
	stroke-width:0.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	#second_layer circle {
	cursor: pointer;
	fill-opacity:1;
	fill: white;
	stroke-width:0.1px;
	stroke:black;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	.halo {
	font-weight: 700;
	fill: none;
	stroke: white;
	stroke-width:4px;
	font-size: 14px;
	}
	.text {
	font-weight: 700;
	fill: #777;
	stroke: none;
	stroke-width:0px;
	font-size: 14px;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var first_layer = 'd3_world_borders';
	var second_layer = 'd3_populated_places';

	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");

	// Our projection.
	var xy = d3.geo.orthographic();

	var force = d3.layout.force().size([960,500]);

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

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

	sql.execute("SELECT ST_Simplify(the_geom,0.001) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})
	.done(function(collection) {
	var nodes = [],
	links = [];

	collection.features.forEach(function(d, i) {
	//if (d.id == "02" \|\| d.id == "15" \|\| d.id == "72") return; // lower 48
	var centroid = path.centroid(d);
	centroid.x = centroid[0];
	centroid.y = centroid[1];
	centroid.feature = d;
	nodes.push(centroid);
	});

	force
	.gravity(0.01)
	.nodes(nodes)
	.start();

	var node = svg.selectAll("g")
	.data(nodes)
	.enter().append("svg:g")
	.attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
	.call(force.drag)
	// .call(drag)
	.append("svg:path")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
	.attr("d", function(d) { return path(d.feature); });

	function tick() {
	node.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	})
	.attr("d", function(d) { return path(d.feature);
	});


	};
	force.on("tick", tick);

	})
	.error(function(errors) {
	// console.log('Errors! Oh no!')
	});


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

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