Grouped Bubble Plot Visualization

Bubble graphs, also known as bubble charts, are a type of chart that displays data as circles. The size of each circle represents the magnitude of a third variable. They are useful for visualizing relationships between three variables, making complex datasets more understandable. Creating effective bubble graphs requires careful consideration of color, size scaling, and labeling. Clear labeling is crucial to avoid confusion. Interactive versions allow users to explore data points individually for deeper insights. Bubble charts find applications across various fields, from financial analysis to scientific research.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<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" : {
            "Code" : ["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"],
            "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 & 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 Darussalam","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 the 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","Lao People's Democratic Republic","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","Democratic People's Republic of Korea","The former Yugoslav Republic of 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","Republic of Korea","South Sudan","Spain","Sri Lanka","Sudan","Suriname","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor-Leste","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" : ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & 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 Darussalam","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 the 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","Lao People's Democratic Republic","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","Democratic People's Republic of Korea","The former Yugoslav Republic of 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","Republic of Korea","South Sudan","Spain","Sri Lanka","Sudan","Suriname","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor-Leste","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"],
            "vars" : ["CO2"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "bubbleColor" : "rgba(0,0,0,0)",
         "bubbleLabel" : "first",
         "bubbleLabelLineType" : "line",
         "bubbleLabelPosition" : "top",
         "bubbleOutlineColor" : "rgba(0,0,0,0)",
         "circularType" : "bubble",
         "colorBy" : "Continent",
         "colorScheme" : "Behance",
         "graphType" : "Circular",
         "hierarchy" : ["Continent","Country"],
         "legendColumns" : 4,
         "legendPosition" : "top",
         "showLegend" : true,
         "title" : "Annual CO2 Emmisions in 2018",
         "xAxis" : ["CO2"]
      }

      // 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.modifyLabelCoordinates("Central America", -100, 100, true);
      cX.modifyLabelCoordinates("South America", 10, -50, true);
      cX.modifyLabelCoordinates("North America", 10, -50);

    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/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/r/cX-CO2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  bubbleColor="rgba(0,0,0,0)",
  bubbleLabel="first",
  bubbleLabelLineType="line",
  bubbleLabelPosition="top",
  bubbleOutlineColor="rgba(0,0,0,0)",
  circularType="bubble",
  colorBy="Continent",
  colorScheme="Behance",
  graphType="Circular",
  hierarchy=list("Continent", "Country"),
  legendColumns=4,
  legendPosition="top",
  showLegend=TRUE,
  title="Annual CO2 Emmisions in 2018",
  xAxis=list("CO2"),
  afterRender=list(list("modifyLabelCoordinates", list(list("Central America", -100, 100, true))), list("modifyLabelCoordinates", list(list("South America", 10, -50, true))), list("modifyLabelCoordinates", list(list("North America", 10, -50))))
)