D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tmcw
Full window
Github gist
markers.js and clustr
<!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>