D3 Examples - Heatmap (Canvas + D3)

xxxxxxxxxx
 
<!DOCTYPE html>
​
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author: Mostapha Roudsari" content="">
​
    <title>Heat Map</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="heatmap.js"></script>
​
<style>
    body {
       font-family: sans-serif;
       font-size: 12px;
     }
​
    .axis text {
        font: 10px sans-serif;
      }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
</style>
​
</head>
​
<body>
    <div id="chart" style="width:100%; padding:10%"></div>
​
<script>
   
  var chart = heatmap()
    .width(1200)
    .height(360)
    .x(function(d) { return d.dt; }) // dates
    .y(function(d) { return +d.hour; }) // usually hours [1-24]
    .z(function(d) { return +d.totrad; }) // value for coloring;
    
  d3.csv("weatherdata.csv", function(error, data){
    
    data.forEach(function(d){
        // create date for each data point
        // hours are all set to 0
        d.dt = new Date(+2015, +d.month-1, +d.day);
    });
​
    d3.select('#chart')
        .datum(data)
        .call(chart);
​
  });
 
// TODO: Add Brush
// TODO: Add conditional statement
</script>
</body>
​
</html>
    