Repositioning clustered points in d3.carto.map.
d3.carto uses quadtrees to perform grid-based clustering of points. One drawback of grid-based clustering as seen in the basic and complex clustering examples is that it produces regular rows and columns of clustered points, which can be jarring to map readers, especially when the regularized point is located in the sea when the dataset is entirely on land.
In this example, medium-sized cities (between 50k and 1m population) are clustered using the built-in clustering behavior, but the points are adjusted after each “recluster” event so that they are placed on the location of the largest city (population-wise) is located. This is accomplished by accessing the d3.carto.map.projection() and using it to adjust the “transform” attribute of the g.pointG container that determines the position of each point. It might do to make this semi-automated, but it’s a hard thing to plan for, because you might want to use some kind of administrative rank (local, prefectural and national capitals) or other mechanism to determine the “anchor” point. In other cases, where there is no obvious such point, you might want to pick the point nearest the center or use some other mechanism.
As a result of this repoisitioning, the clustered sites are irregular, semantically interesting and never placed on non-sensical terrain.
Which is good.