D3 Examples - Topojson Merged Feature Clustering

Topojson Merged Feature Clustering - d3.carto

Zoom in and zoom out to see dynamically clustered and merged features. Quadtree-based feature clustering in d3.carto.map that takes advantage of topojson's built-in merging functionality.

In contrast to feature clustering with GeoJSON features, which create multipolygons from the clustered features, topojson layers create merged polygons from clustered features.

This also demonstrates map.clusteringTolerance() which allows you to increase or decrease the degree of clustering.

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Quadtree-based Feature Clustering with TopoJSON Merging- 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").setScale(2).clusteringTolerance(1);
​
    regionLayer = d3.carto.layer.topojson();
    regionLayer
    .path("world.topojson")
    .label("Countries")
    .cssClass("country")
    .renderMode("svg")
    .on("recluster", recolorClusters)
    .specificFeature("countries")
    .cluster(true);
    
    map.addCartoLayer(regionLayer);
​
    map.refresh();
    
    function recolorClusters() {
        var clusterColor = d3.scale.category20b();
​
    regionLayer.clusterLayer().g()
    .selectAll("path")
    .style("fill", function(d,i) {return !d.properties.node.leaf ? clusterColor(i%19) : "lightgray"})
    .style("stroke", function(d,i) {return !d.properties.node.leaf ? "black" : "white"})
    .style("stroke-width", function(d,i) {return !d.properties.node.leaf ? "2px" : "1px"})
​
    d3.selectAll("g.marker").style("pointer-events", "none")
    }
​
  }
  
  
  
​
</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>
​
    