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.
<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" : { "Factor1" : ["F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C"], "Factor2" : ["F2-a","F2-a","F2-a","F2-a","F2-b","F2-b","F2-b","F2-b","F2-c","F2-c","F2-c","F2-c","F2-d","F2-d","F2-d","F2-d","F2-e","F2-e","F2-e","F2-e","F2-f","F2-f","F2-f","F2-f"], "Factor3" : ["F3-i","F3-i","F3-j","F3-j","F3-k","F3-k","F3-l","F3-l","F3-m","F3-m","F3-n","F3-n","F3-o","F3-o","F3-p","F3-p","F3-q","F3-q","F3-r","F3-r","F3-s","F3-s","F3-t","F3-t"], "Factor4" : ["F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b"], "Factor5" : ["F5-a","F5-b","F5-c","F5-d","F5-e","F5-f","F5-g","F5-h","F5-i","F5-j","F5-k","F5-l","F5-m","F5-n","F5-o","F5-p","F5-q","F5-r","F5-s","F5-t","F5-u","F5-v","F5-w","F5-x"], "Factor6" : [1,2,3,4,5,6,7,8,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8] }, "y" : { "data" : [ [2,4,6,8,3,5,7,9,2,4,6,8,3,5,7,9,3,5,7,9,4,6,8,10], [4,6,8,10,3,5,7,9,2,4,6,8,1,3,5,7,2,4,6,8,3,5,7,9], [3,5,7,9,4,6,8,10,3,5,7,9,2,4,6,8,4,6,8,10,3,5,7,9] ], "smps" : ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8","Smp9","Smp10","Smp11","Smp12","Smp13","Smp14","Smp15","Smp16","Smp17","Smp18","Smp19","Smp20","Smp21","Smp22","Smp23","Smp24"], "vars" : ["Var1","Var2","Var3"] } } // Create the configuration for the graph var config = { "colorScheme":"Blues", "foreground":"rgb(0,0,0)", "graphOrientation":"vertical", "graphType":"Stacked", "groupingFactors":[ "Factor1" ], "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)", "legendKeyBackgroundColor":"rgba(255,255,255,0)", "objectBorderColor":"rgb(0,0,0)", "sampleSpaceFactor":"1", "showTransition":false, "title":"Random Data", "treemapBy":[ "Factor2", "Factor3" ] } // 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-stacked2-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-stacked2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, colorScheme="Blues", foreground="rgb(0,0,0)", graphOrientation="vertical", graphType="Stacked", groupingFactors=list("Factor1"), legendKeyBackgroundBorderColor="rgba(255,255,255,0)", legendKeyBackgroundColor="rgba(255,255,255,0)", objectBorderColor="rgb(0,0,0)", sampleSpaceFactor=1, showTransition=FALSE, title="Random Data", treemapBy=list("Factor2", "Factor3") )