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 = { "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] ], "smps" : ["S1","S2","S3","S4","S5","S6","S7","S8","S9","S10"], "vars" : ["V1","V2","V3","V4","V5"] } } <-- Create the configuration for the graph --> var config = { "colorSpectrum":[ "#f0f0f0", "#bdbdbd", "#636363", "#000000" ], "graphType":"Heatmap", "showHeatmapIndicator":"false", "showLegend":"false", "sizeBy":"Size", "sizeByContinuous":"true", "sizeByData":"data", "title":"A good old Northern Blot" } <!-- 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-multidimensionalheatmap2-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, colorSpectrum=list("#f0f0f0", "#bdbdbd", "#636363", "#000000"), graphType="Heatmap", showHeatmapIndicator=FALSE, showLegend=FALSE, sizeBy="Size", sizeByContinuous=TRUE, sizeByData="data", title="A good old Northern Blot" )