A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value. Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.
<!-- 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/canvasXpress.min.js"></script> <!-- 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" : { "Durable" : [false,false,false,true,false,false,false,false,true,false,true,true,false,true,true], "High Cap" : ["Arrow","Arrow","Arrow","Arrow","Arrow","Arrow","Arrow","Arrow","Arrow","Arrow",null,null,"Arrow",null,"Arrow"], "Response" : [20,10,10,-15,-15,-15,-20,-20,-22,-22,-25,-30,-42,-45,-50], "Stage" : ["Stage4","Stage2","Stage2","Stage1","Stage1","Stage1","Stage4","Stage4","Stage3","Stage3","Stage1","Stage3","Stage2","Stage2","Stage1"], "Status" : ["Partial Response","Partial Response","Partial Response","Complete Response","Complete Response","Partial Response","Partial Response","Partial Response","Partial Response","Partial Response","Complete Response","Complete Response","Complete Response","Complete Response","Complete Response"], "Subject" : ["S1","S2","S2","S3","S3","S3","S4","S4","S5","S5","S6","S7","S8","S9","S10"] }, "y" : { "data" : [ [8.3,12.6,12.6,12.5,12.5,12.5,13.5,13.5,14,14,9.5,11.5,7.2,17,18.5], [6,2.5,9.5,3.5,6.5,10.5,7,11.5,2.5,6,1,4.5,1.2,10.5,6.5], [null,7,null,4.5,8.5,null,10,null,3.5,null,9.5,11.5,null,17,13.5] ], "smps" : ["S1","S2","S3","S4","S5","S6","S7","S8","S9","S10","S11","S12","S13","S14","S15"], "vars" : ["high","start","end"] } } <-- Create the configuration for the graph --> var config = { "barType":"swimmer", "colorBy":"Stage", "graphOrientation":"vertical", "graphType":"Bar", "groupingFactors":[ "Subject" ], "objectBorderColor":"false", "objectColorTransparency":0.5, "smpOverlayProperties":{ "Durable":{ "position":"bottom" }, "Response":{ "position":"bottom", "thickness":100, "type":"Bar" } }, "smpOverlays":[ "Durable", "Response" ], "swimDurable":"Durable", "swimEnd":"end", "swimHigh":"high", "swimHighCap":"High Cap", "swimStart":"start", "swimStatus":"Status", "theme":"CanvasXpress", "title":"Tumor Response with Duration by Stage and Month", "xAxisTitle":"Duration of Treatment in Months" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); </script>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-swimmer-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/cX-swimmer-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, barType="swimmer", colorBy="Stage", graphOrientation="vertical", graphType="Bar", groupingFactors=list("Subject"), objectBorderColor=FALSE, objectColorTransparency=0.5, smpOverlayProperties=list(Durable=list(position="bottom"), Response=list(position="bottom", thickness=100, type="Bar")), smpOverlays=list("Durable", "Response"), swimDurable="Durable", swimEnd="end", swimHigh="high", swimHighCap="High Cap", swimStart="start", swimStatus="Status", theme="CanvasXpress", title="Tumor Response with Duration by Stage and Month", xAxisTitle="Duration of Treatment in Months" )