Scatter2D Chart
A scatterplot displays the relationship between 2 numeric variables. For each data point, the value of its first variable is represented on the X axis, the second on the Y axis.
Example Color Themes
<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" : {
"data" : [
[0,0],
[8,-0.6],
[16,-0.7],
[24,-0.7],
[32,-0.7],
[40,-0.7],
[48,-0.65],
[56,-0.7],
[0,0],
[8,0.5],
[16,0.7],
[0,0],
[8,0.3],
[16,0.4],
[24,0.6],
[0,0],
[8,-0.1],
[16,-0.3],
[24,-0.2],
[32,-0.4],
[40,-0.5],
[0,0],
[8,-0.4],
[16,-0.5],
[24,-0.55],
[32,-0.55],
[40,-0.4],
[48,-0.7],
[58,-0.8]
],
"smps" : ["Weeks","Change From Baseline %"]
},
"z" : {
"Response" : ["Complete Response","Complete Response","Complete Response","Complete Response","Complete Response","Complete Response","Complete Response","Complete Response","Progressive Disease","Progressive Disease","Progressive Disease","Progressive Disease","Progressive Disease","Progressive Disease","Progressive Disease","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response"],
"Subject" : ["S101810","S101810","S101810","S101810","S101810","S101810","S101810","S101810","S103101","S103101","S103101","S103105","S103105","S103105","S103105","S103201","S103201","S103201","S103201","S103201","S103201","S103205","S103205","S103205","S103205","S103205","S103205","S103205","S103205"]
}
}
// Create the configuration for the graph
var config = {
"colorBy":"Response",
"graphType":"Scatter2D",
"legendBox":true,
"legendInside":true,
"legendPosition":"topRight",
"lineBy":"Subject",
"theme":"CanvasXpress",
"title":"Tumor Response by Week",
"xAxis":[
"Weeks"
],
"yAxis":[
"Change From Baseline %"
]
}
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config);
</script>
</body>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-spider-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-spider-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
colorBy="Response",
graphType="Scatter2D",
legendBox=TRUE,
legendInside=TRUE,
legendPosition="topRight",
lineBy="Subject",
theme="CanvasXpress",
title="Tumor Response by Week",
xAxis=list("Weeks"),
yAxis=list("Change From Baseline %")
)
