Map Chart

Drawing a background map is the first step of any geospatial analysis. Once this background is available, you can color each region to get a choropleth map, add points or bubble to get a bubble map, reshape the region to get a cartogram, or show connection with a connection map.


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 = {
     "y" : {
        "data" : [
          [1134,914,799,2847],[473,376,355,1204],[329,350,340,1019],[281,307,310,898],[257,279,327,863],[252,221,243,716],[237,195,176,608],[204,216,236,656],[197,168,189,554],[192,165,162,519],[188,175,159,522],[177,151,174,502],[156,158,185,499],[150,168,192,510],[147,149,179,475],[136,167,198,501],[133,138,152,423],[121,112,104,337],[109,125,119,353],[89,94,122,305],[85,117,125,327],[78,93,143,314],[77,66,77,220],[67,82,94,243],[54,44,37,135],[52,89,83,224],[51,58,62,171],[46,64,44,154],[46,28,46,120],[45,80,79,204],[44,58,63,165],[39,24,28,91],[37,31,60,128],[34,44,40,118],[31,38,34,103],[30,36,63,129],[26,32,30,88],[26,32,29,87],[24,28,35,87],[22,35,20,77],[22,11,21,54],[21,25,28,74],[21,21,27,69],[20,32,44,96],[16,24,32,72],[16,17,23,56],[15,16,13,44],[13,24,31,68],[13,11,17,41],[12,16,8,36],[9,11,14,34],[9,8,16,33],[9,7,12,28],[8,7,17,32],[8,6,18,32],[7,13,20,40],[7,13,12,32],[7,11,24,42],[7,9,14,30],[6,6,13,25],[6,5,12,23],[6,2,6,14],[5,9,14,28],[5,7,12,24],[5,4,8,17],[4,14,10,28],[4,8,12,24],[4,2,7,13],[4,2,4,10],[3,9,13,25],[3,6,6,15],[3,5,11,19],[3,4,5,12],[3,4,1,8],[3,4,0,7],[3,3,4,10],[3,2,2,7],[3,1,2,6],[2,10,14,26],[2,7,4,13],[2,6,9,17],[2,6,6,14],[2,4,9,15],[2,4,3,9],[2,3,2,7],[2,2,6,10],[2,2,6,10],[2,1,0,3],[1,3,1,5],[1,3,0,4],[1,2,6,9],[1,2,2,5],[1,1,7,9],[1,1,3,5],[1,1,2,4],[1,1,2,4],[1,1,1,3],[1,1,1,3],[1,1,1,3],[1,1,0,2],[1,1,0,2],[1,1,0,2],[1,0,2,3],[1,0,1,2],[1,0,1,2],[1,0,1,2],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,7,4,11],[0,4,0,4],[0,3,7,10],[0,2,3,5],[0,2,2,4],[0,2,2,4],[0,2,0,2],[0,2,0,2],[0,1,4,5],[0,1,3,4],[0,1,3,4],[0,1,3,4],[0,1,2,3],[0,1,1,2],[0,1,1,2],[0,1,1,2],[0,1,1,2],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,0,2,2],[0,0,2,2],[0,0,2,2],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1],[0,0,1,1]
        ],
        "smps" : ["Gold","Silver","Bronze","Total"],
        "vars" : ["USA","URS","GER","GBR","FRA","ITA","CHN","SWE","RUS","GDR","NOR","HUN","JPN","AUS","FIN","CAN","NED","KOR","SUI","ROU","AUT","POL","CUB","FRG","EUN","BUL","TCH","ESP","NZL","DEN","BEL","TUR","UKR","GRE","KEN","BRA","RSA","YUG","CZE","JAM","ETH","ARG","IRI","BLR","KAZ","PRK","CRO","MEX","EST","SVK","IRL","THA","IND","GEO","UZB","SLO","INA","AZE","EGY","LTU","MAR","BAH","COL","TPE","ALG","LAT","POR","TUN","MIX","NGR","SRB","TTO","ANZ","ZIM","LUX","PAK","DOM","CMR","MGL","CHI","OAR","ARM","VEN","SCG","UGA","LIE","URU","BRN","VIE","PER","PUR","SGP","ISR","IOA","CRC","TJK","CIV","HKG","SYR","BDI","ECU","GRN","PAN","MOZ","SUR","UAE","FIJ","JOR","KOS","MAS","NAM","PHI","MDA","ISL","LBN","SRI","TAN","QAT","BOH","GHA","KGZ","KSA","HAI","NIG","UAR","ZAM","BOT","CYP","GAB","GUA","MNE","AHO","PAR","SAM","SEN","SUD","TGA","ISV","AFG","KUW","WIF","BAR","BER","DJI","ERI","GUY","IRQ","MRI","MON","MKD","TOG"]
     },
     "z" : {
        "Country" : ["United States","Soviet Union","Germany","Great Britain","France","Italy","People's Republic of China","Sweden","Russian Federation","East Germany","Norway","Hungary","Japan","Australia","Finland","Canada","Netherlands","Republic of Korea","Switzerland","Romania","Austria","Poland","Cuba","West Germany","Unified Team","Bulgaria","Czechoslovakia","Spain","New Zealand","Denmark","Belgium","Turkey","Ukraine","Greece","Kenya","Brazil","South Africa","Yugoslavia","Czech Republic","Jamaica","Ethiopia","Argentina","Islamic Republic of Iran","Belarus","Kazakhstan","Democratic People's Republic of Korea","Croatia","Mexico","Estonia","Slovakia","Ireland","Thailand","India","Georgia","Uzbekistan","Slovenia","Indonesia","Azerbaijan","Egypt","Lithuania","Morocco","The Bahamas","Colombia","Chinese Taipei","Algeria","Latvia","Portugal","Tunisia","Mixed team","Nigeria","Serbia","Trinidad and Tobago","Australasia","Zimbabwe","Luxembourg","Pakistan","Dominican Republic","Cameroon","Mongolia","Chile","Olympic Athletes from Russia","Armenia","Venezuela","Serbia and Montenegro","Uganda","Liechtenstein","Uruguay","Bahrain","Vietnam","Peru","Puerto Rico","Singapore","Israel","Individual Olympic Athletes","Costa Rica","Tajikistan","C�te d'Ivoire","Hong Kong, China","Syrian Arab Republic","Burundi","Ecuador","Grenada","Panama","Mozambique","Suriname","United Arab Emirates","Fiji","Jordan","Kosovo","Malaysia","Namibia","Philippines","Republic of Moldova","Iceland","Lebanon","Sri Lanka","United Republic of Tanzania","Qatar","Bohemia","Ghana","Kyrgyzstan","Kingdom of Saudi Arabia","Haiti","Niger","United Arab Republic","Zambia","Botswana","Cyprus","Gabon","Guatemala","Montenegro","Netherlands Antilles","Paraguay","Samoa","Senegal","Sudan","Tonga","United States Virgin Islands","Afghanistan","Kuwait","West Indies Federation","Barbados","Bermuda","Djibouti","Eritrea","Guyana","Iraq","Mauritius","Monaco","North Macedonia","Togo"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Total",
     "graphType":"Map",
     "legendPosition":"bottom",
     "mapId":"medals",
     "theme":"tableau",
     "title":"Total Number of Olympic Medals",
     "topoJSON":"https://www.canvasxpress.org/data/world.geo.json"
  }
  

  <!-- 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-olympicMedalsT-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-olympicMedalsT-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  colorBy="Total",
  graphType="Map",
  legendPosition="bottom",
  mapId="medals",
  theme="tableau",
  title="Total Number of Olympic Medals",
  topoJSON="https://www.canvasxpress.org/data/world.geo.json"
)