D3 Examples - Loading features from google docs and supporting filtering

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:699px;
            border-right:1px solid #000;
            height:500px;
        }
        #options {
            position:absolute;
            top:0;
            padding:10px;
            left:700px;
        }
    </style>
  </head>
  <body>
    <div class='map' id='map'></div>
    <div id='options'></div>
    <script type='text/javascript' src='google_docs.js'></script>
    <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));
​
          mmg_google_docs('0ApRKQU2Gi7CrdHBObkhYTEdLUGxvZjF3bXo3REppU0E', function(features) {
              var types = {};
              types.All = true;
              features = features.map(function(f) {
                  f.properties.title = f.properties.occupation,
                  f.properties.description = f.properties.incidenttype
                  types[f.properties.incidenttype] = true;
                  return f;
              });
              var ml = mapbox.markers.layer()
                  .features(features);
              m.addLayer(ml);
              m.extent(ml.extent());
              mapbox.markers.interaction(ml);
​
              for (var type in types) {
                 var input = document.getElementById('options').appendChild(document.createElement('input'));
                 input.type = 'radio';
                 input.value = type;
                 input.id = type;
                 input.name = 'group';
                 input.onchange = function() {
                     var that = this;
                     ml.filter(function(f) {
                       return (that.value === 'All') ? true : f.properties.incidenttype == that.value;
                     });
                 }
                 var label = document.getElementById('options').appendChild(document.createElement('label'));
                  label.innerHTML = type;
                  label.setAttribute('for', type);
                 document.getElementById('options').appendChild(document.createElement('br'));
              }
          });
        });
    </script>
  </body>
</html>
    