Color-Coded Treemap for Data Exploration
Treemap graphs are a powerful data visualization tool that displays hierarchical data as a set of nested rectangles. Each rectangle size corresponds to a value, allowing for quick comparisons of proportions within a dataset. They are ideal for showing parts of a whole, such as market share, budget allocation, or file system usage. The hierarchical nature allows users to easily drill down into details. Effective treemaps utilize color and labeling strategically to enhance readability. Color-coding can highlight different categories or groups, while clear labels prevent visual clutter. These graphs are exceptionally useful for exploring complex datasets and identifying key contributors or outliers. Interactive treemaps provide even greater insight, enabling users to zoom, filter, and explore the data dynamically.
<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 = {
"colorBy" : "GNI",
"decorations" : {
"marker" : [{"align" : "center","baseline" : "middle","color" : "red","sample" : "Norway","text" : "Norway is the country\nwith the largest GNI\naccording to 2014 census","variable" : "population","x" : 0.65,"y" : 0.7},{"align" : "center","baseline" : "middle","color" : "red","sample" : "China","text" : "China is the country with\nthe largest population\naccording to 2014 census","variable" : "population","x" : 0.15,"y" : 0.1}]
},
"graphType" : "Treemap",
"objectBorderColor" : "rgb(0,0,0)",
"showDecorations" : false,
"showTransition" : false,
"theme" : "CanvasXpress",
"title" : "Population colored by Gross National Income 2014",
"xAxis" : ["population"]
}
// 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);
// Functions after rendering graph
cX.groupSamples(["continent"]);
</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,
colorBy="GNI",
decorations=list(marker=list(list(align="center", baseline="middle", color="red", sample="Norway", text="Norway is the country\nwith the largest GNI\naccording to 2014 census", variable="population", x=0.65, y=0.7), list(align="center", baseline="middle", color="red", sample="China", text="China is the country with\nthe largest population\naccording to 2014 census", variable="population", x=0.15, y=0.1))),
graphType="Treemap",
objectBorderColor="rgb(0,0,0)",
showDecorations=FALSE,
showTransition=FALSE,
theme="CanvasXpress",
title="Population colored by Gross National Income 2014",
xAxis=list("population"),
afterRender=list(list("groupSamples", list("continent")))
)
