How can I create a hexbin layer using the SQL and CartoCSS parameters in cartodb.js?

Question

CartoDB has a great hexbin visualization wizard baked into the client dashboard:

However, I like using cartodb.js to customize events and interactions; in particular, I'd like to make styles dependent on map zoom level. Recognizing that the hexbin visualization is a combination of SQL and CartoCSS parameter configuration, what are the ideal functions to pass to CartoDB to return hexes with cartodb.js?

Answer 1

Okay, maybe a bit ugly but I put a lot of functionality in here

http://bl.ocks.org/andrewxhill/9003528

It includes

• create an initial layer on the fly
• a hover to the layer
• after timeout, changing the size of the density grid
• recalculating a style to go along with the new size

I think it will get you pretty far. Note, you could make the style calculation before any createLayer event, and you would be able to then apply the initial style without ever knowing it.

One key thing to notice is that the tiler uses !pixel_width!,!pixel_height! whereas the SQL API needs to use, CDB_XYZ_Resolution(some zoom)

Answer 2

CartoDB documentation for advanced concepts includes a function CDB_HexagonGrid that could be useful for you, you have some example of use on the wiki of their github account

There is actually an example of a grid regenerated for each zoom level that may also help.