Old school D3 from simpler times

All examples By author By category About

mostaphaRoudsari

Full window Github gist

Heatmap (Canvas + D3)

Reusable heatmap chart using Canvas for rendering and D3 for interactivity.

Here is a great read about combining D3 + Canvas: Learnings from a D3.js addict on starting with Canvas

Built with blockbuilder.org

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js