Using d3 to create a layer of density and cost for flyers

Question

I would like to implement a heat map layer on top of the booklet map with d3. I have about 2-3 thousand points.

My data has the following format:

[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...] 

Ideally, I would like to switch between thermal insulation based on values, as well as based on point density. I should also be able to dynamically update the data. Visually, I was aiming for something like this:

I know that there are a couple of plugin plugins in the flyer, none of which seem very active. Heatmap.js comes closest to what I need. However, it seems that it is not supported, the documents are incompatible with the source code, and it works too slowly. I already use d3 extensively and prefer to use this for a heat map layer, if possible.

There are one or two blocks floating around (like this one ), but I did not find what worked. This is closest to what I need. It still works with the latest version of the booklet, but ideally I would like to use gradual gradients (as in heatmap.js) instead of hexbins. I will also need to rewrite the way data is processed with data and the settings of some other bits (for example, it displays density, not values).

Ideally, I was hoping for a solution in the style of Example Listing Mike . Any suggestions?

Update: I also found this leaflet wrapper for webgl-heatmap but it seems broken

Answer 1

If you are concerned about the performance of the heatmap , I would recommend you two options: Leaflet.heat and Google Maps JS API v3 .

I recently worked with Leaflet PCBs and, having tried a few like you, I ended up with Leaflet.heat . The only reason for giving up on Google is the license, but it really works well.

This is an example from a demo page with 10k dots:

This is done by the same Leaflet author, and even if it is still alpha / beta, it is pretty stable on my tests. It is not mentioned in the official sheet plugins page , and it took me a while to find it.

It is based on simpleheat , and it creates an HTML5 canvas on top of the Flyer to draw a heat map: so that means that it will only work with IE9 +.

Very quickly, even draw 1 to each frame from my tests.

The data format is an array of lat, long and a value similar to the following:

 [[lat, lon, value], [...], [...], ... ] 

You can specify your own gradient by passing it as an option when creating - it's a little strange that the keys are actually values, but it works - be careful with 0 :

 { ..., gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'} } 

If you are looking for a more hexagonal shape instead, it was this morning I found this on bl.ocks.org : there is a hexbin plugin for d3 , which you can try to use in case.

Integration with Leaflet should not be so bad: after creating a layer on it, you can place your hexagons and fill them as a heat map (for example, in this example )

Answer 2

Another option (leaflets): webgl-heatmap-leaflet , which allows you to scale up to hundreds of thousands of data points thanks to WebGL!

Answer 3

I know this question is pretty old, but I was looking for the same question and came across several things:

It looks like a good tutorial: http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps

Here is a link to the tnightingales code (which you specified), but as a working block: http://bl.ocks.org/tnightingale/4668062

Here is an example of a dynamic hexbin from Bostock: http://bl.ocks.org/mbostock/7833311

And finally, here is an example from Bostok, using both size and color as dynamic variables: http://bl.ocks.org/mbostock/4330486

I hope this helps someone to look at the same questions.