Simple CartoDB + D3 earthquake example by andrewxhill

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Easy earthquakes</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
    <style type="text/css">
 
    body{
        background:white;
    }
    svg {
      width: 960px;
      height: 500px;
    }
    svg:active {
      cursor: move;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
    circle {
      fill: none;
      stroke-width: 1.5px;
    }
    #first_layer path {
      fill-opacity:0.8;
      fill: none;
      stroke: black;
      stroke-width:0.5px;
      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");
 
    // Our projection.
    var xy = d3.geo.mercator();
        xy.scale(1500);
        xy.center([-90,30]);
 
    svg.append("g").attr("id", "first_layer");
 
    var path = d3.geo.path();
    
    sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})
      .done(function(collection) {
          svg.select("#first_layer")
            .selectAll("path")
              .data(collection.features)
            .enter().append("path")
            .attr("d", path.projection(xy));
      })
      .error(function(errors) {
        // console.log('Errors! Oh no!')
      });
 
    var earthquakes;
    sql.execute("SELECT the_geom, quakedate, magnitude FROM {{table_name}} WHERE the_geom IS NOT NULL ORDER BY quakedate ASC", {table_name: 'earthquaked3'})
      .done(function(collection) {
        earthquakes = collection.features;
        quake();
      });
 
    var i = 0;
    function quake() {
      var c = earthquakes[i];
      svg.append("circle")
          .attr("cx", xy(c.geometry.coordinates)[0])
          .attr("cy", xy(c.geometry.coordinates)[1])
          .attr("r", 1)
          .style("fill", "red")
          .style("fill-opacity", 0.5)
          .style("stroke", "red")
          .style("stroke-opacity", 0.5)
        .transition()
          .duration(2000)
          .ease(Math.sqrt)
          .attr("r", c.properties.magnitude * 20)
          .style("fill-opacity", 1e-6)
          .style("stroke-opacity", 1e-6)
          .remove()
        setTimeout(quake, 200);
      i++;
      if (earthquakes.length==i) i = 0;
    }
 
    function redraw() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }
 
    </script>
  </body>
</html>