umcrcooke/index.html

## index.html
<!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="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://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>