stuartlynn/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html,body, #map{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #title{
        position:absolute;
        left:5%;
        top:10%;
        z-index:2;
        color:grey;
      }
    </style>
  </head>
  <body>

    <div id='title'>
      <h1>Hurricane Katrina</h1>
      <h3>NEXRad</h3>
    </div>

    <div id="map"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script type="text/javascript" charset="utf-8">

      var css  = "#katrina{\
          polygon-fill: transparent;\
          polygon-opacity: 0.8;\
          line-color: #FFF;\
          line-width: 0;\
          line-opacity: 1;\
        }\
        #katrina [ value <= 59.5] {\
          polygon-fill: #B10026;\
        }\
        #katrina [ value <= 52] {\
          polygon-fill: #E31A1C;\
        }\
        #katrina [ value <= 46] {\
          polygon-fill: #FC4E2A;\
        }\
        #katrina [ value <= 39.5] {\
          polygon-fill: #FD8D3C;\
        }\
        #katrina [ value <= 33.5] {\
          polygon-fill: #FEB24C;\
        }\
        #katrina [ value <= 27] {\
          polygon-fill: #FED976;\
        }\
        #katrina [ value <= 21] {\
          polygon-fill: #FFFFB2;\
        }"

      window.onload = function() {
        var sql = new cartodb.SQL({ user: 'stuartlynn' });

	console.log("LOADED")
        sql.execute("SELECT distinct(sweeptime) FROM stuartlynn.katrina order by sweeptime").done(function(data) {

	  console.log('DATA IS DATA ', data)
          var map = new L.Map('map', {
            zoomControl: false,
            center: [43, 0],
            zoom: 3
          });
          map.fitBounds([ [31.147006308556566, -76.86035156249999],[28.168875180063345,-107.16064453125]])

          L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
          }).addTo(map);

          var times = data.rows.map(function(d){return d.sweeptime})
          console.log(times, data )
          var duration = 30;
          var frameCount = times.length
          var perFrame = duration*1.0/frameCount
          var frameNo = 0;
          var layers = []

          times.forEach(function(time,index){
            cartodb.createLayer(map, {
              user_name: 'stuartlynn',
              type: 'cartodb',
              sublayers: [{
                sql: "SELECT * FROM stuartlynn.katrina where sweeptime='"+time+"'",
                cartocss: css
              }]
            })
            .addTo(map)
            .done(function(layer){
              layers.push(layer)
              if (index >0){
                layer.setOpacity(0);
              }
            }) // add the layer to our map which already contains 1 sublayer
          });

          setInterval(function(){
            layers[frameNo].setOpacity(0)
            frameNo+=1;
            frameNo = frameNo%frameCount
            layers[frameNo].setOpacity(1)
          },perFrame*100)

        })
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>

	<!-- Bootstrap -->
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

	<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style>
	html,body, #map{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	}
	#title{
	position:absolute;
	left:5%;
	top:10%;
	z-index:2;
	color:grey;
	}
	</style>
	</head>
	<body>

	<div id='title'>
	<h1>Hurricane Katrina</h1>
	<h3>NEXRad</h3>
	</div>

	<div id="map"></div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<script type="text/javascript" charset="utf-8">

	var css = "#katrina{\
	polygon-fill: transparent;\
	polygon-opacity: 0.8;\
	line-color: #FFF;\
	line-width: 0;\
	line-opacity: 1;\
	}\
	#katrina [ value <= 59.5] {\
	polygon-fill: #B10026;\
	}\
	#katrina [ value <= 52] {\
	polygon-fill: #E31A1C;\
	}\
	#katrina [ value <= 46] {\
	polygon-fill: #FC4E2A;\
	}\
	#katrina [ value <= 39.5] {\
	polygon-fill: #FD8D3C;\
	}\
	#katrina [ value <= 33.5] {\
	polygon-fill: #FEB24C;\
	}\
	#katrina [ value <= 27] {\
	polygon-fill: #FED976;\
	}\
	#katrina [ value <= 21] {\
	polygon-fill: #FFFFB2;\
	}"

	window.onload = function() {
	var sql = new cartodb.SQL({ user: 'stuartlynn' });

	console.log("LOADED")
	sql.execute("SELECT distinct(sweeptime) FROM stuartlynn.katrina order by sweeptime").done(function(data) {

	console.log('DATA IS DATA ', data)
	var map = new L.Map('map', {
	zoomControl: false,
	center: [43, 0],
	zoom: 3
	});
	map.fitBounds([ [31.147006308556566, -76.86035156249999],[28.168875180063345,-107.16064453125]])

	L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	var times = data.rows.map(function(d){return d.sweeptime})
	console.log(times, data )
	var duration = 30;
	var frameCount = times.length
	var perFrame = duration*1.0/frameCount
	var frameNo = 0;
	var layers = []

	times.forEach(function(time,index){
	cartodb.createLayer(map, {
	user_name: 'stuartlynn',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT * FROM stuartlynn.katrina where sweeptime='"+time+"'",
	cartocss: css
	}]
	})
	.addTo(map)
	.done(function(layer){
	layers.push(layer)
	if (index >0){
	layer.setOpacity(0);
	}
	}) // add the layer to our map which already contains 1 sublayer
	});

	setInterval(function(){
	layers[frameNo].setOpacity(0)
	frameNo+=1;
	frameNo = frameNo%frameCount
	layers[frameNo].setOpacity(1)
	},perFrame*100)

	})
	}
	</script>
	</body>
	</html>