<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 =
// Create the configuration for the graph
var config = {
"graphType" : "Boxplot",
"graphOrientation" : "vertical",
"groupingFactors" : [
"cyl"
],
"xAxis" : [
"mpg"
],
"xAxisTitle" : "mpg",
"smpTitle" : "cyl",
"smpTitleFontStyle" : "bold",
"axisTitleFontStyle" : "bold",
"axisAlgorithm" : "rPretty",
"smpTextRotate" : 0,
"showLegend" : false,
"colorBy" : "cyl",
"title" : "Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
"showStatInference" : true,
"statInference" : {
"correction" : {
"method" : "BY"
},
"annotate" : "padj",
"comparisons" : [
{
"groups" : [
"4",
"6"
],
"p" : 0.000665814784145945,
"color" : "#1b9e77"
},
{
"groups" : [
"6",
"8"
],
"p" : 0.00101304468807941,
"color" : "#d95f02"
},
{
"groups" : [
"4",
"8"
],
"p" : 2.77471487941046e-05,
"color" : "#7570b3"
}
]
},
"showBoxplotOriginalData" : true,
"jitter" : true,
"colorScheme" : "Dark2"
}
// 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 = {
"y" : {
"vars" : [
"mpg"
],
"smps" : [
"Obs1",
"Obs2",
"Obs3",
"Obs4",
"Obs5",
"Obs6",
"Obs7",
"Obs8",
"Obs9",
"Obs10",
"Obs11",
"Obs12",
"Obs13",
"Obs14",
"Obs15",
"Obs16",
"Obs17",
"Obs18",
"Obs19",
"Obs20",
"Obs21",
"Obs22",
"Obs23",
"Obs24",
"Obs25",
"Obs26",
"Obs27",
"Obs28",
"Obs29",
"Obs30",
"Obs31",
"Obs32"
],
"data" : [
[
22.8,
24.4,
22.8,
32.4,
30.4,
33.9,
21.5,
27.3,
26,
30.4,
21.4,
21,
21,
21.4,
18.1,
19.2,
17.8,
19.7,
18.7,
14.3,
16.4,
17.3,
15.2,
10.4,
10.4,
14.7,
15.5,
15.2,
13.3,
19.2,
15.8,
15
]
]
},
"x" : {
"cyl" : [
"4",
"4",
"4",
"4",
"4",
"4",
"4",
"4",
"4",
"4",
"4",
"6",
"6",
"6",
"6",
"6",
"6",
"6",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8"
]
}
}
// Create the configuration for the graph
var config = {
"graphType" : "Boxplot",
"graphOrientation" : "vertical",
"groupingFactors" : [
"cyl"
],
"xAxis" : [
"mpg"
],
"xAxisTitle" : "mpg",
"smpTitle" : "cyl",
"smpTitleFontStyle" : "bold",
"axisTitleFontStyle" : "bold",
"axisAlgorithm" : "rPretty",
"smpTextRotate" : 0,
"showLegend" : false,
"colorBy" : "cyl",
"title" : "Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
"showStatInference" : true,
"statInference" : {
"correction" : {
"method" : "BY"
},
"annotate" : "padj",
"comparisons" : [
{
"groups" : [
"4",
"6"
],
"p" : 0.000665814784145945,
"color" : "#1b9e77"
},
{
"groups" : [
"6",
"8"
],
"p" : 0.00101304468807941,
"color" : "#d95f02"
},
{
"groups" : [
"4",
"8"
],
"p" : 2.77471487941046e-05,
"color" : "#7570b3"
}
]
},
"showBoxplotOriginalData" : true,
"jitter" : true,
"colorScheme" : "Dark2"
}
// 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-statistics7-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-statistics7-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
axisAlgorithm="rPretty",
axisTitleFontStyle="bold",
colorBy="cyl",
colorScheme="Dark2",
graphOrientation="vertical",
graphType="Boxplot",
groupingFactors=list("cyl"),
jitter=TRUE,
showBoxplotOriginalData=TRUE,
showLegend=FALSE,
showStatInference=TRUE,
smpTextRotate=0,
smpTitle="cyl",
smpTitleFontStyle="bold",
statInference=list(annotate="padj", comparisons=list(list(color="#1b9e77", groups=list(4, 6), p=0.000665814784145945), list(color="#d95f02", groups=list(6, 8), p=0.00101304468807941), list(color="#7570b3", groups=list(4, 8), p=2.77471487941046e-05)), correction=list(method="BY")),
title="Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
xAxis=list("mpg"),
xAxisTitle="mpg"
)
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 = "statistics7",
data = {
"y": {
"vars": ["mpg"],
"smps": ["Obs1", "Obs2", "Obs3", "Obs4", "Obs5", "Obs6", "Obs7", "Obs8", "Obs9", "Obs10", "Obs11", "Obs12", "Obs13", "Obs14", "Obs15", "Obs16", "Obs17", "Obs18", "Obs19", "Obs20", "Obs21", "Obs22", "Obs23", "Obs24", "Obs25", "Obs26", "Obs27", "Obs28", "Obs29", "Obs30", "Obs31", "Obs32"],
"data": [
[22.8, 24.4, 22.8, 32.4, 30.4, 33.9, 21.5, 27.3, 26, 30.4, 21.4, 21, 21, 21.4, 18.1, 19.2, 17.8, 19.7, 18.7, 14.3, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 15.5, 15.2, 13.3, 19.2, 15.8, 15]
]
},
"x": {
"cyl": ["4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "6", "6", "6", "6", "6", "6", "6", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]
}
},
config = {
"graphType": "Boxplot",
"graphOrientation": "vertical",
"groupingFactors": ["cyl"],
"xAxis": ["mpg"],
"xAxisTitle": "mpg",
"smpTitle": "cyl",
"smpTitleFontStyle": "bold",
"axisTitleFontStyle": "bold",
"axisAlgorithm": "rPretty",
"smpTextRotate": 0,
"showLegend": False,
"colorBy": "cyl",
"title": "Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
"showStatInference": True,
"statInference": {
"correction": {
"method": "BY"
},
"annotate": "padj",
"comparisons": [
{
"groups": ["4", "6"],
"p": 0.000665814784145945,
"color": "#1b9e77"
},
{
"groups": ["6", "8"],
"p": 0.00101304468807941,
"color": "#d95f02"
},
{
"groups": ["4", "8"],
"p": 2.77471487941046e-05,
"color": "#7570b3"
}
]
},
"showBoxplotOriginalData": True,
"jitter": True,
"colorScheme": "Dark2"
},
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 = "statistics7",
data = {
"y": {
"vars": ["mpg"],
"smps": ["Obs1", "Obs2", "Obs3", "Obs4", "Obs5", "Obs6", "Obs7", "Obs8", "Obs9", "Obs10", "Obs11", "Obs12", "Obs13", "Obs14", "Obs15", "Obs16", "Obs17", "Obs18", "Obs19", "Obs20", "Obs21", "Obs22", "Obs23", "Obs24", "Obs25", "Obs26", "Obs27", "Obs28", "Obs29", "Obs30", "Obs31", "Obs32"],
"data": [
[22.8, 24.4, 22.8, 32.4, 30.4, 33.9, 21.5, 27.3, 26, 30.4, 21.4, 21, 21, 21.4, 18.1, 19.2, 17.8, 19.7, 18.7, 14.3, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 15.5, 15.2, 13.3, 19.2, 15.8, 15]
]
},
"x": {
"cyl": ["4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "6", "6", "6", "6", "6", "6", "6", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]
}
},
config = {
"graphType": "Boxplot",
"graphOrientation": "vertical",
"groupingFactors": ["cyl"],
"xAxis": ["mpg"],
"xAxisTitle": "mpg",
"smpTitle": "cyl",
"smpTitleFontStyle": "bold",
"axisTitleFontStyle": "bold",
"axisAlgorithm": "rPretty",
"smpTextRotate": 0,
"showLegend": False,
"colorBy": "cyl",
"title": "Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
"showStatInference": True,
"statInference": {
"correction": {
"method": "BY"
},
"annotate": "padj",
"comparisons": [
{
"groups": ["4", "6"],
"p": 0.000665814784145945,
"color": "#1b9e77"
},
{
"groups": ["6", "8"],
"p": 0.00101304468807941,
"color": "#d95f02"
},
{
"groups": ["4", "8"],
"p": 2.77471487941046e-05,
"color": "#7570b3"
}
]
},
"showBoxplotOriginalData": True,
"jitter": True,
"colorScheme": "Dark2"
},
width = 600,
height = 600
)
)
using CanvasXpress
canvasxpress(Dict(
"y" => Dict(
"vars" => ["mpg"],
"smps" => ["Obs1", "Obs2", "Obs3", "Obs4", "Obs5", "Obs6", "Obs7", "Obs8", "Obs9", "Obs10", "Obs11", "Obs12", "Obs13", "Obs14", "Obs15", "Obs16", "Obs17", "Obs18", "Obs19", "Obs20", "Obs21", "Obs22", "Obs23", "Obs24", "Obs25", "Obs26", "Obs27", "Obs28", "Obs29", "Obs30", "Obs31", "Obs32"],
"data" => [
[22.8, 24.4, 22.8, 32.4, 30.4, 33.9, 21.5, 27.3, 26, 30.4, 21.4, 21, 21, 21.4, 18.1, 19.2, 17.8, 19.7, 18.7, 14.3, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 15.5, 15.2, 13.3, 19.2, 15.8, 15]
]
),
"x" => Dict(
"cyl" => ["4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "4", "6", "6", "6", "6", "6", "6", "6", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8", "8"]
)
);
graphType = "Boxplot",
graphOrientation = "vertical",
groupingFactors = ["cyl"],
xAxis = ["mpg"],
xAxisTitle = "mpg",
smpTitle = "cyl",
smpTitleFontStyle = "bold",
axisTitleFontStyle = "bold",
axisAlgorithm = "rPretty",
smpTextRotate = 0,
showLegend = false,
colorBy = "cyl",
title = "Fuel economy by cylinders (Wilcoxon, BY-adjusted)",
showStatInference = true,
statInference = Dict(
"correction" => Dict(
"method" => "BY"
),
"annotate" => "padj",
"comparisons" => [
Dict(
"groups" => ["4", "6"],
"p" => 0.000665814784145945,
"color" => "#1b9e77"
),
Dict(
"groups" => ["6", "8"],
"p" => 0.00101304468807941,
"color" => "#d95f02"
),
Dict(
"groups" => ["4", "8"],
"p" => 2.77471487941046e-05,
"color" => "#7570b3"
)
]
),
showBoxplotOriginalData = true,
jitter = true,
colorScheme = "Dark2"
)