Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment