D3 Examples - markers.js and clustr

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>crime clusters</title>
<script
  src='https://mapbox-js.s3.amazonaws.com/mapbox.js/v0.5.5/mapbox.js'></script>
<script type='text/javascript'
    src='https://mapbox.com/clustr/dist/clustr.min.js'></script>
    <style>
        body { margin:0;font: 14px/20px 'Helvetica', 'Helvetica Neue'; background:#eee; }
        .map {
            width:479px;
            height:500px;
            border-right:1px solid #A63F74;
            float:left;
        }
    </style>
  </head>
  <body>
    <div class='map' id='map'></div>
    <div class='map' id='map-cluster'></div>
    <script type='text/javascript'>
      var ml, features;
      var map = new MM.Map('map', mapbox.layer().id('tmcw.map-bzuvyug3'));
      var map_cluster = new MM.Map('map-cluster', mapbox.layer().id('tmcw.map-bzuvyug3'));
​
      var radii = function(f) {
          return clustr.area_to_radius(Math.round(+f.properties.Burglary * 0.05));
      }
      // Add b to a
      var addPoints = function(a, b) {
          a.properties.Burglary += b.properties.Burglary;
          return a;
      }
​
reqwest({
    url: 'texas_crime.csv'
  , type: 'text'
  , success: function(resp) {
          crimes = mapbox.markers.csv_to_geojson(resp.response);
          features = crimes.map(function(f) {
              f.properties.Burglary = +f.properties.Burglary;
              return f;
          });
​
          map.addLayer(mapbox.markers.layer()
              .factory(clustr.scale_factory(radii))
              .features(features));
​
          map.extent(map.getLayerAt(1).extent());
​
          map_cluster.addLayer(mapbox.markers.layer()
              .factory(clustr.scale_factory(radii))
              .features(
                  clustr.merge_intersecting(features, radii, addPoints, map.zoom())));
​
          map_cluster.extent(map.getLayerAt(1).extent());
      }
});
    </script>
  </body>
</html>
    