andrewxhill/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Easy earthquakes</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:black;
    }
    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: white;
      stroke-width:0.5px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

    var first_layer = 'live_map_views';

    var pub = new cartodb.SQL({ user: 'staging20', format: 'json'});

     // credit: http://html5doctor.com/finding-your-position-with-geolocation/
    function detectUserLocation(){
      if (navigator.geolocation) {
        var timeoutVal = 10 * 1000 * 1000;
        navigator.geolocation.watchPosition(
          mapToPosition,
          alertError,
          { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
        );
      }
      else {
        alert("Geolocation is not supported by this browser");
      }

      function alertError(error) {
        var errors = {
          1: 'Permission denied',
          2: 'Position unavailable',
          3: 'Request timeout'
        };
        startAnimation();
      }
    }

  function mapToPosition(position){
    lon = position.coords.longitude;
    lat = position.coords.latitude;
    pub.execute("SELECT axh_public_function_314({{lon}},{{lat}},{{cat}}), {{ran}}", {lon: lon, lat: lat, cat: Math.floor(3.99*Math.random()) + 1, ran: Math.random()}).done(function(d){console.log(d)});
    console.log('up')
    startAnimation();
  }
  detectUserLocation();


  var color = d3.scale.log()
    .domain([1, 2, 3, 4])
    .range(["red", "yellow", "aqua", "green"]);

    // 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(1200);
        xy.center([-40,30]);
        xy.precision(0);

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

    var path = d3.geo.path();

    d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT ST_Simplify(the_geom,0.01) as the_geom FROM live_map_views WHERE the_geom IS NOT NULL&format=geojson", function(collection) {
          svg.select("#first_layer")
            .selectAll("path")
              .data(collection.features)
            .enter().append("path")
            .attr("d", path.projection(xy));
      });

    var views;
    function startAnimation(){
      d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT the_geom, category FROM axh_user_locations WHERE the_geom IS NOT NULL ORDER BY created_at ASC&format=geojson", function(collection) {
          views = collection.features;
          console.log(views)
          if (views.length > 0)  replay();
        });
    }
    var i = 0;
    function replay() {
      var c = views[i];
      svg.append("circle")
          .attr("cx", xy(c.geometry.coordinates)[0])
          .attr("cy", xy(c.geometry.coordinates)[1])
          .attr("r", 1)
          .style("fill", color(c.properties.category))
          .style("fill-opacity", 0.5)
          .style("stroke", color(c.properties.category))
          .style("stroke-opacity", 0.5)
        .transition()
          .duration(2000)
          .ease(Math.sqrt)
          .attr("r", 20)
          .style("fill-opacity", 1e-6)
          .style("stroke-opacity", 1e-6)
          .remove()
        setTimeout(replay, 200);
      i++;
      if (views.length==i) i = 0;
    }

    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>Easy earthquakes</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:black;
	}
	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: white;
	stroke-width:0.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

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

	var first_layer = 'live_map_views';

	var pub = new cartodb.SQL({ user: 'staging20', format: 'json'});

	// credit: http://html5doctor.com/finding-your-position-with-geolocation/
	function detectUserLocation(){
	if (navigator.geolocation) {
	var timeoutVal = 10 * 1000 * 1000;
	navigator.geolocation.watchPosition(
	mapToPosition,
	alertError,
	{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
	);
	}
	else {
	alert("Geolocation is not supported by this browser");
	}

	function alertError(error) {
	var errors = {
	1: 'Permission denied',
	2: 'Position unavailable',
	3: 'Request timeout'
	};
	startAnimation();
	}
	}

	function mapToPosition(position){
	lon = position.coords.longitude;
	lat = position.coords.latitude;
	pub.execute("SELECT axh_public_function_314({{lon}},{{lat}},{{cat}}), {{ran}}", {lon: lon, lat: lat, cat: Math.floor(3.99*Math.random()) + 1, ran: Math.random()}).done(function(d){console.log(d)});
	console.log('up')
	startAnimation();
	}
	detectUserLocation();


	var color = d3.scale.log()
	.domain([1, 2, 3, 4])
	.range(["red", "yellow", "aqua", "green"]);

	// 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(1200);
	xy.center([-40,30]);
	xy.precision(0);

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

	var path = d3.geo.path();

	d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT ST_Simplify(the_geom,0.01) as the_geom FROM live_map_views WHERE the_geom IS NOT NULL&format=geojson", function(collection) {
	svg.select("#first_layer")
	.selectAll("path")
	.data(collection.features)
	.enter().append("path")
	.attr("d", path.projection(xy));
	});

	var views;
	function startAnimation(){
	d3.json("http://staging20.cartodb.com/api/v2/sql?q=SELECT the_geom, category FROM axh_user_locations WHERE the_geom IS NOT NULL ORDER BY created_at ASC&format=geojson", function(collection) {
	views = collection.features;
	console.log(views)
	if (views.length > 0) replay();
	});
	}
	var i = 0;
	function replay() {
	var c = views[i];
	svg.append("circle")
	.attr("cx", xy(c.geometry.coordinates)[0])
	.attr("cy", xy(c.geometry.coordinates)[1])
	.attr("r", 1)
	.style("fill", color(c.properties.category))
	.style("fill-opacity", 0.5)
	.style("stroke", color(c.properties.category))
	.style("stroke-opacity", 0.5)
	.transition()
	.duration(2000)
	.ease(Math.sqrt)
	.attr("r", 20)
	.style("fill-opacity", 1e-6)
	.style("stroke-opacity", 1e-6)
	.remove()
	setTimeout(replay, 200);
	i++;
	if (views.length==i) i = 0;
	}

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

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