@amcharts/amcharts5 5.0.0-beta.3 → 5.0.0-beta.30

package/examples/typescript/map-with-bubbles/index.ts

@@ -4,41 +4,57 @@ import am5geodata_worldLow from "@amcharts/amcharts5/geodata/worldLow";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
 /**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
+ * ---------------------------------------
+ * This demo was created using amCharts 5.
+ *
+ * For more information visit:
+ * https://www.amcharts.com/
+ *
+ * Documentation is available at:
+ * https://www.amcharts.com/docs/v5/
+ * ---------------------------------------
  */
-const root = am5.Root.new("chartdiv");
 
-/**
- * Set themes
- * https://www.amcharts.com/docs/v5/concepts/themes/
- */
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+const root = am5.Root.new("chartdiv");
 
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([am5themes_Animated.new(root)]);
 
-/**
- * Create the map chart
- * https://www.amcharts.com/docs/v5/charts/map-chart/
- */
+// Create the map chart
+// https://www.amcharts.com/docs/v5/charts/map-chart/
 const chart = root.container.children.push(
   am5map.MapChart.new(root, {
-    panX: "translateX",
-    panY: "translateY",
+    panX: "rotateX",
+    panY: "rotateY",
     projection: am5map.geoMercator()
   })
 );
 
-/**
- * Create main polygon series for countries
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
- */
+// Create series for background fill
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+const backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
+backgroundSeries.mapPolygons.template.setAll({
+  fill: root.interfaceColors.get("alternativeBackground"),
+  fillOpacity: 0,
+  strokeOpacity: 0
+});
+// Add background polygo
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+backgroundSeries.data.push({
+  geometry: am5map.getGeoRectangle(90, 180, -90, -180)
+});
+
+// Create main polygon series for countries
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
 const polygonSeries = chart.series.push(
   am5map.MapPolygonSeries.new(root, {
-    geoJSON: am5geodata_worldLow as any
+    geoJSON: am5geodata_worldLow
   })
 );
