Bar Graph & Treemap for Data Comparison
Bar graphs are visual tools used to represent data using rectangular bars of varying heights or lengths. The length of each bar is proportional to the value it represents, making it easy to compare different categories or groups. They are ideal for showcasing discrete data and making comparisons between categories readily apparent. Variations include vertical and horizontal bar graphs, clustered bar graphs for showing multiple data sets, and stacked bar graphs for showing components of a whole. Creating effective bar graphs involves selecting appropriate scales, labeling axes clearly, and using color or patterns to improve understanding. They are frequently used across various fields, from business reports to scientific presentations.
<html>
<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" : {
"GNI" : [106140,103630,92200,88120,76270,75990,64540,61610,61310,55200,55150,51890,51630,49670,49300,48420,47640,46350,47260,46550,44600,43430,42960,42000,43270,41070,40320,37320,35320,34270,29440,27090,26370,25140,23580,22680,21360,21060,20980,21000,20070,19310,19030,18370,16870,17750,16350,15430,15280,15310,14920,14910,14100,13690,13480,13340,13300,13220,12980,12500,11850,11530,11130,11120,11110,10830,10210,10120,10030,9950,9870,9720,9630,9520,8020,7970,7910,7820,7620,7590,7400,7340,7320,7260,7240,6930,6800,6610,6500,6410,6360,7120,6090,6040,5820,5780,5720,5630,5490,5160,5150,5150,4870,4760,4350,4450,4400,4390,4280,4260,4230,4060,4020,3990,3940,3920,3720,3630,3560,3550,3500,3460,3450,3430,3200,3160,3070,3060,3050,2970,2950,2870,2720,2680,2560,2370,2270,2240,2090,1890,1870,1830,1710,1680,1670,1660,1590,1570,1450,1400,1300,1350,1330,1290,1270,1270,1250,1080,1080,1050,1020,980,970,920,890,840,820,790,730,700,700,700,680,670,650,600,570,550,550,470,500,440,410,380,370,320,270,250],
"ISO3" : ["BMU","NOR","QAT","CHE","MAC","LUX","AUS","SWE","DNK","USA","SGP","NLD","CAN","AUT","KWT","FIN","DEU","ISL","BEL","IRL","ARE","GBR","FRA","JPN","ADO","NZL","HKG","BRN","ISR","ITA","ESP","KOR","CYP","SAU","SVN","GRC","PRT","BHR","BHS","MLT","TTO","PRI","EST","CZE","OMN","SVK","URY","LTU","LVA","BRB","KNA","CHL","SYC","POL","ARG","HUN","ATG","RUS","HRV","VEN","KAZ","BRA","PAN","MYS","PLW","TUR","GNQ","CRI","LBN","SUR","MEX","GAB","MUS","ROU","TKM","COL","GRD","LBY","BGR","AZE","CHN","BLR","MNE","LCA","BWA","DMA","ZAF","VCT","IRQ","MDV","PER","IRN","ECU","DOM","SRB","THA","TUV","NAM","DZA","JOR","JAM","MKD","FJI","BIH","BLZ","ALB","PRY","MHL","MNG","TON","TUN","WSM","ARM","KSV","GUY","SLV","GEO","IDN","UKR","SWZ","PHL","LKA","CPV","GTM","FSM","VUT","MAR","WBG","EGY","NGA","KIR","BOL","COG","TMP","MDA","BTN","HND","PNG","UZB","VNM","NIC","SLB","SDN","ZMB","STP","LAO","GHA","IND","CIV","PAK","YEM","CMR","LSO","KEN","MRT","MMR","KGZ","BGD","TJK","SEN","KHM","TCD","SSD","TZA","BEN","ZWE","HTI","COM","NPL","BFA","RWA","SLE","AFG","UGA","MLI","MOZ","TGO","ETH","GNB","GIN","GMB","MDG","NER","COD","LBR","CAF","BDI","MWI"],
"Id" : [3,4,5,6,7,8,10,11,12,14,15,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194],
"continent" : ["North America","Europe","Asia","Europe","Asia","Europe","Oceania","Europe","Europe","North America","Asia","Europe","North America","Europe","Asia","Europe","Europe","Europe","Europe","Europe","Asia","Europe","Europe","Asia","Europe","Oceania","Asia","Asia","Asia","Europe","Europe","Asia","Asia","Asia","Europe","Europe","Europe","Asia","North America","Europe","North America","North America","Europe","Europe","Asia","Europe","South America","Europe","Europe","North America","North America","South America","Seven seas","Europe","South America","Europe","North America","Europe","Europe","South America","Asia","South America","North America","Asia","Oceania","Asia","Africa","North America","Asia","South America","North America","Africa","Seven seas","Europe","Asia","South America","North America","Africa","Europe","Asia","Asia","Europe","Europe","North America","Africa","North America","Africa","North America","Asia","Seven seas","South America","Asia","South America","North America","Europe","Asia","Oceania","Africa","Africa","Asia","North America","Europe","Oceania","Europe","North America","Europe","South America","Oceania","Asia","Oceania","Africa","Oceania","Asia","Europe","South America","North America","Asia","Asia","Europe","Africa","Asia","Asia","Africa","North America","Oceania","Oceania","Africa","Asia","Africa","Africa","Oceania","South America","Africa","Asia","Europe","Asia","North America","Oceania","Asia","Asia","North America","Oceania","Africa","Africa","Africa","Asia","Africa","Asia","Africa","Asia","Asia","Africa","Africa","Africa","Africa","Asia","Asia","Asia","Asia","Africa","Asia","Africa","Africa","Africa","Africa","Africa","North America","Africa","Asia","Africa","Africa","Africa","Asia","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa","Africa"]
},
"y" : {
"data" : [
[67837,4676305,833285,7604467,559846,491775,21262641,9059651,5500510,313973000,4657542,16715999,33487208,8210281,2691158,5250275,82329758,306694,10414336,4203200,4798491,62262000,64057792,127078679,79218,4213418,7061200,388190,7233701,58126212,40525002,48508972,531640,28686633,2005692,10737428,10707924,727785,309156,405165,1310000,3971020,1299371,10211904,3418085,5463046,3494382,3555179,2231503,284589,40131,16601707,87476,38482919,40913584,9905596,85632,140041247,4489409,26814843,15399437,198739269,3360474,25715819,20796,76805524,650702,4253877,4017095,481267,111211789,1514993,1284264,22215421,4884887,45644023,90739,6310434,7204687,8238672,1338612970,9648533,672180,160267,1990876,72660,49052489,104574,31129225,396334,29546963,66429284,14573101,9650054,7379339,65905410,10640,2108665,34178188,6342948,2825928,2066718,944720,4613414,307899,3639453,6995655,64522,3041142,120898,10486339,219998,2967004,1859203,772298,7185218,4615807,240271522,45700395,1123913,97976603,21324791,429474,13276517,107434,218519,34859364,4550368,83082869,149229090,112850,9775246,4012809,1201542,4320748,691141,7792854,6057263,27606007,86967524,5891199,595613,25946220,11862740,212679,6834942,23832495,1166079220,20617068,176242949,23822783,18879301,2130819,39002772,3129486,48137741,5431747,156050883,7349145,13711597,14494293,10329208,10625176,41048532,8791832,12619600,9035536,752438,28563377,15746232,10473282,6440053,28400000,32369558,12666987,21669278,6019877,85237338,1533964,10057975,1782893,20653556,15306252,68692542,3441790,4511488,8988091,14268711]
],
"smps" : ["Bermuda","Norway","Qatar","Switzerland","Macao SAR, China","Luxembourg","Australia","Sweden","Denmark","United States","Singapore","Netherlands","Canada","Austria","Kuwait","Finland","Germany","Iceland","Belgium","Ireland","United Arab Emirates","United Kingdom","France","Japan","Andorra","New Zealand","Hong Kong SAR, China","Brunei Darussalam","Israel","Italy","Spain","Korea, Rep.","Cyprus","Saudi Arabia","Slovenia","Greece","Portugal","Bahrain","Bahamas, The","Malta","Trinidad and Tobago","Puerto Rico","Estonia","Czech Republic","Oman","Slovak Republic","Uruguay","Lithuania","Latvia","Barbados","St. Kitts and Nevis","Chile","Seychelles","Poland","Argentina","Hungary","Antigua & Barbuda","Russian Federation","Croatia","Venezuela, RB","Kazakhstan","Brazil","Panama","Malaysia","Palau","Turkey","Equatorial Guinea","Costa Rica","Lebanon","Suriname","Mexico","Gabon","Mauritius","Romania","Turkmenistan","Colombia","Grenada","Libya","Bulgaria","Azerbaijan","China","Belarus","Montenegro","St. Lucia","Botswana","Dominica","South Africa","St. Vincent and the Grenadines","Iraq","Maldives","Peru","Iran, Islamic Rep.","Ecuador","Dominican Republic","Serbia","Thailand","Tuvalu","Namibia","Algeria","Jordan","Jamaica","Macedonia, FYR","Fiji","Bosnia and Herzegovina","Belize","Albania","Paraguay","Marshall Islands","Mongolia","Tonga","Tunisia","Samoa","Armenia","Kosovo","Guyana","El Salvador","Georgia","Indonesia","Ukraine","Swaziland","Philippines","Sri Lanka","Cabo Verde","Guatemala","Micronesia, Fed. Sts.","Vanuatu","Morocco","West Bank and Gaza","Egypt, Arab Rep.","Nigeria","Kiribati","Bolivia","Congo, Rep.","Timor-Leste","Moldova","Bhutan","Honduras","Papua New Guinea","Uzbekistan","Vietnam","Nicaragua","Solomon Islands","Sudan","Zambia","Sao Tome and Principe","Lao PDR","Ghana","India","Cote d'Ivoire","Pakistan","Yemen, Rep.","Cameroon","Lesotho","Kenya","Mauritania","Myanmar","Kyrgyz Republic","Bangladesh","Tajikistan","Senegal","Cambodia","Chad","South Sudan","Tanzania","Benin","Zimbabwe","Haiti","Comoros","Nepal","Burkina Faso","Rwanda","Sierra Leone","Afghanistan","Uganda","Mali","Mozambique","Togo","Ethiopia","Guinea-Bissau","Guinea","Gambia, The","Madagascar","Niger","Congo, Dem. Rep.","Liberia","Central African Republic","Burundi","Malawi"],
"vars" : ["population"]
}
}
// Create the configuration for the graph
var config = {
"axisAlgorithm" : "rPretty",
"colorBy" : "GNI",
"graphOrientation" : "vertical",
"graphType" : "Stacked",
"groupingFactors" : ["continent"],
"legendInside" : true,
"legendPosition" : "right",
"objectBorderColor" : "rgb(0,0,0)",
"smpTextRotate" : 45,
"subtitle" : "2014 Census",
"title" : "Country Population colored by Gross National Income",
"treemapBy" : ["ISO3"],
"xAxis": ["population"],
"widthFactor" : 4
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-stacked1-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/r/cX-stacked1-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
axisAlgorithm="rPretty",
colorBy="GNI",
graphOrientation="vertical",
graphType="Stacked",
groupingFactors=list("continent"),
legendInside=TRUE,
legendPosition="right",
objectBorderColor="rgb(0,0,0)",
smpTextRotate=45,
subtitle="2014 Census",
title="Country Population colored by Gross National Income",
treemapBy=list("ISO3"),
widthFactor=4,
xAxis=list("population")
)
