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 = { "y" : { "data" : [ [1,3,5,3,3,4,10,17,11,3] ], "smps" : ["30s","40s","50s","60s","70s","80s","90s","00s","10s","20s"], "vars" : ["Total"] } } <-- Create the configuration for the graph --> var config = { "background":"rgb(48,114,148)", "backgroundType":"solid", "colorScheme":"Blues", "colors":[ "rgb(75,179,216)" ], "fontName":"Waltograph", "fontsExternal":[ { "name":"Waltograph", "url":"https://www.canvasxpress.org/assets/fonts/waltograph42.otf" } ], "graphOrientation":"vertical", "graphType":"Bar", "marginBottom":"50", "marginLeft":"50", "marginRight":"50", "marginTop":"50", "maxTextSize":"80", "objectBorderColor":"rgba(255,255,255,0)", "showLegend":"false", "smpLabelColor":"rgb(255,255,255)", "smpLabelRotate":"90", "smpLabelScaleFontFactor":1.5, "title":"Animation Movies", "titleColor":"rgb(255,255,255)", "titleScaleFontFactor":2.5, "widthFactor":1.1, "xAxis2Show":"false", "xAxisShow":"false", "xAxisTicksMajorShow":"false", "xAxisTicksMinorShow":"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-animationMovies-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, background="rgb(48,114,148)", backgroundType="solid", colorScheme="Blues", colors=list("rgb(75,179,216)"), fontName="Waltograph", fontsExternal=list(list(name="Waltograph", url="https://www.canvasxpress.org/assets/fonts/waltograph42.otf")), graphOrientation="vertical", graphType="Bar", marginBottom=50, marginLeft=50, marginRight=50, marginTop=50, maxTextSize=80, objectBorderColor="rgba(255,255,255,0)", showLegend=FALSE, smpLabelColor="rgb(255,255,255)", smpLabelRotate=90, smpLabelScaleFontFactor=1.5, title="Animation Movies", titleColor="rgb(255,255,255)", titleScaleFontFactor=2.5, widthFactor=1.1, xAxis2Show=FALSE, xAxisShow=FALSE, xAxisTicksMajorShow=FALSE, xAxisTicksMinorShow=FALSE )