Feature Clustering - d3.carto

Quadtree-based feature clustering in d3.carto.map.

This is an early example of how using the quadtrees generated with each layer could also be used with feature layers. This allows you to dynamically aggregate features based on zoom. Polygons are colored by their shared grouping at different zoom levels. This version uses centroids--the final version will likely either use bounding box solely or give the option for both.

This also uses a custom formatter for the infoboxes to give you the name of an unclustered feature and the number of features in a clustered region.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Quadtree-based Feature Clustering - d3.carto</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .country {
    stroke: white;
  }
  
  .clustered {
    stroke: red;
    fill: orange;
  }
  
</style>
<script>

function makeSomeMaps() {
    pathSource = 0;

map = d3.carto.map();

d3.select("#map").call(map);

map.centerOn([-88,39],"latlong");
    map.setScale(2);

clusterModal = d3.carto.modal();
    clusterModal.formatter(clusterFormatter);

regionLayer = d3.carto.layer.geojson();
    regionLayer
    .path("world.geojson")
    .label("Countries")
    .cssClass("country")
    .renderMode("svg")
    .on("recluster", recolorClusters)
    .cluster(true);
    
    map.addCartoLayer(regionLayer);

map.refresh();
    
    function recolorClusters() {

regionLayer.clusterLayer()
    .clickableFeatures(true)
    .modal(clusterModal);

</script>
<body onload="makeSomeMaps()">
<div id="map">
</div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js