D3 Examples - example 1

xxxxxxxxxx
 
<!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 id="heatmapContainerWrapper">  
      <div id="heatmapContainer">
​
     </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 }
            ]
​
​
​
      window.onload = function() {
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer')
        });
        window.h = heatmap;
        h.setData({ 
            max: 7, 
            data: mydata 
        })
      
      };
​
​
​
​
    </script>
  
  
​
  </body>
</html>
    