title: using simpleheat.js for a geoheatmap with D3
body: <p>Trying to layer a geo-heatmap using simpleheat.js and D3.
  Working off an example (<a href="https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5" rel="nofollow noreferrer">https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5</a>). I am Successful at drawing the map  but not the points as heatmap. No error on console.log.
  I get one rainbow colored blob (I overdid the radius) on the upper left corner  next to the map.
  Could not find many examples and documentation on simpleheat is scant. Would appreciate any insight into this.
  Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #container svg, #container canvas {
      position: absolute;
      top: 0;
  }
      &lt;/style&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;D3 Map Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id= "container"&gt;
  
  &lt;/div&gt;
  
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/topojson.v2.min.js"&gt;&lt;/script&gt;
  &lt;script src = "node_modules/simpleheat/simpleheat.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   //Width and height
   var w = 960;
   var h = 600;
  div = d3.select("#container")
  mapLayer = div.append('svg')
          .attr("id","map")
          .attr("width",w)
          .attr("height",h)
  
  canvasLayer = div.append('canvas').attr('id', 'heatmap').attr('width', w).attr('height', h);
  
  var canvas = canvasLayer.node(),
      context = canvas.getContext("2d");
  
  
   //Define map projection
  var projection = d3.geoMercator()
       .center([ -120, 37 ])
       .translate([ w/2, h/2 ])
       .scale([ 2600 ]);
  
     //Define path generator
  var path = d3.geoPath()
      .projection(projection)
  var svg = d3.select("#container")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
  // read data in
  d3.queue()
  .defer(d3.json,"ca.json")
  .defer(d3.csv, "heatCAN.csv")
  .await(main)
  
  function main (err, ca, heatCAN) {
      console.log(heatCAN)
      mapLayer
          .append('svg')
          
          .selectAll("path")
          .data(ca.features)
          .enter()
          .append("path")
          .attr("d",path)
          .attr("stroke","#000000")
          .attr("fill","#ffffff")
       //add heatmap   
      simpleheat(canvas).data(heatCAN.map(x=&gt;[x.LON,x.LAT,x.cMort_90d])).radius(100,100).draw(0.05);
  
      
  }
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>