A layout approach partitions a plot into a matrix of panels. Each panel shows a different subset of the data.
<!-- 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", "showTransition":"false", "smpOverlayProperties":{ "Binary":{ "position":"left", "scheme":"BlackAndWhite", "type":"Default" }, "Continuous":{ "position":"left", "spectrum":[ "green", "white" ], "type":"Heatmap" }, "Discrete":{ "position":"left", "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", "thickness":50, "type":"Bar" }, "PhaseB":{ "position":"left", "thickness":50, "type":"Bar" }, "PhaseC":{ "position":"left", "thickness":50, "type":"Bar" }, "Temp":{ "position":"right", "spectrum":[ "blue", "white", "red" ], "thickness":100, "type":"Heatmap" } }, "smpOverlays":[ "PhaseA", "PhaseB", "PhaseC", "-", "-", "Binary", "Continuous", "Discrete", "-", "-", "Temp", "-", "-", "Early", "OnTime", "Late" ], "smpTextScaleFontFactor":1.1, "stripBackgroundBorderColor":"rgb(0,0,0)", "stripTextColor":"rgb(0,0,0)", "varOverlayProperties":{ "Cold":{ "color":"blue", "position":"bottom", "thickness":50, "type":"StackedPercent" }, "Conc":{ "position":"top", "thickness":40, "type":"Bar" }, "Desc":{ "position":"bottom", "type":"Text" }, "Drug":{ "position":"top", "thickness":30, "type":"Increase" }, "Even":{ "position":"bottom", "thickness":50, "type":"Bar" }, "Female":{ "position":"top", "thickness":50, "type":"Pie" }, "Hot":{ "color":"red", "position":"bottom", "thickness":50, "type":"StackedPercent" }, "Male":{ "position":"top", "thickness":50, "type":"Pie" }, "Nice":{ "color":"green", "position":"bottom", "thickness":50, "type":"Dotplot" }, "Odd":{ "position":"bottom", "thickness":50, "type":"BarLine" }, "Site":{ "position":"top", "type":"Default" }, "Ugly":{ "color":"black", "position":"bottom", "thickness":50, "type":"Dotplot" } }, "varOverlays":[ "Drug", "-", "Male", "Female", "-", "Site", "-", "Conc", "-", "Desc", "-", "Even", "Odd", "-", "-", "Nice", "Ugly", "-", "-", "Cold", "Hot" ], "varTextRotate":"45", "varTextScaleFontFactor":1.7 } <!-- 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", showTransition=FALSE, smpOverlayProperties=list(Binary=list(position="left", scheme="BlackAndWhite", type="Default"), Continuous=list(position="left", spectrum=list("green", "white"), type="Heatmap"), Discrete=list(position="left", 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", thickness=50, type="Bar"), PhaseB=list(position="left", thickness=50, type="Bar"), PhaseC=list(position="left", thickness=50, type="Bar"), Temp=list(position="right", spectrum=list("blue", "white", "red"), thickness=100, type="Heatmap")), smpOverlays=list("PhaseA", "PhaseB", "PhaseC", "-", "-", "Binary", "Continuous", "Discrete", "-", "-", "Temp", "-", "-", "Early", "OnTime", "Late"), smpTextScaleFontFactor=1.1, stripBackgroundBorderColor="rgb(0,0,0)", stripTextColor="rgb(0,0,0)", varOverlayProperties=list(Cold=list(color="blue", position="bottom", thickness=50, type="StackedPercent"), Conc=list(position="top", thickness=40, type="Bar"), Desc=list(position="bottom", type="Text"), Drug=list(position="top", thickness=30, type="Increase"), Even=list(position="bottom", thickness=50, type="Bar"), Female=list(position="top", thickness=50, type="Pie"), Hot=list(color="red", position="bottom", thickness=50, type="StackedPercent"), Male=list(position="top", thickness=50, type="Pie"), Nice=list(color="green", position="bottom", thickness=50, type="Dotplot"), Odd=list(position="bottom", thickness=50, type="BarLine"), Site=list(position="top", type="Default"), Ugly=list(color="black", position="bottom", thickness=50, type="Dotplot")), varOverlays=list("Drug", "-", "Male", "Female", "-", "Site", "-", "Conc", "-", "Desc", "-", "Even", "Odd", "-", "-", "Nice", "Ugly", "-", "-", "Cold", "Hot"), varTextRotate=45, varTextScaleFontFactor=1.7 )