Enhancing Analysis with Faceted Charts
Layout plots help you split data into subsets and create multiple plots within a single chart. This technique allows you to display different views of your data side by side, making it simple to compare trends and patterns across groups. For example, if you are analyzing sales data by region, facets can generate separate plots for each region, providing clearer insights. Learn how using facets can improve your data analysis and storytelling.
<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", "V1", "V2", "V3", "V4", "V5", "V6", "Boolean", "Temp", "PhaseA", "OnTime", "Discrete", "Continuous", "PhaseC", "Late", "Early", "PhaseB", "Binary"],
[ "S1", 1, 2, 3, 4, 5, 6, true, 5, 40, 30, "X", 8, 6, 60, 8, 10, "Yes"],
[ "S2", 2, 3, 4, 5, 6, 7, false, 10, 10, 40, "X", 16, 22, 50, 16, 20, "No"],
[ "S3", 3, 4, 5, 6, 7, 8, true, 15, 20, 20, "Y", 24, 18, 40, 24, 30, "Yes"],
[ "S4", 4, 5, 6, 7, 8, 9, false, 20, 60, 30, "Y", 32, 14, 30, 32, 40, "No"],
[ "S5", 5, 6, 7, 8, 9, 10, true, 25, 20, 40, "Z", 40, 25, 20, 40, 50, "Yes"],
[ "S6", 6, 7, 8, 9, 10, 11, false, 30, 50, 20, "Z", 48, 34, 10, 48, 60, "No" ]
];
// Create the configuration for the graph
var config = {
"graphType" : "Heatmap",
"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,
"xAxis" : ["V1","V2","V3","V4","V5","V6"]
}
// 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" : {
"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",
"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,
"xAxis" : ["V1","V2","V3","V4","V5","V6"]
}
// 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-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/r/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/r/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",
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,
xAxis=list("V1", "V2", "V3", "V4", "V5", "V6")
)
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 = "layout15",
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]
}
},
config = {
"graphType": "Heatmap",
"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,
"xAxis": ["V1", "V2", "V3", "V4", "V5", "V6"]
},
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 = "layout15",
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]
}
},
config = {
"graphType": "Heatmap",
"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,
"xAxis": ["V1", "V2", "V3", "V4", "V5", "V6"]
},
width = 600,
height = 600
)
)
