Heatmap Chart
A heatmap is a graphical representation of data where the individual values contained in a matrix are represented as colors. It is a bit like looking a data table from above. It is really useful to display a general view of numerical data, not to extract specific data point.
Example Color Themes
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"x" : {
"Binary" : ["Yes","No","Yes","No","Yes","No"],
"Boolean" : [true,false,true,false,true,false],
"Continuous" : [8,16,24,32,40,48],
"Discrete" : ["X","X","Y","Y","Z","Z"],
"Early" : [8,16,24,32,40,48],
"Late" : [60,50,40,30,20,10],
"OnTime" : [30,40,20,30,40,20],
"PhaseA" : [40,10,20,60,20,50],
"PhaseB" : [10,20,30,40,50,60],
"PhaseC" : [6,22,18,14,25,34],
"Temp" : [5,10,15,20,25,30]
},
"y" : {
"data" : [
[1,2,3,4,5,6],
[2,3,4,5,6,7],
[3,4,5,6,7,8],
[4,5,6,7,8,9],
[5,6,7,8,9,10],
[6,7,8,9,10,11]
],
"smps" : ["S1","S2","S3","S4","S5","S6"],
"vars" : ["V1","V2","V3","V4","V5","V6"]
},
"z" : {
"Cold" : [10,20,30,40,50,60],
"Conc" : [1,2,3,1,2,3],
"Desc" : ["Good","So-so","So-so","So-so","Excellent","Ahh!"],
"Drug" : ["A","A","A","B","B","B"],
"Even" : [20,20,30,40,6,10],
"Female" : [50,40,30,20,10,20],
"Hot" : [10,20,10,25,10,30],
"Male" : [10,20,30,40,30,20],
"Nice" : [8,16,24,32,40,48],
"Odd" : [5,9,15,21,25,31],
"Site" : ["X","Y","Z","Y","Z","W"],
"Ugly" : [10,5,20,10,30,15]
}
}
<-- Create the configuration for the graph -->
var config = {
"graphType":"Heatmap",
"showSmpOverlaysLegend":"false",
"showVarOverlaysLegend":"false",
"smpLabelScaleFontFactor":1.1,
"smpOverlayProperties":{
"Binary":{
"position":"left",
"scheme":"BlackAndWhite",
"showLegend":"true",
"type":"Default"
},
"Boolean":{
"position":"left"
},
"Continuous":{
"position":"left",
"showLegend":"true",
"spectrum":[
"green",
"white"
],
"type":"Heatmap"
},
"Discrete":{
"position":"left",
"showLegend":"true",
"thickness":30,
"type":"Default"
},
"Early":{
"color":"blue",
"position":"right",
"thickness":50,
"type":"Line"
},
"Late":{
"color":"red",
"position":"right",
"thickness":50,
"type":"Line"
},
"OnTime":{
"color":"green",
"position":"right",
"thickness":50,
"type":"Line"
},
"PhaseA":{
"position":"left",
"showLegend":"true",
"thickness":50,
"type":"Bar"
},
"PhaseB":{
"position":"left",
"showLegend":"true",
"thickness":50,
"type":"Bar"
},
"PhaseC":{
"position":"left",
"showLegend":"true",
"thickness":50,
"type":"Bar"
},
"Temp":{
"position":"right",
"spectrum":[
"blue",
"white",
"red"
],
"thickness":100,
"type":"Heatmap"
}
},
"smpOverlays":[
"PhaseA",
"PhaseB",
"PhaseC",
"-",
"-",
"Binary",
"Boolean",
"Continuous",
"Discrete",
"-",
"-",
"Temp",
"-",
"-",
"Early",
"OnTime",
"Late"
],
"splitSamplesBy":"Discrete",
"splitVariablesBy":"Drug",
"varLabelRotate":"45",
"varLabelScaleFontFactor":1.7,
"varOverlayProperties":{
"Cold":{
"color":"blue",
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"StackedPercent"
},
"Conc":{
"position":"top",
"showLegend":"true",
"thickness":40,
"type":"Bar"
},
"Desc":{
"position":"bottom",
"type":"Text"
},
"Drug":{
"position":"top",
"showLegend":"true",
"thickness":30,
"type":"Increase"
},
"Even":{
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"Bar"
},
"Female":{
"position":"top",
"showLegend":"true",
"thickness":50,
"type":"Pie"
},
"Hot":{
"color":"red",
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"StackedPercent"
},
"Male":{
"position":"top",
"showLegend":"true",
"thickness":50,
"type":"Pie"
},
"Nice":{
"color":"green",
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"Dotplot"
},
"Odd":{
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"BarLine"
},
"Site":{
"position":"top",
"showLegend":"true",
"type":"Default"
},
"Ugly":{
"color":"black",
"position":"bottom",
"showLegend":"true",
"thickness":50,
"type":"Dotplot"
}
},
"varOverlays":[
"Drug",
"-",
"Male",
"Female",
"-",
"Site",
"-",
"Conc",
"-",
"Desc",
"-",
"Even",
"Odd",
"-",
"-",
"Nice",
"Ugly",
"-",
"-",
"Cold",
"Hot"
]
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-overlays-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-overlays-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-overlays-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
varAnnot=z,
graphType="Heatmap",
showSmpOverlaysLegend=FALSE,
showVarOverlaysLegend=FALSE,
smpLabelScaleFontFactor=1.1,
smpOverlayProperties=list(Binary=list(position="left", scheme="BlackAndWhite", showLegend=TRUE, type="Default"), Boolean=list(position="left"), Continuous=list(position="left", showLegend=TRUE, spectrum=list("green", "white"), type="Heatmap"), Discrete=list(position="left", showLegend=TRUE, thickness=30, type="Default"), Early=list(color="blue", position="right", thickness=50, type="Line"), Late=list(color="red", position="right", thickness=50, type="Line"), OnTime=list(color="green", position="right", thickness=50, type="Line"), PhaseA=list(position="left", showLegend=TRUE, thickness=50, type="Bar"), PhaseB=list(position="left", showLegend=TRUE, thickness=50, type="Bar"), PhaseC=list(position="left", showLegend=TRUE, thickness=50, type="Bar"), Temp=list(position="right", spectrum=list("blue", "white", "red"), thickness=100, type="Heatmap")),
smpOverlays=list("PhaseA", "PhaseB", "PhaseC", "-", "-", "Binary", "Boolean", "Continuous", "Discrete", "-", "-", "Temp", "-", "-", "Early", "OnTime", "Late"),
splitSamplesBy="Discrete",
splitVariablesBy="Drug",
varLabelRotate=45,
varLabelScaleFontFactor=1.7,
varOverlayProperties=list(Cold=list(color="blue", position="bottom", showLegend=TRUE, thickness=50, type="StackedPercent"), Conc=list(position="top", showLegend=TRUE, thickness=40, type="Bar"), Desc=list(position="bottom", type="Text"), Drug=list(position="top", showLegend=TRUE, thickness=30, type="Increase"), Even=list(position="bottom", showLegend=TRUE, thickness=50, type="Bar"), Female=list(position="top", showLegend=TRUE, thickness=50, type="Pie"), Hot=list(color="red", position="bottom", showLegend=TRUE, thickness=50, type="StackedPercent"), Male=list(position="top", showLegend=TRUE, thickness=50, type="Pie"), Nice=list(color="green", position="bottom", showLegend=TRUE, thickness=50, type="Dotplot"), Odd=list(position="bottom", showLegend=TRUE, thickness=50, type="BarLine"), Site=list(position="top", showLegend=TRUE, type="Default"), Ugly=list(color="black", position="bottom", showLegend=TRUE, thickness=50, type="Dotplot")),
varOverlays=list("Drug", "-", "Male", "Female", "-", "Site", "-", "Conc", "-", "Desc", "-", "Even", "Odd", "-", "-", "Nice", "Ugly", "-", "-", "Cold", "Hot")
)
