example 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <title>Example 1</title>
    
    <style>
      body, html { margin:0; padding:0; }
      #heatmapContainerWrapper { width:800px; height:500px; margin:auto; background:rgba(0,0,0,.1); }
      #heatmapContainer { width:100%; height:100%;}
    </style>
    
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="heatmap.min.js"></script>
  </head>
  <body>

<h1>Example 1</h1>

</div>
    </div>
 <script>

var holder = d3.select("div")
      .append("svg")           // append an SVG element to the div
      .attr("width", 1200)      
      .attr("height", 600);

// draw a rectangle - pitch
holder.append("rect")        // attach a rectangle
    .attr("x", 0)         // position the left of the rectangle
    .attr("y", 0)          // position the top of the rectangle
    .attr("height", 500)    // set the height
    .attr("width", 1000)    // set the width
    .style("stroke-width", 5)    // set the stroke width
    .style("stroke", "#001400")    // set the line colour
    .style("fill", "#80B280");    // set the fill colour

var mydata = [
            { x: 40, y: 111, value: 5 }, 
            { x: 70, y: 77, value: 5 }, 
            { x: 33, y: 35, value: 3 }, 
            { x: 40, y: 213, value: 2 }, 
            { x: 56, y: 14, value: 7 }, 
            { x: 401, y: 313, value: 2 }, 
            { x: 226, y: 214, value: 4 }, 
            { x: 111, y: 162, value: 6 }, 
            { x: 80, y: 70, value: 5 }
            ]

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js