Heat map: Difference between revisions

From JSXGraph Wiki
(Created page with "<jsxgraph width="600" height="600"> // Given is a 2D data array of size (len x len) containing integer values // from 0 to (bins-1). var len = 30; var bins = 5; // Here, we jus...")
 
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 2: Line 2:
// Given is a 2D data array of size (len x len) containing integer values  
// Given is a 2D data array of size (len x len) containing integer values  
// from 0 to (bins-1).  
// from 0 to (bins-1).  
var len = 30;
var len = 20;
var bins = 5;
var bins = 10;
// Here, we just create random values.
// Here, we just create random values.
var xyArr = [];
var xyArr = [];
Line 13: Line 13:
}
}
}
}
// Now, xyArr is a 2D array containing the random integer values.


var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-0.5,len+0.5, len+0.5, 0.5],  
// Now, xyArr is a 2D array containing the random integer values and we can start
// creating the heat map.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-0.5,len+0.5+2, len+0.5, 0.5],  
keepaspectratio:false, showNavigation:true});
keepaspectratio:false, showNavigation:true});
var slideMin = brd.create('slider', [[1,20], [10,20], [0,0,bins]], {name:'min'});
var slideMax = brd.create('slider', [[1,21], [10,21], [0,bins,bins]], {name:'max'});


// spot() creates a quadratic single filled curve centered around (x,y).  
// spot() creates a quadratic single filled curve centered around (x,y).  
var spot = function(board, y, x, v, maxVal) {
var spot = function(board, y, x, v, maxVal) {
var c = JXG.hsv2rgb(270.0-v*270.0/maxVal, 0.8, 1.0);  
var colFunc = function() {
return board.create('curve',  
            var c;
            // Gray out small and large values.
            if (v<slideMin.Value()) {
                c = '#aaaaaa';
            } else if (v>slideMax.Value()) {
                c = '#cccccc';
            } else {
                //c = JXG.hsv2rgb(270.0-v*270.0/maxVal, 0.8, 1.0);  
                c = JXG.hsv2rgb(0.0, v/maxVal, 1.0);
            }
            return c;
        };
 
var cu = board.create('curve',  
[[x-0.5, x+0.5, x+0.5, x-0.5, x-0.5],
[[x-0.5, x+0.5, x+0.5, x-0.5, x-0.5],
[y-0.5, y-0.5, y+0.5, y+0.5, y-0.5]],
[y-0.5, y-0.5, y+0.5, y+0.5, y-0.5]],
{strokeWidth:0, fillColor:c, highlightFillColor:c, highlightFillOpacity:0.8});
{strokeWidth:0, fillColor:colFunc, highlightFillColor:colFunc, highlightFillOpacity:0.8});
 
        // Turn off highlighting to increase efficiency.
        cu.hasPoint = function() { return false;};
        return cu;
};
};


