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")
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser
if __name__ == "__main__":
# Define the chart with its data and configuration
chart: CanvasXpress = CanvasXpress(
render_to = "stacked1",
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"]
}
},
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"]
},
width = 600,
height = 600
)
# Display the chart in its own Web page
show_in_browser(chart)
Run this notebook:
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph
graph(
CanvasXpress(
render_to = "stacked1",
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"]
}
},
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"]
},
width = 600,
height = 600
)
)
