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" : { "Color" : ["A","A","A","B","B","B","C","C","C"] }, "y" : { "data" : [ [10,12,22,31,42,27,15,15,5] ], "smps" : ["Birth","Puberty","Death","Family","Friendship","Love","Work","Passion","Environment"], "vars" : ["Topic"] } } <-- Create the configuration for the graph --> var config = { "backgroundType":"solid", "barPath":"true", "barPathColor":"rgb(48,126,164)", "barPathTransparency":"1", "colorBy":"Color", "colors":[ "rgb(250,165,44)", "rgb(254,225,60)", "rgb(253,243,169)" ], "fontName":"Waltograph", "fontsExternal":[ { "name":"Waltograph", "url":"https://www.canvasxpress.org/assets/fonts/waltograph42.otf" } ], "graphType":"Bar", "marginBottom":"50", "marginLeft":"50", "marginRight":"50", "marginTop":"50", "maxTextSize":"80", "objectBorderColor":"rgba(255,255,255,0)", "plotBackgroundColor":"rgb(48,114,148)", "showLegend":"false", "smpTextColor":"rgb(255,255,255)", "smpTextScaleFontFactor":"2", "title":"Friendship, Love, Family", "titleAlign":"center", "titleColor":"rgb(254,225,60)", "titleScaleFontFactor":2.5, "widthFactor":1.1, "xAxis2Show":"false", "xAxisGridMajorShow":"false", "xAxisGridMinorShow":"false", "xAxisShow":"false" } <!-- 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-movies-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-movies-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, backgroundType="solid", barPath=TRUE, barPathColor="rgb(48,126,164)", barPathTransparency=1, colorBy="Color", colors=list("rgb(250,165,44)", "rgb(254,225,60)", "rgb(253,243,169)"), fontName="Waltograph", fontsExternal=list(list(name="Waltograph", url="https://www.canvasxpress.org/assets/fonts/waltograph42.otf")), graphType="Bar", marginBottom=50, marginLeft=50, marginRight=50, marginTop=50, maxTextSize=80, objectBorderColor="rgba(255,255,255,0)", plotBackgroundColor="rgb(48,114,148)", showLegend=FALSE, smpTextColor="rgb(255,255,255)", smpTextScaleFontFactor=2, title="Friendship, Love, Family", titleAlign="center", titleColor="rgb(254,225,60)", titleScaleFontFactor=2.5, widthFactor=1.1, xAxis2Show=FALSE, xAxisGridMajorShow=FALSE, xAxisGridMinorShow=FALSE, xAxisShow=FALSE )