title: Using d3 to create a density & value heatmap layer for leaflet
body: <p>I would like to implement a heatmap layer on top of a leaflet map with d3. I have around 2-3k datapoints.</p>
  
  <p>My data is of the following format:</p>
  
  <pre><code>[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...]
  </code></pre>
  
  <p>Ideally I would like to toggle between a heatmap based on the values, as well as based on the density of points. I also need to be able to update the data dynamically. Visually I was aiming for something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/5eG9h.jpg" alt="heatmap example"></p>
  
  <p>I know leaflet has a <a href="http://leafletjs.com/plugins.html" rel="noreferrer">couple of heatmap plugins</a>, neither of which seem very active. <a href="https://github.com/pa7/heatmap.js" rel="noreferrer">Heatmap.js</a> comes closest to what I need. However, it seems unmaintained, the docs are inconsistent with the source code and it runs far too slow. I already use d3 extensively and would prefer to use that for the heatmap layer if possible.</p>
  
  <p>There are one or two blocks floating around (e.g., <a href="http://bl.ocks.org/calvinmetcalf/5005347" rel="noreferrer">this one</a>) but I did not find one that worked. <a href="https://gist.github.com/tnightingale/4668062" rel="noreferrer">This comes closest</a> to what I need. It still works with the latest leaflet version but ideally I would like to use gradual gradients (as in heatmap.js) instead of hexbins. I would also need to rewrite the way the code handles data and tweak some other bits (e.g., it plots density, not values).</p>
  
  <p>Ideally I was hoping for a solution in the style of <a href="http://bost.ocks.org/mike/leaflet/" rel="noreferrer">Mikes leaflet example</a>. Any suggestions?</p>
  
  <p>Update: I also <a href="http://jsfiddle.net/jAf7g/17/" rel="noreferrer">found this leaflet wrapper</a> for webgl-heatmap but it seems broken </p>