Skip to content

Instantly share code, notes, and snippets.

@ljbrown238
Created April 19, 2014 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ljbrown238/11096400 to your computer and use it in GitHub Desktop.
Save ljbrown238/11096400 to your computer and use it in GitHub Desktop.
Scale Color Matrix with HSL
{"description":"Scale Color Matrix with HSL","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/NhUM7Qz.png"}
svg = d3.select("svg");
// Create a random two dimensional matrix
var matrix = [];
var dim = 50;
for (i=0;i<dim;i++) {
matrix[i] = [];
for (j=0;j<dim;j++) {
matrix[i].push(Math.floor(Math.random() * 100));
}
}
/*
matrix = [
[1,2,3,4,5],
[10,20,30,40,90],
[1,2,3,4,5],
[1,2,3,4,5]
];
*/
// Create a color heatmap scale as an array where each row gets a colorScale of its own
// The reason is that each row needs to scale it's own data based on its min, mean, max, etc.
var colorScale = [];
for (i=0;i<matrix.length;i++) {
// Calc the stats so we map the min, mean, max colors correctly
var min = d3.min(matrix[i]);
var mean = d3.mean(matrix[i]);
var max = d3.max(matrix[i]);
var my_stddev = stddev(matrix[i]);
var sm1 = mean - 1*my_stddev;
var sm2 = mean - 2*my_stddev;
var sm3 = mean - 3*my_stddev;
var sp1 = mean + 1*my_stddev;
var sp2 = mean + 2*my_stddev;
var sp3 = mean + 3*my_stddev;
// We're going to map the colors from colod to hot
colorScale[i] = d3.scale.linear()
.domain([sm3,sm2,sm1,mean,sp1,sp2,sp3])
.interpolate(d3.interpolateHsl)
.range(["purple", "blue", "green", "white", "yellow", "red"]);
}
console.log(colorScale);
// Click on THESE numbers below to modify how the matrix looks
var margin_top = 53;
var margin_left = 56;
var rect_width = 5;
var rect_height = 5;
var gap_height = rect_height + 0;
var gap_width = rect_width + 0;
// Here is where to paint the matrix
svg.selectAll("recta")
.data(matrix)
.enter()
.append("g")
.attr("myrow", function(d,i) { return i;})
.attr("transform", function(d,i) {
return "translate(" + margin_left + "," + (i * gap_height) + ")";
})
.attr("myIndex",function(d,i) { return i;})
.selectAll("rectb")
.data(function(d, i) { return d; }) // d is matrix[i]
.enter()
.append("rect")
.attr("x",function(d,i) { return (i * (gap_width));})
.attr("y",margin_top)
.attr("width",rect_width)
.attr("height",rect_height)
.attr("mydata",function(d,i) { return d;})
.attr("fill", function(d,i) {
var index = this.parentNode.getAttribute("myIndex");
return colorScale[index](d);
});
function stddev(data) {
var deviation = new Array();
var sum = 0;
var devnsum = 0;
var stddevn = 0;
var len = data.length;
var nullcount = 0;
for (var i=0; i<len; i++) {
if (data[i] == null) { nullcount++; }
sum = sum + (data[i] * 1) // ensure number
}
len = len - nullcount; // We don't want to count the null entries!!!
var mean = (sum/len).toFixed(6); // 6 decimal places
for (i=0; i<len; i++) {
deviation[i] = data[i] - mean;
deviation[i] = deviation[i] * deviation[i];
devnsum = devnsum + deviation[i];
}
stddevn = Math.sqrt(devnsum/(len-1)).toFixed(6); // 6 decimal places
return stddevn;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment