D3 Examples - VTIrene

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html>
<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css' rel='stylesheet' />
  <title>VTIrene recap</title>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
#sidebar {
  position:absolute;
  top:0px;
  left:0px;
  background:#fff;
  z-index:999;
  overflow:auto;
  opacity:0.6;
  }
#sidebar:hover { opacity:1; }
#timeline {
  padding:10px;
  }
#timeline a {
  font-size:18px;
  text-decoration:none;
  }
#timeline #controls {
  position:absolute;
  top:15px;
  right:15px;
  }
#timeline #controls a {
  font-size:20px;
  color:#DC1438;
  margin-left:10px;
  }
a.year-active {
  color:#DC1438;
  }
</style>
​
<div id='sidebar'>
  <div id='timeline'>
      <div id='controls'></div>
    <h2>Reaction to Tropical Storm Irene in VT<br/><small>These alerts and updates were originally posted to <a href="https://vtresponse.wordpress.com/" target="_blank">VTResponse </a>and to <a href="https://vtirene.crowdmap.com/" target="_blank">the VTIrene crowdmap</a></small></h2>
  </div>
</div>
<div id='map'></div>
​
<script>
  var m = mapbox.map('map');
  m.addLayer(mapbox.layer().id('landplanner.map-03z9npg9'));
​
  var timeline = document.getElementById('timeline'),
      controls = document.getElementById('controls');
​
  var markerLayer = mapbox.markers.layer()
      // this is a quick optimization - otherwise all markers are briefly displayed
      // before filtering to 2001
      .filter(function() { return false })
      .url('https://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20vtirene_082212%20&format=geojson&foo=geojsonp', function(err, features) {
​
      // A closure for clicking years. You give it a year, and it returns a function
      // that, when run, clicks that year. It's this way in order to be used as both an
      // event handler and run manually.
      function click_year(y) {
          return function() {
              var active = document.getElementsByClassName('year-active');
              if (active.length) active[0].className = '';
              document.getElementById('y' + y).className = 'year-active';
              markerLayer.filter(function(f) {
                  return f.properties.incident_date == y;
              });
              return false;
          };
      }
​
      var years = {},
          yearlist = [],
          year_links = [];
​
      for (var i = 0; i < features.length; i++) {
          years[features[i].properties.incident_date] = true;
      }
​
      for (var y in years) yearlist.push(y);
      yearlist.sort();
​
      for (var i = 0; i < yearlist.length; i++) {
          var a = timeline.appendChild(document.createElement('a'));
          a.innerHTML = yearlist[i] + ' ';
          a.id = 'y' + yearlist[i];
          a.href = '#';
          a.onclick = click_year(yearlist[i]);
      }
​
      var stop = controls.appendChild(document.createElement('a')),
            play = controls.appendChild(document.createElement('a')),
            playStep;
​
      stop.innerHTML = 'STOP []';
      play.innerHTML = 'PLAY -->';
​
      play.onclick = function() {
          var step = 0;
          playStep = window.setInterval(function() {
              if (step < yearlist.length) {
                  click_year(yearlist[step])();
                  step++;
              } else {
                  window.clearInterval(playStep);
              }
          }, 250);
      };
​
      stop.onclick = function() {
          window.clearInterval(playStep);
      };
​
      click_year('2011-08-29')();
  });
​
  m.addLayer(markerLayer);
  m.zoom(8).center({ lat: 44.11914151643737, lon: -72.79541015625 });
</script>
</body>
</html>
​
    