Heatmap

<!DOCTYPE html>
<meta charset="utf-8">
<head>
 
</head>
<style>
.q0-11 {fill: rgb(215, 48, 39);}
.q1-11 {fill: rgb(244, 109, 67);}
.q2-11 {fill: rgb(253, 174, 97);}
.q3-11 {fill: rgb(254, 224, 144);}
.q4-11 {fill: rgb(255, 255, 191);}
.q5-11 {fill: rgb(224, 243, 248);}
.q6-11 {fill: rgb(171, 217, 233);}
.q7-11 {fill: rgb(116, 173, 209);}
.q8-11 {fill: rgb(69, 117, 180);}
   
 
</style>
<body>  
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
<div id="chart"></div>
<script>
var dataset = [ { "2003": "1", "2004": "1", "2005": "1", "2006": "1", "2007": "1", "2008": "1", "2009": "1", "Country Name": "USA" },
{ "2003": "2", "2004": "2", "2005": "2", "2006": "2", "2007": "3", "2008": "4", "2009": "6", "Country Name": "Canada" },
{ "2003": "3", "2004": "3", "2005": "3", "2006": "3", "2007": "2", "2008": "3", "2009": "3", "Country Name": "Italy" },
{ "2003": "4", "2004": "4", "2005": "4", "2006": "4", "2007": "4", "2008": "2", "2009": "2", "Country Name": "France" },
{ "2003": "5", "2004": "6", "2005": "6", "2006": "6", "2007": "6", "2008": "6", "2009": "7", "Country Name": "Ireland" },
{ "2003": "6", "2004": "5", "2005": "5", "2006": "5", "2007": "5", "2008": "5", "2009": "4", "Country Name": "Germany" }];
 
var width=220, height=190;
 
var years = d3.keys(dataset[0]).filter(function(key) {
    return key != "Country Name";
  });
 
var names =  []
for (var i=0; i<dataset.length; i++) {
    names.push(dataset[i]["Country Name"])
}
 
for(var i= 0; i<dataset.length; i++) {
  dataset[i].id = i;
}
 
var yScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, height], 0.05);
 
var xScale = d3.scale.ordinal()
  .domain(d3.range(years.length))
  .rangeRoundBands([0, width], 0.05);
  
var color = d3.scale.quantize()
    .domain([0, 6])
    .range(d3.range(9).map(function(d) { return "q" + d + "-11"; }));  
  
function randomData(gridWidth, gridHeight, square) {
var newdata = new Array()  
    var gridItemWidth = 200 / years.length;
    var gridItemHeight = (square) ? gridItemWidth : 800 / dataset.length;
    var startX = gridItemWidth / 2;
    var startY = gridItemHeight / 2;
    var stepX = gridItemWidth;
    var stepY = gridItemHeight;
    var xpos = startX;
    var ypos = startY;
    var newValue = 0;
    var count = 0;
for (var index_a = 0; index_a < years.length; index_a++) {
    newdata.push(new Array());
    for (var index_b = 0; index_b < dataset.length; index_b++) {
            newdata[index_a].push({ 
                    row: index_b,
                    column: index_a,
                    value: dataset[index_b][2003+index_a],
                    width: gridItemWidth,
                    height: gridItemHeight,
                    x: xScale(index_a),
                    y: yScale(index_b),
                    count: count,
                    year: years[index_a],
                    id_txt: dataset[index_b]["Country Name"],
                    id_num: dataset[index_b].id
                            });
            ypos += stepY;
            count += 1;
        }
        ypos = startY;
        xpos += stepX;
    }
return newdata;
}
var testdata;
function gendata(id, width, height, square)
{
    var mapData = randomData(width, height, square);
    testdata=mapData;
    console.log(mapData);
    var grid = d3.select(id).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .attr("class", "chart");
 
    var col = grid.selectAll(".column")
                  .data(mapData)
                .enter().append("svg:g")
                  .attr("class", "column");
 
    var row = col.selectAll(".cell")
                 .data(function (d) { return d; })
                .enter().append("svg:rect")
                 .attr("class", function (d) { return "cell id" +d.id_num +" " + color(d.value);})
                 .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .attr("width", function(d) { return d.width; })
                 .attr("height", function(d) { return d.height; })
                 .on('mouseover', function() {
                    d3.select(this)
                        .style('fill', 'white');
                 })
                 .on('mouseout', function() {
                    d3.select(this)
                        .style('fill', '');
                 })
                 .on('click', function() {
                    console.log(d3.select(this));
                 })
            
                 .style("stroke", '#555');
    var text = col.selectAll(".label")
        .data(function(d) {return d;})
      .enter().append("svg:text")
        .attr("x", function(d) { return d.x + d.width/2 })
        .attr("y", function(d) { return d.y + d.height/2 })
        .attr("text-anchor","middle")
        .attr("dy",".35em")
        .text(function(d) { return d.value });
}
 
gendata('#chart', width, height, true);
 
    
</script>
</body>

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

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