D3 Examples - Interesting Storms from the Darksky API

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>markers.js: simple markers for Modest Maps</title>
  <script type='text/javascript'
    src='https://mapbox.com/markers.js/dist/markers.min.js'></script>
  <script type='text/javascript'
    src='https://mapbox.com/markers.js/dist/markers.externals.js'></script>
  <link href='https://mapbox.com/markers.js/dist/markers.css'
    rel='stylesheet' type='text/css' />
    <style>
        body { font: 14px/20px 'Helvetica', 'Helvetica Neue'; background:#eee; }
        #map {
            position:absolute;
            top:0;
            left:0;
            width:960px;
            height:500px;
        }
.simplestyle-marker { transform:rotate(180); }
    </style>
  </head>
  <body>
    <div class='map' id='map'>
    </div>
    <script type='text/javascript'>
      wax.tilejson('https://a.tiles.mapbox.com/v3/tmcw.map-bzuvyug3.jsonp',
        function(tj) {
          var m = new MM.Map('map', new wax.mm.connector(tj));
​
          wax.tilejson('https://darksky-proxy.herokuapp.com/interesting/', function(features) {
              storms = features.storms.map(function(f) {
                  var gj = {
                      properties: { title: f.city, description: '<a href="https://forecast.weather.gov/MapClick.php?lat=' + f.latitude + '&lon=' + f.longitude + '&site=okx&unit=0&lg=en&FcstType=text">on noaa</a>', 'marker-color': '#3D5982', 'marker-size': 'small' },
                      geometry: { coordinates: [ f.longitude, f.latitude ] } };
                  return gj;
              });
              var ml = mapbox.markers.layer()
                  .features(storms);
              m.addLayer(ml);
              m.extent(ml.extent());
              mapbox.markers.interaction(ml);
          });
        });
    </script>
  </body>
</html>
    