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

Example Fonts



Show Code

Tools

<!-- 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"))
)