title: d3.js Marker Clustering
body: <p>I am using an orthographic zoom-able and rotatable globe similar to this: <a href="https://www.jasondavies.com/maps/rotate/" rel="nofollow noreferrer">https://www.jasondavies.com/maps/rotate/</a>. I need to plot around 20,000 points. Is there a way to cluster markers similar to the way you can using Leaflet? </p>
  
  <p>My current globe uses SVG where each point is a "path" element with a "d" value.</p>
  
  <p>Leaflet example: <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/" rel="nofollow noreferrer">https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Leaflet Markercluster&lt;/title&gt;
  &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
  &lt;script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' /&gt;
  &lt;style&gt;
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' /&gt;
  &lt;link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' /&gt;
  
  &lt;!-- Example data. --&gt;
  &lt;script src="/mapbox.js/assets/data/realworld.388.js"&gt;&lt;/script&gt;
  
  &lt;div id='map'&gt;&lt;/div&gt;
  
  &lt;script&gt;
  L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg';
      var map = L.mapbox.map('map')
          .setView([-37.82, 175.215], 14)
          .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
  
      var markers = new L.MarkerClusterGroup();
  
      for (var i = 0; i &lt; addressPoints.length; i++) {
          var a = addressPoints[i];
          var title = a[2];
          var marker = L.marker(new L.LatLng(a[0], a[1]), {
              icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
              title: title
          });
          marker.bindPopup(title);
          markers.addLayer(marker);
      }
  
      map.addLayer(markers);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>