Heatmap
You can select samples and variables by dragging the mouse over the samples and variables you want to see while you pressing the left mouse button. To reset the plot to its original possition press the 'esc' key. If you click in a data point then you can see all the information for that data point. The click event can be customized (please see the event section).
You can rotate the branches of the dendrograms by clicking in the root of the brach with the left mouse button. More importantly, you can cluster samples and/or variables with hierarchical methods or kmeans (see the last example in this page). The performance obviously degrades as the size of the data increases but I have no trouble clustering a 200 by 200 data set using Firefox and Chrome .... (forget about IE since it wouldn handle even 5 x 5).
You can resize the image using the handle that appears when you mouse over the south and east sides of the canvas. You maybe wondering why sometimes it resizes to where you released the mouse button and sometimes it does not. The reason is because of the 'autoExtend' property which is a feature (not a bug). If you set the autoExtent to 'false', then it resizes to where you release your mouse button.
new CanvasXpress('canvas',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]},
z: {Category: ['A', 'B', 'C', 'B', 'C', 'A']},
t: {vars: '((Gene6:0.2,Gene3:0.3):0.2,((Gene1:0.25,(Gene4:0.15,Gene2:0.3):0.2):0.3,Gene5:0.7):0.1)',
smps: '((Smp2:0.8,(Smp4:0.7,((Smp1:0.6,(Smp6:0.2,Smp5:0.1):0.2):0.15,(Smp8:0.15,Smp3:0.05):0.1):0.15):0.2):0.05,Smp7:0.9)'}},
{graphType: 'Heatmap',
showVarDendrogram: true,
showSmpDendrogram: true,
highlightVar: 'Gene4',
highlightSmp: 'Smp3',
varLabelRotate: 45,
varHighlightColor: 'rgb(0,255,0)',
background: 'rgb(245,245,245)',
smpOverlays: ['Tissue', 'Donor', 'Time'],
varOverlays: ['Category'],
overlaysWidth: 20});
new CanvasXpress('canvas1',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour'],
Desc: ['Some description', 'NA', 'Awesome', 'Not that great', 'Foo', 'Blah blah', 'Very good', 'Other stuff']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity'],
data: [[10, 12, 153, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 130, 82, 51],
[100, 82, 73, 124, 3, 4, 5, 142]]},
t: {vars: '((Gene6:0.2,Gene3:0.3):0.2,((Gene1:0.25,(Gene4:0.15,Gene2:0.3):0.2):0.3,Gene5:0.7):0.1)',
smps: '((Smp2:0.8,(Smp4:0.7,((Smp1:0.6,(Smp6:0.2,Smp5:0.1):0.2):0.15,(Smp8:0.15,Smp3:0.05):0.1):0.15):0.2):0.05,Smp7:0.9)'}},
{graphType: 'Heatmap',
showVarDendrogram: true,
showSmpDendrogram: true,
dendrogramSpace: 10,
showDataValues: true,
smpLabelDescription: 'Desc',
varDendrogramPosition: 'bottom',
background: 'rgb(245,245,245)',
indicatorCenter: 'rainbow',
heatmapType: 'purple-red',
dendrogramHang: true});
var cx = new CanvasXpress('canvas2',
{y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8', 'Smp9', 'Smp10', 'Smp11', 'Smp12', 'Smp13', 'Smp14', 'Smp15', 'Smp16'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 43, 32, 44, 5, 3, 35, 25, 28, 11, 23, 24],
[12, 4, 60, 5, 24, 14, 32, 13, 45, 26, 34, 52, 12, 67, 3, 15],
[7, 12, 20, 13, 49, 52, 42, 92, 46, 24, 26, 12, 2, 34, 7, 56],
[21, 10, 30, 8, 65, 166, 47, 58, 93, 26, 8, 35, 23, 3, 25, 2],
[15, 14, 100, 5, 34, 30, 82, 51, 46, 16, 28, 83, 4, 9, 35, 8],
[100, 82, 73, 4, 3, 4, 5, 7, 4, 67, 23, 12, 34, 25, 6, 25]]}},
{graphType: 'Heatmap',
gradient: true,
centerData: true,
indicatorWidth: 3});
cx.clusterSamples();
cx.clusterVariables();
cx.kmeansSamples();
cx.kmeansVariables();
cx.draw();