Stacked Bar Graph with Nested Treemaps
Stacked bar graphs are a type of bar chart that visually represent data by stacking different components of a dataset on top of one another within a single bar. Each segment of the bar represents a category or portion of the total, making it easy to compare both the overall totals and the individual parts across multiple groups.
<html>
<head>
<!-- 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/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- 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>
// Use a data frame (2D-array) for the graph
var data = [
[ "Id", "Var1", "Var2", "Var3", "Factor4", "Factor1", "Factor2", "Factor6", "Factor3", "Factor5"],
[ "Smp1", 2, 4, 3, "F4-a", "F1-A", "F2-a", 1, "F3-i", "F5-a"],
[ "Smp2", 4, 6, 5, "F4-a", "F1-A", "F2-a", 2, "F3-i", "F5-b"],
[ "Smp3", 6, 8, 7, "F4-a", "F1-A", "F2-a", 3, "F3-j", "F5-c"],
[ "Smp4", 8, 10, 9, "F4-a", "F1-A", "F2-a", 4, "F3-j", "F5-d"],
[ "Smp5", 3, 3, 4, "F4-b", "F1-A", "F2-b", 5, "F3-k", "F5-e"],
[ "Smp6", 5, 5, 6, "F4-b", "F1-A", "F2-b", 6, "F3-k", "F5-f"],
[ "Smp7", 7, 7, 8, "F4-b", "F1-A", "F2-b", 7, "F3-l", "F5-g"],
[ "Smp8", 9, 9, 10, "F4-b", "F1-A", "F2-b", 8, "F3-l", "F5-h"],
[ "Smp9", 2, 2, 3, "F4-a", "F1-B", "F2-c", 8, "F3-m", "F5-i"],
[ "Smp10", 4, 4, 5, "F4-a", "F1-B", "F2-c", 7, "F3-m", "F5-j"],
[ "Smp11", 6, 6, 7, "F4-a", "F1-B", "F2-c", 6, "F3-n", "F5-k"],
[ "Smp12", 8, 8, 9, "F4-a", "F1-B", "F2-c", 5, "F3-n", "F5-l"],
[ "Smp13", 3, 1, 2, "F4-b", "F1-B", "F2-d", 4, "F3-o", "F5-m"],
[ "Smp14", 5, 3, 4, "F4-b", "F1-B", "F2-d", 3, "F3-o", "F5-n"],
[ "Smp15", 7, 5, 6, "F4-b", "F1-B", "F2-d", 2, "F3-p", "F5-o"],
[ "Smp16", 9, 7, 8, "F4-b", "F1-B", "F2-d", 1, "F3-p", "F5-p"],
[ "Smp17", 3, 2, 4, "F4-a", "F1-C", "F2-e", 1, "F3-q", "F5-q"],
[ "Smp18", 5, 4, 6, "F4-a", "F1-C", "F2-e", 2, "F3-q", "F5-r"],
[ "Smp19", 7, 6, 8, "F4-a", "F1-C", "F2-e", 3, "F3-r", "F5-s"],
[ "Smp20", 9, 8, 10, "F4-a", "F1-C", "F2-e", 4, "F3-r", "F5-t"],
[ "Smp21", 4, 3, 3, "F4-b", "F1-C", "F2-f", 5, "F3-s", "F5-u"],
[ "Smp22", 6, 5, 5, "F4-b", "F1-C", "F2-f", 6, "F3-s", "F5-v"],
[ "Smp23", 8, 7, 7, "F4-b", "F1-C", "F2-f", 7, "F3-t", "F5-w"],
[ "Smp24", 10, 9, 9, "F4-b", "F1-C", "F2-f", 8, "F3-t", "F5-x" ]
];
// Create the configuration for the graph
var config = {
"colorScheme" : "Blues",
"foreground" : "rgb(0,0,0)",
"graphOrientation" : "vertical",
"graphType" : "Stacked",
"groupingFactors" : ["Factor1"],
"legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
"legendKeyBackgroundColor" : "rgba(255,255,255,0)",
"objectBorderColor" : "rgb(0,0,0)",
"sampleSpaceFactor" : 1,
"showTransition" : false,
"title" : "Random Data",
"treemapBy" : ["Factor2","Factor3"],
"xAxis": ["Var1","Var2","Var3"]
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
<html>
<head>
<!-- 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/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- 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" : {
"Factor1" : ["F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C"],
"Factor2" : ["F2-a","F2-a","F2-a","F2-a","F2-b","F2-b","F2-b","F2-b","F2-c","F2-c","F2-c","F2-c","F2-d","F2-d","F2-d","F2-d","F2-e","F2-e","F2-e","F2-e","F2-f","F2-f","F2-f","F2-f"],
"Factor3" : ["F3-i","F3-i","F3-j","F3-j","F3-k","F3-k","F3-l","F3-l","F3-m","F3-m","F3-n","F3-n","F3-o","F3-o","F3-p","F3-p","F3-q","F3-q","F3-r","F3-r","F3-s","F3-s","F3-t","F3-t"],
"Factor4" : ["F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b"],
"Factor5" : ["F5-a","F5-b","F5-c","F5-d","F5-e","F5-f","F5-g","F5-h","F5-i","F5-j","F5-k","F5-l","F5-m","F5-n","F5-o","F5-p","F5-q","F5-r","F5-s","F5-t","F5-u","F5-v","F5-w","F5-x"],
"Factor6" : [1,2,3,4,5,6,7,8,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8]
},
"y" : {
"data" : [
[2,4,6,8,3,5,7,9,2,4,6,8,3,5,7,9,3,5,7,9,4,6,8,10],
[4,6,8,10,3,5,7,9,2,4,6,8,1,3,5,7,2,4,6,8,3,5,7,9],
[3,5,7,9,4,6,8,10,3,5,7,9,2,4,6,8,4,6,8,10,3,5,7,9]
],
"smps" : ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8","Smp9","Smp10","Smp11","Smp12","Smp13","Smp14","Smp15","Smp16","Smp17","Smp18","Smp19","Smp20","Smp21","Smp22","Smp23","Smp24"],
"vars" : ["Var1","Var2","Var3"]
}
}
// Create the configuration for the graph
var config = {
"colorScheme" : "Blues",
"foreground" : "rgb(0,0,0)",
"graphOrientation" : "vertical",
"graphType" : "Stacked",
"groupingFactors" : ["Factor1"],
"legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
"legendKeyBackgroundColor" : "rgba(255,255,255,0)",
"objectBorderColor" : "rgb(0,0,0)",
"sampleSpaceFactor" : 1,
"showTransition" : false,
"title" : "Random Data",
"treemapBy" : ["Factor2","Factor3"],
"xAxis": ["Var1","Var2","Var3"]
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-stacked2-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/r/cX-stacked2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
colorScheme="Blues",
foreground="rgb(0,0,0)",
graphOrientation="vertical",
graphType="Stacked",
groupingFactors=list("Factor1"),
legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
legendKeyBackgroundColor="rgba(255,255,255,0)",
objectBorderColor="rgb(0,0,0)",
sampleSpaceFactor=1,
showTransition=FALSE,
title="Random Data",
treemapBy=list("Factor2", "Factor3"),
xAxis=list("Var1", "Var2", "Var3")
)