Line 43: Line 64:
createHeatMap(brd, xyArr, len, len, bins);
createHeatMap(brd, xyArr, len, len, bins);
</jsxgraph>
</jsxgraph>
=== The underlying JavaScript code ===
<source lang="javascript">
// Given is a 2D data array of size (len x len) containing integer values
// from 0 to (bins-1).
var len = 20;
var bins = 10;
// Here, we just create random values.
var xyArr = [];
var i, j;
for (i=0; i<len; i++) {
xyArr[i] = [];
for (j=0; j<len; j++) {
xyArr[i][j] = Math.round(Math.random()*(bins-1));
}
}
// Now, xyArr is a 2D array containing the random integer values and we can start
// creating the heat map.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-0.5,len+0.5+2, len+0.5, 0.5],
keepaspectratio:false, showNavigation:true});
var slideMin = brd.create('slider', [[1,20], [10,20], [0,0,bins]], {name:'min'});
var slideMax = brd.create('slider', [[1,21], [10,21], [0,bins,bins]], {name:'max'});
// spot() creates a quadratic single filled curve centered around (x,y).
var spot = function(board, y, x, v, maxVal) {
var colFunc = function() {
            var c;
            // Gray out small and large values.
            if (v<slideMin.Value()) {
                c = '#aaaaaa';
            } else if (v>slideMax.Value()) {
                c = '#cccccc';
            } else {
                //c = JXG.hsv2rgb(270.0-v*270.0/maxVal, 0.8, 1.0);
                c = JXG.hsv2rgb(0.0, v/maxVal, 1.0);
            }
            return c;
        };
var cu = board.create('curve',
[[x-0.5, x+0.5, x+0.5, x-0.5, x-0.5],
[y-0.5, y-0.5, y+0.5, y+0.5, y-0.5]],
{strokeWidth:0, fillColor:colFunc, highlightFillColor:colFunc, highlightFillOpacity:0.8});
        // Turn off highlighting to increase efficiency.
        cu.hasPoint = function() { return false;};
        return cu;
};
var createHeatMap = function(board, arr2D, xlen, ylen, bins) {
            var i, j, heat = [];
           
            board.suspendUpdate();
            for (i=0; i<ylen; i++) {
        heat[i] = [];
        for (j=0; j<xlen; j++) {
    heat[i][j] = spot(board, i, j, xyArr[i][j], bins-1);
        }
            }
            board.unsuspendUpdate();
            return heat;
        };
createHeatMap(brd, xyArr, len, len, bins);
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Charts]]

Latest revision as of 12:08, 8 March 2012

The underlying JavaScript code

// Given is a 2D data array of size (len x len) containing integer values 
// from 0 to (bins-1). 
var len = 20;
var bins = 10;
// Here, we just create random values.
var xyArr = [];
var i, j;
for (i=0; i<len; i++) {	
	xyArr[i] = [];
	for (j=0; j<len; j++) {	
		xyArr[i][j] = Math.round(Math.random()*(bins-1));
	}
}

// Now, xyArr is a 2D array containing the random integer values and we can start
// creating the heat map.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-0.5,len+0.5+2, len+0.5, 0.5], 
	keepaspectratio:false, showNavigation:true});

var slideMin = brd.create('slider', [[1,20], [10,20], [0,0,bins]], {name:'min'});
var slideMax = brd.create('slider', [[1,21], [10,21], [0,bins,bins]], {name:'max'});

// spot() creates a quadratic single filled curve centered around (x,y). 
var spot = function(board, y, x, v, maxVal) {
	var colFunc = function() {
            var c;
            // Gray out small and large values.
            if (v<slideMin.Value()) {
                c = '#aaaaaa';
            } else if (v>slideMax.Value()) {
                c = '#cccccc';
            } else {
                //c = JXG.hsv2rgb(270.0-v*270.0/maxVal, 0.8, 1.0); 
                c = JXG.hsv2rgb(0.0, v/maxVal, 1.0); 
            }
            return c;
        };

	var cu = board.create('curve', 
		[[x-0.5, x+0.5, x+0.5, x-0.5, x-0.5],
		 [y-0.5, y-0.5, y+0.5, y+0.5, y-0.5]],
		{strokeWidth:0, fillColor:colFunc, highlightFillColor:colFunc, highlightFillOpacity:0.8});

        // Turn off highlighting to increase efficiency.
        cu.hasPoint = function() { return false;};
        return cu;
	};

var createHeatMap = function(board, arr2D, xlen, ylen, bins) {
            var i, j, heat = [];
            
            board.suspendUpdate();
            for (i=0; i<ylen; i++) {	
	        heat[i] = [];
	        for (j=0; j<xlen; j++) {	
		    heat[i][j] = spot(board, i, j, xyArr[i][j], bins-1);
	        }
            }
            board.unsuspendUpdate();
            return heat;
        };

createHeatMap(brd, xyArr, len, len, bins);