Optimizing Comparison with Subset Graphs
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", "Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width", "Species"],
[ "s1", 5.1, 3.5, 1.4, 0.2, "setosa"],
[ "s2", 4.9, 3, 1.4, 0.2, "setosa"],
[ "s3", 4.7, 3.2, 1.3, 0.2, "setosa"],
[ "s4", 4.6, 3.1, 1.5, 0.2, "setosa"],
[ "s5", 5, 3.6, 1.4, 0.2, "setosa"],
[ "s6", 5.4, 3.9, 1.7, 0.4, "setosa"],
[ "s7", 4.6, 3.4, 1.4, 0.3, "setosa"],
[ "s8", 5, 3.4, 1.5, 0.2, "setosa"],
[ "s9", 4.4, 2.9, 1.4, 0.2, "setosa"],
[ "s10", 4.9, 3.1, 1.5, 0.1, "setosa"],
[ "s11", 5.4, 3.7, 1.5, 0.2, "setosa"],
[ "s12", 4.8, 3.4, 1.6, 0.2, "setosa"],
[ "s13", 4.8, 3, 1.4, 0.1, "setosa"],
[ "s14", 4.3, 3, 1.1, 0.1, "setosa"],
[ "s15", 5.8, 4, 1.2, 0.2, "setosa"],
[ "s16", 5.7, 4.4, 1.5, 0.4, "setosa"],
[ "s17", 5.4, 3.9, 1.3, 0.4, "setosa"],
[ "s18", 5.1, 3.5, 1.4, 0.3, "setosa"],
[ "s19", 5.7, 3.8, 1.7, 0.3, "setosa"],
[ "s20", 5.1, 3.8, 1.5, 0.3, "setosa"],
[ "s21", 5.4, 3.4, 1.7, 0.2, "setosa"],
[ "s22", 5.1, 3.7, 1.5, 0.4, "setosa"],
[ "s23", 4.6, 3.6, 1, 0.2, "setosa"],
[ "s24", 5.1, 3.3, 1.7, 0.5, "setosa"],
[ "s25", 4.8, 3.4, 1.9, 0.2, "setosa"],
[ "s26", 5, 3, 1.6, 0.2, "setosa"],
[ "s27", 5, 3.4, 1.6, 0.4, "setosa"],
[ "s28", 5.2, 3.5, 1.5, 0.2, "setosa"],
// ... (data truncated after 29 records for clarity)
]
// Create the configuration for the graph
var config = {
"axisTextFontStyle": "bold",
"axisTitleFontStyle": "italic",
"citation": "R. A. Fisher (1936). The use of multiple measurements in taxonomic problems. Annals of Eugenics 7 (2) => 179-188.",
"citationFontStyle": "italic",
"fontStyle": "italic",
"graphOrientation": "vertical",
"graphType": "Boxplot",
"showTransition": false,
"smpTextFontStyle": "italic",
"smpTextRotate": 90,
"smpTitle": "Species",
"stripBackgroundBorderColor": "rgb(0,0,0)",
"stripTextColor": "rgb(0,0,0)",
"title": "Iris flower data set",
"xAxis": ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
"xAxis2Show": false
}
// 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);
// Functions after rendering graph
cX.groupSamples(["Species"]);
cX.segregateSamples(["Species"]);
</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" : {
"Species" : ["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]
},
"y" : {
"data" : [
[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],
[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],
[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],
[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8]
],
"desc" : ["centimeters"],
"smps" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21","s22","s23","s24","s25","s26","s27","s28","s29","s30","s31","s32","s33","s34","s35","s36","s37","s38","s39","s40","s41","s42","s43","s44","s45","s46","s47","s48","s49","s50","s51","s52","s53","s54","s55","s56","s57","s58","s59","s60","s61","s62","s63","s64","s65","s66","s67","s68","s69","s70","s71","s72","s73","s74","s75","s76","s77","s78","s79","s80","s81","s82","s83","s84","s85","s86","s87","s88","s89","s90","s91","s92","s93","s94","s95","s96","s97","s98","s99","s100","s101","s102","s103","s104","s105","s106","s107","s108","s109","s110","s111","s112","s113","s114","s115","s116","s117","s118","s119","s120","s121","s122","s123","s124","s125","s126","s127","s128","s129","s130","s131","s132","s133","s134","s135","s136","s137","s138","s139","s140","s141","s142","s143","s144","s145","s146","s147","s148","s149","s150"],
"vars" : ["Sepal.Length","Sepal.Width","Petal.Length","Petal.Width"]
}
}
// Create the configuration for the graph
var config = {
"axisTextFontStyle": "bold",
"axisTitleFontStyle": "italic",
"citation": "R. A. Fisher (1936). The use of multiple measurements in taxonomic problems. Annals of Eugenics 7 (2) => 179-188.",
"citationFontStyle": "italic",
"fontStyle": "italic",
"graphOrientation": "vertical",
"graphType": "Boxplot",
"showTransition": false,
"smpTextFontStyle": "italic",
"smpTextRotate": 90,
"smpTitle": "Species",
"stripBackgroundBorderColor": "rgb(0,0,0)",
"stripTextColor": "rgb(0,0,0)",
"title": "Iris flower data set",
"xAxis": ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"],
"xAxis2Show": false
}
// 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);
// Functions after rendering graph
cX.groupSamples(["Species"]);
cX.segregateSamples(["Species"]);
</script>
</body>
</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-iris-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-iris-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
axisTextFontStyle="bold",
axisTitleFontStyle="italic",
citation="R. A. Fisher (1936). The use of multiple measurements in taxonomic problems. Annals of Eugenics 7 (2) => 179-188.",
citationFontStyle="italic",
fontStyle="italic",
graphOrientation="vertical",
graphType="Boxplot",
showTransition=FALSE,
smpTextFontStyle="italic",
smpTextRotate=90,
smpTitle="Species",
stripBackgroundBorderColor="rgb(0,0,0)",
stripTextColor="rgb(0,0,0)",
title="Iris flower data set",
xAxis=list("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"),
xAxis2Show=FALSE,
afterRender=list(list("groupSamples", list("Species")), list("segregateSamples", list("Species")))
)
