block by mpmckenna8 23751a2094c7db90575a

Bike theft d3.carto.map() hex binning copy

Full Screen

Copying and changing a little an example of Automatic hexbinning in d3.carto.map allows for the creation of granular or high resolution heatmaps.

The map.createHexbinLayer function takes two variable: a point d3.carto.layer (either CSV or XY Array) and a resolution (in degrees). It creates a feature carto layer that automatically bins the points in the source layer and which you can then add to the map easily.

In this example, I generate two different hexbin resolutions: One at 2-degree and one at .75 degree, so that you can see how simple it is. The original point objects are found in the properties.node attribute of each hex feature and can be used to count the number or average the population, etc.

This requires a slightly modified hexbin.js (also in this gist) to work.

This example has some data pulled from the SF data portal in particular, it’s getting a csv of bike thefts from the SFPD incident data from the past three months.

index.html

d3map.css

hexbin.js