Bubble Chart

Buble plot or circular treemap allows to visualise a hierarchic architecture. It is an equivalent of a treemap or a dendrogram, where each node of the tree is represented as a circle and its sub-nodes are represented as circles inside of it. The size of each circle can be proportional to a specific value, what gives more insight to the plot. If only one level of hierarchy is displayed (no encapsulation), it becomes equivalent to a barplot. Instead of showing the value of each individual as a bar, it uses a circle. Bubble plots are not recommended if you need to precisely compare values of group. However, it shows very well how groups are organised in subgroups. It uses the space less efficiently than a treemap, but the hierarchy gets more obvious.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- 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" : {
        "Continent" : ["Asia","Europe","Africa","Europe","Africa","North America","North America","South America","Asia","North America","Oceania","Europe","Europe","North America","Asia","Asia","North America","Europe","Europe","North America","Africa","North America","Asia","South America","Europe","Africa","South America","North America","Asia","Europe","Africa","Africa","Asia","Africa","North America","Africa","Africa","Africa","South America","Asia","South America","Africa","Africa","Oceania","Central America","Europe","North America","Europe","Europe","Africa","Europe","Africa","North America","South America","Africa","Central America","Africa","Africa","Europe","Africa","Oceania","Europe","Europe","Oceania","Africa","Africa","Asia","Europe","Africa","Europe","North America","North America","Central America","Africa","Africa","South America","North America","Central America","Asia","Europe","Europe","Asia","Asia","Asia","Asia","Europe","Asia","Europe","North America","Asia","Asia","Asia","Africa","Oceania","Asia","Asia","Asia","Europe","Asia","Africa","Africa","Africa","Europe","Europe","Europe","Asia","Africa","Africa","Asia","Asia","Africa","Europe","Oceania","Africa","Africa","North America","Europe","Asia","Europe","Africa","Africa","Asia","Africa","Oceania","Asia","Europe","Oceania","Oceania","Central America","Africa","Africa","Oceania","Asia","Europe","Europe","Asia","Asia","Central America","Oceania","South America","South America","Asia","Europe","Europe","Africa","Europe","Asia","Africa","Africa","North America","North America","North America","North America","Oceania","Africa","Asia","Europe","Africa","Africa","Asia","Europe","Europe","Oceania","Africa","Asia","Africa","Europe","Asia","Africa","South America","Europe","Europe","Asia","Asia","Asia","Africa","Asia","Asia","Africa","Oceania","North America","Africa","Asia","Asia","Oceania","Africa","Europe","Asia","Europe","North America","South America","Asia","Oceania","South America","Asia","Asia","Africa","Africa"],
        "Country" : ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua and Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad","Chile","China","Colombia","Comoros","Congo","Cook Islands","Costa Rica","Croatia","Cuba","Cyprus","Czechia","Democratic Republic of Congo","Denmark","Djibouti","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Fiji","Finland","France","French Polynesia","Gabon","Gambia","Georgia","Germany","Ghana","Greece","Greenland","Grenada","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Israel","Italy","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Kiribati","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macao","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Moldova","Mongolia","Montenegro","Morocco","Mozambique","Myanmar","Namibia","Nauru","Nepal","Netherlands","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Niue","North Korea","North Macedonia","Norway","Oman","Pakistan","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Qatar","Romania","Russia","Rwanda","Saint Helena","Saint Kitts and Nevis","Saint Lucia","Saint Pierre and Miquelon","Saint Vincent and the Grenadines","Samoa","Sao Tome and Principe","Saudi Arabia","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Korea","South Sudan","Spain","Sri Lanka","Sudan","Suriname","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor","Togo","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","Uruguay","Uzbekistan","Vanuatu","Venezuela","Vietnam","Yemen","Zambia","Zimbabwe"]
     },
     "y" : {
        "data" : [
          [10.452666,5.402999,164.309295,0.46421,37.678605,0.147145,0.505574,185.029897,6.296603,0.943234,415.953947,66.719678,37.488394,2.03001,31.594487,85.718805,1.207134,61.871676,100.207836,0.612205,7.759753,0.648945,1.662172,22.345503,22.086102,6.815418,466.649304,0.173555,9.560399,43.551599,4.140342,0.568028,15.479031,7.566796,586.504635,0.609509,0.300478,1.008035,85.829114,9956.568523,92.228209,0.245927,3.518309,0.072706,8.249118,17.718646,26.084446,7.332762,104.411211,2.231343,34.65143,0.389975,25.305221,41.817989,251.460913,6.018265,5.90578,0.708769,17.710953,16.184949,2.123769,45.849349,331.725446,0.780633,4.803117,0.56324,9.862173,755.362342,14.479998,71.797869,0.511728,0.278597,19.411335,3.032114,0.308612,2.342628,3.366964,10.470701,42.505723,49.628491,3.674529,2591.323739,576.58439,755.402186,211.270294,38.803394,62.212641,348.085029,8.009662,1135.688,24.923803,319.647412,17.136703,0.068879,104.217567,10.16888,32.26245,7.859287,27.565431,2.425558,1.27446,45.205986,0.14375,13.669492,9.56852,2.216456,4.187806,1.470252,249.144498,1.565092,3.273276,1.531581,0.153065,3.934804,4.901611,451.080829,5.877784,64.508256,2.123147,65.367444,8.383478,26.095603,4.154302,0.049746,13.410432,160.170147,8.20904,35.080341,5.377193,2.093847,136.078346,0.007653,38.162935,6.980909,43.817657,71.029916,247.425382,12.096333,6.786146,8.103032,54.210259,138.924391,337.705742,51.482481,109.24468,76.951219,1691.360426,1.080098,0.011319,0.249014,0.362202,0.079232,0.264106,0.267864,0.126126,576.757836,46.0531,0.60536,0.987559,38.28806,36.087837,14.487844,0.298477,0.658329,634.934068,1.539884,269.654254,22.973233,22.372399,2.551817,41.766183,36.895485,25.877689,273.104667,7.473265,11.501889,292.452995,0.520422,3.167303,0.164545,37.865571,30.357093,419.194747,78.034724,0.01148,5.384767,231.694165,188.541366,380.138559,5424.881502,6.251839,113.93837,0.145412,129.596274,211.774129,9.945288,6.930094,11.340575]
        ],
        "smps" : ["AFG","ALB","DZA","AND","AGO","AIA","ATG","ARG","ARM","ABW","AUS","AUT","AZE","BHS","BHR","BGD","BRB","BLR","BEL","BLZ","BEN","BMU","BTN","BOL","BIH","BWA","BRA","VGB","BRN","BGR","BFA","BDI","KHM","CMR","CAN","CPV","CAF","TCD","CHL","CHN","COL","COM","COG","COK","CRI","HRV","CUB","CYP","CZE","COD","DNK","DJI","DOM","ECU","EGY","SLV","GNQ","ERI","EST","ETH","FJI","FIN","FRA","PYF","GAB","GMB","GEO","DEU","GHA","GRC","GRL","GRD","GTM","GIN","GNB","GUY","HTI","HND","HKG","HUN","ISL","IND","IDN","IRN","IRQ","IRL","ISR","ITA","JAM","JPN","JOR","KAZ","KEN","KIR","KWT","KGZ","LAO","LVA","LBN","LSO","LBR","LBY","LIE","LTU","LUX","MAC","MDG","MWI","MYS","MDV","MLI","MLT","MHL","MRT","MUS","MEX","MDA","MNG","MNE","MAR","MOZ","MMR","NAM","NRU","NPL","NLD","NCL","NZL","NIC","NER","NGA","NIU","PRK","MKD","NOR","OMN","PAK","PAN","PNG","PRY","PER","PHL","POL","PRT","QAT","ROU","RUS","RWA","SHN","KNA","LCA","SPM","VCT","WSM","STP","SAU","SRB","SYC","SLE","SGP","SVK","SVN","SLB","SOM","KOR","SSD","ESP","LKA","SDN","SUR","SWE","CHE","SYR","TWN","TJK","TZA","THA","TLS","TGO","TON","TTO","TUN","TUR","TKM","TUV","UGA","UKR","ARE","GBR","USA","URY","UZB","VUT","VEN","VNM","YEM","ZMB","ZWE"],
        "vars" : ["CO2"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "bubbleLabel":"auto",
     "circularType":"bubble",
     "colorBy":"Continent",
     "graphType":"Circular",
     "hierarchy":[
        "Country"
     ],
     "legendColumns":"4",
     "legendPosition":"bottom",
     "theme":"paulTol",
     "title":"Annual CO2 Emmisions in 2018"
  }
  

  <!-- 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-CO2-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-CO2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  bubbleLabel="auto",
  circularType="bubble",
  colorBy="Continent",
  graphType="Circular",
  hierarchy=list("Country"),
  legendColumns=4,
  legendPosition="bottom",
  theme="paulTol",
  title="Annual CO2 Emmisions in 2018"
)