+
 polygonSeries.mapPolygons.template.setAll({
   fill: root.interfaceColors.get("alternativeBackground"),
   fillOpacity: 0.15,
@@ -46,12 +62,9 @@ polygonSeries.mapPolygons.template.setAll({
   stroke: root.interfaceColors.get("background")
 });
 
-
-/**
- * Create polygon series for circles
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
- */
-const circleTemplate = am5.Template.new<am5.Circle>({
+// Create polygon series for circles
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
+const circleTemplate = am5.Template.new({
   tooltipText: "{name}: {value}"
 });
 
@@ -63,200 +76,1049 @@ const bubbleSeries = chart.series.push(
   })
 );
 
-bubbleSeries.bullets.push(() => {
+bubbleSeries.bullets.push(function () {
   return am5.Bullet.new(root, {
-    sprite: am5.Circle.new(root, {
-      radius: 10,
-      templateField: "circleTemplate"
-    }, circleTemplate)
+    sprite: am5.Circle.new(
+      root,
+      {
+        radius: 10,
+        templateField: "circleTemplate"
+      },
+      circleTemplate
+    )
   });
 });
 
-bubbleSeries.set("heatRules", [{
-  target: circleTemplate,
-  min: 3,
-  max: 30,
-  key: "radius",
-  dataField: "value"
-}]);
+bubbleSeries.set("heatRules", [
+  {
+    target: circleTemplate,
+    min: 3,
+    max: 30,
+    key: "radius",
+    dataField: "value"
+  }
+]);
 
 const colors = am5.ColorSet.new(root, {});
 
 bubbleSeries.data.setAll([
-  { "id": "AF", "name": "Afghanistan", "value": 32358260, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "AL", "name": "Albania", "value": 3215988, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "DZ", "name": "Algeria", "value": 35980193, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "AO", "name": "Angola", "value": 19618432, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "AR", "name": "Argentina", "value": 40764561, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "AM", "name": "Armenia", "value": 3100236, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "AU", "name": "Australia", "value": 22605732, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "AT", "name": "Austria", "value": 8413429, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "AZ", "name": "Azerbaijan", "value": 9306023, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "BH", "name": "Bahrain", "value": 1323535, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "BD", "name": "Bangladesh", "value": 150493658, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "BY", "name": "Belarus", "value": 9559441, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "BE", "name": "Belgium", "value": 10754056, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "BJ", "name": "Benin", "value": 9099922, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "BT", "name": "Bhutan", "value": 738267, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "BO", "name": "Bolivia", "value": 10088108, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "BA", "name": "Bosnia and Herzegovina", "value": 3752228, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "BW", "name": "Botswana", "value": 2030738, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "BR", "name": "Brazil", "value": 196655014, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "BN", "name": "Brunei", "value": 405938, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "BG", "name": "Bulgaria", "value": 7446135, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "BF", "name": "Burkina Faso", "value": 16967845, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "BI", "name": "Burundi", "value": 8575172, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "KH", "name": "Cambodia", "value": 14305183, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "CM", "name": "Cameroon", "value": 20030362, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CA", "name": "Canada", "value": 34349561, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "CV", "name": "Cape Verde", "value": 500585, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CF", "name": "Central African Rep.", "value": 4486837, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "TD", "name": "Chad", "value": 11525496, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CL", "name": "Chile", "value": 17269525, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "CN", "name": "China", "value": 1347565324, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "CO", "name": "Colombia", "value": 46927125, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "KM", "name": "Comoros", "value": 753943, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CD", "name": "Congo, Dem. Rep.", "value": 67757577, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CG", "name": "Congo, Rep.", "value": 4139748, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "CR", "name": "Costa Rica", "value": 4726575, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "CI", "name": "Cote d'Ivoire", "value": 20152894, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "HR", "name": "Croatia", "value": 4395560, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "CU", "name": "Cuba", "value": 11253665, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "CY", "name": "Cyprus", "value": 1116564, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "CZ", "name": "Czech Rep.", "value": 10534293, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "DK", "name": "Denmark", "value": 5572594, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "DJ", "name": "Djibouti", "value": 905564, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "DO", "name": "Dominican Rep.", "value": 10056181, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "EC", "name": "Ecuador", "value": 14666055, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "EG", "name": "Egypt", "value": 82536770, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "SV", "name": "El Salvador", "value": 6227491, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "GQ", "name": "Equatorial Guinea", "value": 720213, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "ER", "name": "Eritrea", "value": 5415280, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "EE", "name": "Estonia", "value": 1340537, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "ET", "name": "Ethiopia", "value": 84734262, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "FJ", "name": "Fiji", "value": 868406, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "FI", "name": "Finland", "value": 5384770, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "FR", "name": "France", "value": 63125894, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "GA", "name": "Gabon", "value": 1534262, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "GM", "name": "Gambia", "value": 1776103, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "GE", "name": "Georgia", "value": 4329026, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "DE", "name": "Germany", "value": 82162512, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "GH", "name": "Ghana", "value": 24965816, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "GR", "name": "Greece", "value": 11390031, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "GT", "name": "Guatemala", "value": 14757316, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "GN", "name": "Guinea", "value": 10221808, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "GW", "name": "Guinea-Bissau", "value": 1547061, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "GY", "name": "Guyana", "value": 756040, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "HT", "name": "Haiti", "value": 10123787, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "HN", "name": "Honduras", "value": 7754687, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "HK", "name": "Hong Kong, China", "value": 7122187, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "HU", "name": "Hungary", "value": 9966116, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "IS", "name": "Iceland", "value": 324366, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "IN", "name": "India", "value": 1241491960, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "ID", "name": "Indonesia", "value": 242325638, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "IR", "name": "Iran", "value": 74798599, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "IQ", "name": "Iraq", "value": 32664942, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "IE", "name": "Ireland", "value": 4525802, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "IL", "name": "Israel", "value": 7562194, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "IT", "name": "Italy", "value": 60788694, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "JM", "name": "Jamaica", "value": 2751273, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "JP", "name": "Japan", "value": 126497241, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "JO", "name": "Jordan", "value": 6330169, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "KZ", "name": "Kazakhstan", "value": 16206750, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "KE", "name": "Kenya", "value": 41609728, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "KP", "name": "Korea, Dem. Rep.", "value": 24451285, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "KR", "name": "Korea, Rep.", "value": 48391343, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "KW", "name": "Kuwait", "value": 2818042, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "KG", "name": "Kyrgyzstan", "value": 5392580, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "LA", "name": "Laos", "value": 6288037, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "LV", "name": "Latvia", "value": 2243142, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "LB", "name": "Lebanon", "value": 4259405, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "LS", "name": "Lesotho", "value": 2193843, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "LR", "name": "Liberia", "value": 4128572, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "LY", "name": "Libya", "value": 6422772, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "LT", "name": "Lithuania", "value": 3307481, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "LU", "name": "Luxembourg", "value": 515941, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "MK", "name": "Macedonia, FYR", "value": 2063893, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "MG", "name": "Madagascar", "value": 21315135, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MW", "name": "Malawi", "value": 15380888, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MY", "name": "Malaysia", "value": 28859154, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "ML", "name": "Mali", "value": 15839538, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MR", "name": "Mauritania", "value": 3541540, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MU", "name": "Mauritius", "value": 1306593, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MX", "name": "Mexico", "value": 114793341, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "MD", "name": "Moldova", "value": 3544864, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "MN", "name": "Mongolia", "value": 2800114, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "ME", "name": "Montenegro", "value": 632261, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "MA", "name": "Morocco", "value": 32272974, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MZ", "name": "Mozambique", "value": 23929708, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "MM", "name": "Myanmar", "value": 48336763, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "NA", "name": "Namibia", "value": 2324004, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "NP", "name": "Nepal", "value": 30485798, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "NL", "name": "Netherlands", "value": 16664746, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "NZ", "name": "New Zealand", "value": 4414509, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "NI", "name": "Nicaragua", "value": 5869859, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "NE", "name": "Niger", "value": 16068994, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "NG", "name": "Nigeria", "value": 162470737, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "NO", "name": "Norway", "value": 4924848, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "OM", "name": "Oman", "value": 2846145, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "PK", "name": "Pakistan", "value": 176745364, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "PA", "name": "Panama", "value": 3571185, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "PG", "name": "Papua New Guinea", "value": 7013829, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "PY", "name": "Paraguay", "value": 6568290, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "PE", "name": "Peru", "value": 29399817, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "PH", "name": "Philippines", "value": 94852030, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "PL", "name": "Poland", "value": 38298949, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "PT", "name": "Portugal", "value": 10689663, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "PR", "name": "Puerto Rico", "value": 3745526, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "QA", "name": "Qatar", "value": 1870041, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "RO", "name": "Romania", "value": 21436495, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "RU", "name": "Russia", "value": 142835555, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "RW", "name": "Rwanda", "value": 10942950, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "SA", "name": "Saudi Arabia", "value": 28082541, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "SN", "name": "Senegal", "value": 12767556, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "RS", "name": "Serbia", "value": 9853969, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "SL", "name": "Sierra Leone", "value": 5997486, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "SG", "name": "Singapore", "value": 5187933, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "SK", "name": "Slovak Republic", "value": 5471502, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "SI", "name": "Slovenia", "value": 2035012, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "SB", "name": "Solomon Islands", "value": 552267, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "SO", "name": "Somalia", "value": 9556873, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "ZA", "name": "South Africa", "value": 50459978, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "ES", "name": "Spain", "value": 46454895, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "LK", "name": "Sri Lanka", "value": 21045394, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "SD", "name": "Sudan", "value": 34735288, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "SR", "name": "Suriname", "value": 529419, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "SZ", "name": "Swaziland", "value": 1203330, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "SE", "name": "Sweden", "value": 9440747, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "CH", "name": "Switzerland", "value": 7701690, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "SY", "name": "Syria", "value": 20766037, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "TW", "name": "Taiwan", "value": 23072000, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "TJ", "name": "Tajikistan", "value": 6976958, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "TZ", "name": "Tanzania", "value": 46218486, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "TH", "name": "Thailand", "value": 69518555, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "TG", "name": "Togo", "value": 6154813, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "TT", "name": "Trinidad and Tobago", "value": 1346350, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "TN", "name": "Tunisia", "value": 10594057, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "TR", "name": "Turkey", "value": 73639596, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "TM", "name": "Turkmenistan", "value": 5105301, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "UG", "name": "Uganda", "value": 34509205, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "UA", "name": "Ukraine", "value": 45190180, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "AE", "name": "United Arab Emirates", "value": 7890924, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "GB", "name": "United Kingdom", "value": 62417431, circleTemplate: { fill: colors.getIndex(8) } },
-  { "id": "US", "name": "United States", "value": 313085380, circleTemplate: { fill: colors.getIndex(4) } },
-  { "id": "UY", "name": "Uruguay", "value": 3380008, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "UZ", "name": "Uzbekistan", "value": 27760267, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "VE", "name": "Venezuela", "value": 29436891, circleTemplate: { fill: colors.getIndex(3) } },
-  { "id": "PS", "name": "West Bank and Gaza", "value": 4152369, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "VN", "name": "Vietnam", "value": 88791996, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "YE", "name": "Yemen, Rep.", "value": 24799880, circleTemplate: { fill: colors.getIndex(0) } },
-  { "id": "ZM", "name": "Zambia", "value": 13474959, circleTemplate: { fill: colors.getIndex(2) } },
-  { "id": "ZW", "name": "Zimbabwe", "value": 12754378, circleTemplate: { fill: colors.getIndex(2) } }
+  {
+    id: "AF",
+    name: "Afghanistan",
+    value: 32358260,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "AL",
+    name: "Albania",
+    value: 3215988,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "DZ",
+    name: "Algeria",
+    value: 35980193,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "AO",
+    name: "Angola",
+    value: 19618432,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "AR",
+    name: "Argentina",
+    value: 40764561,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "AM",
+    name: "Armenia",
+    value: 3100236,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "AU",
+    name: "Australia",
+    value: 22605732,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "AT",
+    name: "Austria",
+    value: 8413429,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "AZ",
+    name: "Azerbaijan",
+    value: 9306023,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "BH",
+    name: "Bahrain",
+    value: 1323535,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "BD",
+    name: "Bangladesh",
+    value: 150493658,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "BY",
+    name: "Belarus",
+    value: 9559441,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "BE",
+    name: "Belgium",
+    value: 10754056,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "BJ",
+    name: "Benin",
+    value: 9099922,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "BT",
+    name: "Bhutan",
+    value: 738267,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "BO",
+    name: "Bolivia",
+    value: 10088108,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "BA",
+    name: "Bosnia and Herzegovina",
+    value: 3752228,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "BW",
+    name: "Botswana",
+    value: 2030738,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "BR",
+    name: "Brazil",
+    value: 196655014,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "BN",
+    name: "Brunei",
+    value: 405938,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "BG",
+    name: "Bulgaria",
+    value: 7446135,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "BF",
+    name: "Burkina Faso",
+    value: 16967845,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "BI",
+    name: "Burundi",
+    value: 8575172,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "KH",
+    name: "Cambodia",
+    value: 14305183,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "CM",
+    name: "Cameroon",
+    value: 20030362,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CA",
+    name: "Canada",
+    value: 34349561,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "CV",
+    name: "Cape Verde",
+    value: 500585,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CF",
+    name: "Central African Rep.",
+    value: 4486837,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "TD",
+    name: "Chad",
+    value: 11525496,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CL",
+    name: "Chile",
+    value: 17269525,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "CN",
+    name: "China",
+    value: 1347565324,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "CO",
+    name: "Colombia",
+    value: 46927125,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "KM",
+    name: "Comoros",
+    value: 753943,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CD",
+    name: "Congo, Dem. Rep.",
+    value: 67757577,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CG",
+    name: "Congo, Rep.",
+    value: 4139748,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "CR",
+    name: "Costa Rica",
+    value: 4726575,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "CI",
+    name: "Cote d'Ivoire",
+    value: 20152894,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "HR",
+    name: "Croatia",
+    value: 4395560,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "CU",
+    name: "Cuba",
+    value: 11253665,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "CY",
+    name: "Cyprus",
+    value: 1116564,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "CZ",
+    name: "Czech Rep.",
+    value: 10534293,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "DK",
+    name: "Denmark",
+    value: 5572594,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "DJ",
+    name: "Djibouti",
+    value: 905564,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "DO",
+    name: "Dominican Rep.",
+    value: 10056181,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "EC",
+    name: "Ecuador",
+    value: 14666055,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "EG",
+    name: "Egypt",
+    value: 82536770,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "SV",
+    name: "El Salvador",
+    value: 6227491,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "GQ",
+    name: "Equatorial Guinea",
+    value: 720213,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "ER",
+    name: "Eritrea",
+    value: 5415280,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "EE",
+    name: "Estonia",
+    value: 1340537,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "ET",
+    name: "Ethiopia",
+    value: 84734262,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "FJ",
+    name: "Fiji",
+    value: 868406,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "FI",
+    name: "Finland",
+    value: 5384770,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "FR",
+    name: "France",
+    value: 63125894,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "GA",
+    name: "Gabon",
+    value: 1534262,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "GM",
+    name: "Gambia",
+    value: 1776103,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "GE",
+    name: "Georgia",
+    value: 4329026,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "DE",
+    name: "Germany",
+    value: 82162512,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "GH",
+    name: "Ghana",
+    value: 24965816,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "GR",
+    name: "Greece",
+    value: 11390031,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "GT",
+    name: "Guatemala",
+    value: 14757316,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "GN",
+    name: "Guinea",
+    value: 10221808,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "GW",
+    name: "Guinea-Bissau",
+    value: 1547061,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "GY",
+    name: "Guyana",
+    value: 756040,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "HT",
+    name: "Haiti",
+    value: 10123787,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "HN",
+    name: "Honduras",
+    value: 7754687,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "HK",
+    name: "Hong Kong, China",
+    value: 7122187,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "HU",
+    name: "Hungary",
+    value: 9966116,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "IS",
+    name: "Iceland",
+    value: 324366,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "IN",
+    name: "India",
+    value: 1241491960,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "ID",
+    name: "Indonesia",
+    value: 242325638,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "IR",
+    name: "Iran",
+    value: 74798599,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "IQ",
+    name: "Iraq",
+    value: 32664942,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "IE",
+    name: "Ireland",
+    value: 4525802,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "IL",
+    name: "Israel",
+    value: 7562194,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "IT",
+    name: "Italy",
+    value: 60788694,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "JM",
+    name: "Jamaica",
+    value: 2751273,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "JP",
+    name: "Japan",
+    value: 126497241,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "JO",
+    name: "Jordan",
+    value: 6330169,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "KZ",
+    name: "Kazakhstan",
+    value: 16206750,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "KE",
+    name: "Kenya",
+    value: 41609728,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "KP",
+    name: "Korea, Dem. Rep.",
+    value: 24451285,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "KR",
+    name: "Korea, Rep.",
+    value: 48391343,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "KW",
+    name: "Kuwait",
+    value: 2818042,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "KG",
+    name: "Kyrgyzstan",
+    value: 5392580,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "LA",
+    name: "Laos",
+    value: 6288037,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "LV",
+    name: "Latvia",
+    value: 2243142,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "LB",
+    name: "Lebanon",
+    value: 4259405,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "LS",
+    name: "Lesotho",
+    value: 2193843,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "LR",
+    name: "Liberia",
+    value: 4128572,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "LY",
+    name: "Libya",
+    value: 6422772,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "LT",
+    name: "Lithuania",
+    value: 3307481,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "LU",
+    name: "Luxembourg",
+    value: 515941,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "MK",
+    name: "Macedonia, FYR",
+    value: 2063893,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "MG",
+    name: "Madagascar",
+    value: 21315135,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MW",
+    name: "Malawi",
+    value: 15380888,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MY",
+    name: "Malaysia",
+    value: 28859154,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "ML",
+    name: "Mali",
+    value: 15839538,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MR",
+    name: "Mauritania",
+    value: 3541540,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MU",
+    name: "Mauritius",
+    value: 1306593,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MX",
+    name: "Mexico",
+    value: 114793341,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "MD",
+    name: "Moldova",
+    value: 3544864,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "MN",
+    name: "Mongolia",
+    value: 2800114,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "ME",
+    name: "Montenegro",
+    value: 632261,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "MA",
+    name: "Morocco",
+    value: 32272974,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MZ",
+    name: "Mozambique",
+    value: 23929708,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "MM",
+    name: "Myanmar",
+    value: 48336763,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "NA",
+    name: "Namibia",
+    value: 2324004,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "NP",
+    name: "Nepal",
+    value: 30485798,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "NL",
+    name: "Netherlands",
+    value: 16664746,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "NZ",
+    name: "New Zealand",
+    value: 4414509,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "NI",
+    name: "Nicaragua",
+    value: 5869859,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "NE",
+    name: "Niger",
+    value: 16068994,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "NG",
+    name: "Nigeria",
+    value: 162470737,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "NO",
+    name: "Norway",
+    value: 4924848,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "OM",
+    name: "Oman",
+    value: 2846145,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "PK",
+    name: "Pakistan",
+    value: 176745364,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "PA",
+    name: "Panama",
+    value: 3571185,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "PG",
+    name: "Papua New Guinea",
+    value: 7013829,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "PY",
+    name: "Paraguay",
+    value: 6568290,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "PE",
+    name: "Peru",
+    value: 29399817,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "PH",
+    name: "Philippines",
+    value: 94852030,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "PL",
+    name: "Poland",
+    value: 38298949,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "PT",
+    name: "Portugal",
+    value: 10689663,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "PR",
+    name: "Puerto Rico",
+    value: 3745526,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "QA",
+    name: "Qatar",
+    value: 1870041,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "RO",
+    name: "Romania",
+    value: 21436495,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "RU",
+    name: "Russia",
+    value: 142835555,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "RW",
+    name: "Rwanda",
+    value: 10942950,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "SA",
+    name: "Saudi Arabia",
+    value: 28082541,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "SN",
+    name: "Senegal",
+    value: 12767556,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "RS",
+    name: "Serbia",
+    value: 9853969,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "SL",
+    name: "Sierra Leone",
+    value: 5997486,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "SG",
+    name: "Singapore",
+    value: 5187933,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "SK",
+    name: "Slovak Republic",
+    value: 5471502,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "SI",
+    name: "Slovenia",
+    value: 2035012,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "SB",
+    name: "Solomon Islands",
+    value: 552267,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "SO",
+    name: "Somalia",
+    value: 9556873,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "ZA",
+    name: "South Africa",
+    value: 50459978,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "ES",
+    name: "Spain",
+    value: 46454895,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "LK",
+    name: "Sri Lanka",
+    value: 21045394,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "SD",
+    name: "Sudan",
+    value: 34735288,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "SR",
+    name: "Suriname",
+    value: 529419,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "SZ",
+    name: "Swaziland",
+    value: 1203330,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "SE",
+    name: "Sweden",
+    value: 9440747,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "CH",
+    name: "Switzerland",
+    value: 7701690,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "SY",
+    name: "Syria",
+    value: 20766037,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "TW",
+    name: "Taiwan",
+    value: 23072000,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "TJ",
+    name: "Tajikistan",
+    value: 6976958,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "TZ",
+    name: "Tanzania",
+    value: 46218486,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "TH",
+    name: "Thailand",
+    value: 69518555,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "TG",
+    name: "Togo",
+    value: 6154813,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "TT",
+    name: "Trinidad and Tobago",
+    value: 1346350,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "TN",
+    name: "Tunisia",
+    value: 10594057,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "TR",
+    name: "Turkey",
+    value: 73639596,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "TM",
+    name: "Turkmenistan",
+    value: 5105301,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "UG",
+    name: "Uganda",
+    value: 34509205,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "UA",
+    name: "Ukraine",
+    value: 45190180,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "AE",
+    name: "United Arab Emirates",
+    value: 7890924,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "GB",
+    name: "United Kingdom",
+    value: 62417431,
+    circleTemplate: { fill: colors.getIndex(8) }
+  },
+  {
+    id: "US",
+    name: "United States",
+    value: 313085380,
+    circleTemplate: { fill: colors.getIndex(4) }
+  },
+  {
+    id: "UY",
+    name: "Uruguay",
+    value: 3380008,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "UZ",
+    name: "Uzbekistan",
+    value: 27760267,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "VE",
+    name: "Venezuela",
+    value: 29436891,
+    circleTemplate: { fill: colors.getIndex(3) }
+  },
+  {
+    id: "PS",
+    name: "West Bank and Gaza",
+    value: 4152369,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "VN",
+    name: "Vietnam",
+    value: 88791996,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "YE",
+    name: "Yemen, Rep.",
+    value: 24799880,
+    circleTemplate: { fill: colors.getIndex(0) }
+  },
+  {
+    id: "ZM",
+    name: "Zambia",
+    value: 13474959,
+    circleTemplate: { fill: colors.getIndex(2) }
+  },
+  {
+    id: "ZW",
+    name: "Zimbabwe",
+    value: 12754378,
+    circleTemplate: { fill: colors.getIndex(2) }
+  }
 ]);
 
-/**
- * Add globe/map switch
- */
+// Add globe/map switch
 const cont = chart.children.push(
   am5.Container.new(root, {
     layout: root.horizontalLayout,
@@ -265,29 +1127,30 @@ const cont = chart.children.push(
   })
 );
 
-cont.children.push(am5.Label.new(root, {
-  centerY: am5.p50,
-  text: "Map"
-}));
+cont.children.push(
+  am5.Label.new(root, {
+    centerY: am5.p50,
+    text: "Map"
+  })
+);
 
-const switchButton = cont.children.push(am5.Button.new(root, {
-  themeTags: ["switch"],
-  centerY: am5.p50,
-  icon: am5.Circle.new(root, {
-    themeTags: ["icon"]
+const switchButton = cont.children.push(
+  am5.Button.new(root, {
+    themeTags: ["switch"],
+    centerY: am5.p50,
+    icon: am5.Circle.new(root, {
+      themeTags: ["icon"]
+    })
   })
-}));
+);
 
-switchButton.on("active", () => {
+switchButton.on("active", function () {
   if (!switchButton.get("active")) {
     chart.set("projection", am5map.geoMercator());
-    chart.set("panY", "translateY");
-    chart.set("panX", "translateX");
-  }
-  else {
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0);
+  } else {
     chart.set("projection", am5map.geoOrthographic());
-    chart.set("panY", "rotateY");
-    chart.set("panX", "rotateX");
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0.1);
   }
 });
 
@@ -296,4 +1159,7 @@ cont.children.push(
     centerY: am5.p50,
     text: "Globe"
   })
-);
+);
+
+// Make stuff animate on load
+chart.appear(1000, 100);