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.
<!-- 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" : { "Factor" : ["Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1","Lev : 2"] }, "y" : { "data" : [ [1,2,3,4,5,6,7,8,9,10], [10,9,8,7,6,5,4,3,2,1], [1,2,3,4,5,6,7,8,9,10], [10,9,8,7,6,5,4,3,2,1], [1,2,3,4,5,6,7,8,9,10] ], "data2" : [[1,1,2,2,3,3,4,4,5,5], [6,6,7,7,8,8,9,9,10,10], [10,10,9,9,8,8,7,7,6,6], [5,5,4,4,3,3,2,2,1,1], [3,3,4,4,5,5,6,6,7,7] ], "data3" : [["A","A","B","B","C","C","D","D","E","E"], ["E","E","D","D","C","C","B","B","A","A"], ["A","A","B","B","C","C","D","D","E","E"], ["E","E","D","D","C","C","B","B","A","A"], ["A","A","B","B","C","C","D","D","E","E"] ], "data4" : [["A","A","B","B","A","A","B","B","A","A"], ["B","B","A","A","B","B","A","A","B","B"], ["A","A","B","B","A","A","B","B","A","A"], ["B","B","A","A","B","B","A","A","B","B"], ["A","A","B","B","A","A","B","B","A","A"] ], "smps" : ["S1","S2","S3","S4","S5","S6","S7","S8","S9","S10"], "vars" : ["V1","V2","V3","V4","V5"] }, "z" : { "Annt" : ["Desc : 1","Desc : 2","Desc : 1","Desc : 2","Desc : 1","Desc : 2","Desc : 1","Desc : 2","Desc : 1","Desc : 2"] } } <-- Create the configuration for the graph --> var config = { "graphType":"Heatmap", "guides":"true", "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)", "legendKeyBackgroundColor":"rgba(255,255,255,0)", "outlineBy":"Outline", "outlineByData":"data2", "shapeBy":"Shape", "shapeByData":"data3", "sizeBy":"Size", "sizeByData":"data4" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); <-- Functions after rendering graph --> cX.clusterSamples(); </script>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-multidimensionalheatmap-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) y2=read.table("https://www.canvasxpress.org/data/cX-multidimensionalheatmap-dat2.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) y3=read.table("https://www.canvasxpress.org/data/cX-multidimensionalheatmap-dat3.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) y4=read.table("https://www.canvasxpress.org/data/cX-multidimensionalheatmap-dat4.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-multidimensionalheatmap-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-multidimensionalheatmap-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=list(y=y, data2=y2, data3=y3, data4=y4), smpAnnot=x, varAnnot=z, graphType="Heatmap", guides=TRUE, legendKeyBackgroundBorderColor="rgba(255,255,255,0)", legendKeyBackgroundColor="rgba(255,255,255,0)", outlineBy="Outline", outlineByData="data2", shapeBy="Shape", shapeByData="data3", sizeBy="Size", sizeByData="data4", afterRender=list(list("clusterSamples")) )