import * as am5 from "@amcharts/amcharts5"; import * as am5hierarchy from "@amcharts/amcharts5/hierarchy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element let root = am5.Root.new("chartdiv"); // Create custom theme... const myTheme = am5.Theme.new(root); // ... no stroke and fill on zero level myTheme.rule("Polygon", ["hierarchy", "node", "shape", "depth0"]).setAll({ strokeOpacity: 0, fillOpacity: 0 }); // ... thick stroke and full opacity on first level myTheme.rule("Polygon", ["hierarchy", "node", "shape", "depth1"]).setAll({ strokeWidth: 5, fillOpacity: 1, stroke: am5.color(0x000000) }); // ... no fill and thin stroke on second level myTheme.rule("Polygon", ["hierarchy", "node", "shape", "depth2"]).setAll({ fillOpacity: 0, strokeWidth: 1, stroke: am5.color(0x000000) }); // ... by default last lever is not clickable, but we change it here, so, add pointer on the last level myTheme.rule("HierarchyNode", ["last"]).setAll({ cursorOverStyle: "pointer" }); // ... set global settings for all labels myTheme.rule("Label", ["node"]).setAll({ fontSize: 11, minScale: 0.7 }); // ... hide label of zero level myTheme.rule("Label", ["node", "depth0"]).setAll({ forceHidden: true }); // ... hide label of first level myTheme.rule("Label", ["node", "depth1"]).setAll({ forceHidden: true }); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root), myTheme ]); // Prepare data var data = { "children": [ { "name": "Africa", "children": [ { "id": "DZ", "name": "Algeria", "population": 40400000 }, { "id": "AO", "name": "Angola", "population": 25868000 }, { "id": "BJ", "name": "Benin", "population": 10653654 }, { "id": "BW", "name": "Botswana", "population": 2141206 }, { "id": "BF", "name": "Burkina Faso", "population": 19034397 }, { "id": "BI", "name": "Burundi", "population": 10114505 }, { "id": "CV", "name": "Cabo Verde", "population": 531239 }, { "id": "CM", "name": "Cameroon", "population": 22709892 }, { "id": "CF", "name": "Central African Republic", "population": 4998000 }, { "id": "TD", "name": "Chad", "population": 14497000 }, { "id": "KM", "name": "Comoros", "population": 806153 }, { "id": "CG", "name": "Congo (Brazzaville)", "population": 4741000 }, { "id": "CD", "name": "Congo (Kinshasa)", "population": 85026000 }, { "id": "DJ", "name": "Djibouti", "population": 900000 }, { "id": "EG", "name": "Egypt", "population": 91251890 }, { "id": "GQ", "name": "Equatorial Guinea", "population": 1222442 }, { "id": "ER", "name": "Eritrea", "population": 4474690 }, { "id": "SZ", "name": "Eswatini", "population": 1136191 }, { "id": "ET", "name": "Ethiopia", "population": 102403196 }, { "id": "GA", "name": "Gabon", "population": 1802278 }, { "id": "GM", "name": "Gambia", "population": 1882450 }, { "id": "GH", "name": "Ghana", "population": 27670174 }, { "id": "GN", "name": "Guinea", "population": 12947000 }, { "id": "GW", "name": "Guinea-Bissau", "population": 1547777 }, { "id": "KE", "name": "Kenya", "population": 47251000 }, { "id": "LS", "name": "Lesotho", "population": 2263010 }, { "id": "LR", "name": "Liberia", "population": 4615000 }, { "id": "LY", "name": "Libya", "population": 6385000 }, { "id": "MG", "name": "Madagascar", "population": 22434363 }, { "id": "MW", "name": "Malawi", "population": 18622104 }, { "id": "ML", "name": "Mali", "population": 17994837 }, { "id": "MR", "name": "Mauritania", "population": 4420184 }, { "id": "MU", "name": "Mauritius", "population": 1262879 }, { "id": "MA", "name": "Morocco", "population": 34224455 }, { "id": "MZ", "name": "Mozambique", "population": 28829476 }, { "id": "NA", "name": "Namibia", "population": 2324004 }, { "id": "NE", "name": "Niger", "population": 21477348 }, { "id": "NG", "name": "Nigeria", "population": 186988000 }, { "id": "RW", "name": "Rwanda", "population": 11553188 }, { "id": "ST", "name": "São Tomé and Príncipe", "population": 187356 }, { "id": "SN", "name": "Senegal", "population": 14799859 }, { "id": "SC", "name": "Seychelles", "population": 91400 }, { "id": "SL", "name": "Sierra Leone", "population": 7075641 }, { "id": "SO", "name": "Somalia", "population": 11079000 }, { "id": "ZA", "name": "South Africa", "population": 55653654 }, { "id": "SS", "name": "South Sudan", "population": 12131000 }, { "id": "SD", "name": "Sudan", "population": 39598700 }, { "id": "TZ", "name": "Tanzania", "population": 55155000 }, { "id": "TG", "name": "Togo", "population": 7606374 }, { "id": "TN", "name": "Tunisia", "population": 11154400 }, { "id": "UG", "name": "Uganda", "population": 39570125 }, { "id": "EH", "name": "Western Sahara", "population": 510713 }, { "id": "ZM", "name": "Zambia", "population": 15933883 }, { "id": "ZW", "name": "Zimbabwe", "population": 14240168 } ] }, { "name": "Asia", "children": [ { "id": "AF", "name": "Afghanistan", "population": 27657145 }, { "id": "AM", "name": "Armenia", "population": 2994400 }, { "id": "AZ", "name": "Azerbaijan", "population": 9730500 }, { "id": "BH", "name": "Bahrain", "population": 1404900 }, { "id": "BD", "name": "Bangladesh", "population": 161006790 }, { "id": "BT", "name": "Bhutan", "population": 775620 }, { "id": "BN", "name": "Brunei", "population": 408786 }, { "id": "KH", "name": "Cambodia", "population": 15626444 }, { "id": "CN", "name": "China", "population": 1373540000 }, { "id": "GE", "name": "Georgia", "population": 3720400 }, { "id": "IN", "name": "India", "population": 1324171354 }, { "id": "ID", "name": "Indonesia", "population": 261115456 }, { "id": "IR", "name": "Iran", "population": 79369900 }, { "id": "IQ", "name": "Iraq", "population": 37883543 }, { "id": "IL", "name": "Israel", "population": 8547100 }, { "id": "JP", "name": "Japan", "population": 126672000 }, { "id": "JO", "name": "Jordan", "population": 9531712 }, { "id": "KZ", "name": "Kazakhstan", "population": 17753200 }, { "id": "KW", "name": "Kuwait", "population": 4137309 }, { "id": "KG", "name": "Kyrgyzstan", "population": 6045117 }, { "id": "LA", "name": "Laos", "population": 6492400 }, { "id": "LB", "name": "Lebanon", "population": 6006668 }, { "id": "MY", "name": "Malaysia", "population": 31187265 }, { "id": "MV", "name": "Maldives", "population": 427756 }, { "id": "MN", "name": "Mongolia", "population": 3086918 }, { "id": "MM", "name": "Myanmar", "population": 51419420 }, { "id": "NP", "name": "Nepal", "population": 28431500 }, { "id": "KP", "name": "North Korea", "population": 25000000 }, { "id": "OM", "name": "Oman", "population": 4420133 }, { "id": "PK", "name": "Pakistan", "population": 193203476 }, { "id": "PH", "name": "Philippines", "population": 103320222 }, { "id": "QA", "name": "Qatar", "population": 2587564 }, { "id": "RU", "name": "Russia", "population": 146599183 }, { "id": "SA", "name": "Saudi Arabia", "population": 32248200 }, { "id": "SG", "name": "Singapore", "population": 5607000 }, { "id": "KR", "name": "South Korea", "population": 50982212 }, { "id": "LK", "name": "Sri Lanka", "population": 20950000 }, { "id": "SY", "name": "Syria", "population": 18564000 }, { "id": "TW", "name": "Taiwan", "population": 23503349 }, { "id": "TJ", "name": "Tajikistan", "population": 8593600 }, { "id": "TH", "name": "Thailand", "population": 65327652 }, { "id": "TR", "name": "Turkey", "population": 78741053 }, { "id": "TM", "name": "Turkmenistan", "population": 4751120 }, { "id": "AE", "name": "United Arab Emirates", "population": 9856000 }, { "id": "UZ", "name": "Uzbekistan", "population": 31910641 }, { "id": "VN", "name": "Vietnam", "population": 92700000 }, { "id": "YE", "name": "Yemen", "population": 27478000 } ] }, { "name": "Europe", "children": [ { "id": "AL", "name": "Albania", "population": 2876591 }, { "id": "AD", "name": "Andorra", "population": 78014 }, { "id": "AT", "name": "Austria", "population": 8735453 }, { "id": "BY", "name": "Belarus", "population": 9500000 }, { "id": "BE", "name": "Belgium", "population": 11319511 }, { "id": "BA", "name": "Bosnia and Herzegovina", "population": 3531159 }, { "id": "BG", "name": "Bulgaria", "population": 7153784 }, { "id": "HR", "name": "Croatia", "population": 4190669 }, { "id": "CY", "name": "Cyprus", "population": 847000 }, { "id": "CZ", "name": "Czech Republic", "population": 10558524 }, { "id": "DK", "name": "Denmark", "population": 5717014 }, { "id": "EE", "name": "Estonia", "population": 1315819 }, { "id": "FO", "name": "Faroe Islands", "population": 49188 }, { "id": "FI", "name": "Finland", "population": 5491817 }, { "id": "FR", "name": "France", "population": 66710000 }, { "id": "DE", "name": "Germany", "population": 82667685 }, { "id": "GI", "name": "Gibraltar", "population": 33140 }, { "id": "GR", "name": "Greece", "population": 10858018 }, { "id": "GG", "name": "Guernsey", "population": 62999 }, { "id": "HU", "name": "Hungary", "population": 9823000 }, { "id": "IS", "name": "Iceland", "population": 334300 }, { "id": "IE", "name": "Ireland", "population": 6378000 }, { "id": "IM", "name": "Isle of Man", "population": 84497 }, { "id": "IT", "name": "Italy", "population": 60665551 }, { "id": "JE", "name": "Jersey", "population": 100800 }, { "id": "LV", "name": "Latvia", "population": 1961600 }, { "id": "LI", "name": "Liechtenstein", "population": 37623 }, { "id": "LT", "name": "Lithuania", "population": 2932367 }, { "id": "LU", "name": "Luxembourg", "population": 576200 }, { "id": "MK", "name": "Macedonia", "population": 2058539 }, { "id": "MT", "name": "Malta", "population": 429344 }, { "id": "MD", "name": "Moldova", "population": 3553100 }, { "id": "MC", "name": "Monaco", "population": 38400 }, { "id": "ME", "name": "Montenegro", "population": 621810 }, { "id": "NL", "name": "Netherlands", "population": 17019800 }, { "id": "NO", "name": "Norway", "population": 5223256 }, { "id": "PL", "name": "Poland", "population": 38437239 }, { "id": "PT", "name": "Portugal", "population": 10374822 }, { "id": "RO", "name": "Romania", "population": 19861408 }, { "id": "RU", "name": "Russia", "population": 146599183 }, { "id": "SM", "name": "San Marino", "population": 33005 }, { "id": "RS", "name": "Serbia", "population": 7076372 }, { "id": "SK", "name": "Slovakia", "population": 5426252 }, { "id": "SI", "name": "Slovenia", "population": 2064188 }, { "id": "ES", "name": "Spain", "population": 46438422 }, { "id": "SJ", "name": "Svalbard and Jan Mayen", "population": 3200 }, { "id": "SE", "name": "Sweden", "population": 9851017 }, { "id": "CH", "name": "Switzerland", "population": 8372098 }, { "id": "UA", "name": "Ukraine", "population": 42692393 }, { "id": "GB", "name": "United Kingdom", "population": 65110000 }, { "id": "VA", "name": "Vatican City", "population": 451 } ] }, { "name": "North America", "children": [ { "id": "AI", "name": "Anguilla", "population": 13452 }, { "id": "AG", "name": "Antigua and Barbuda", "population": 86295 }, { "id": "BS", "name": "Bahamas", "population": 378040 }, { "id": "BB", "name": "Barbados", "population": 285000 }, { "id": "BZ", "name": "Belize", "population": 360346 }, { "id": "BM", "name": "Bermuda", "population": 61954 }, { "id": "CA", "name": "Canada", "population": 36155487 }, { "id": "KY", "name": "Cayman Islands", "population": 58238 }, { "id": "CR", "name": "Costa Rica", "population": 4999441 }, { "id": "CU", "name": "Cuba", "population": 11239004 }, { "id": "DM", "name": "Dominica", "population": 71293 }, { "id": "DO", "name": "Dominican Republic", "population": 10075045 }, { "id": "SV", "name": "El Salvador", "population": 6520675 }, { "id": "GL", "name": "Greenland", "population": 55877 }, { "id": "GD", "name": "Grenada", "population": 103328 }, { "id": "GT", "name": "Guatemala", "population": 16176133 }, { "id": "HT", "name": "Haiti", "population": 11078033 }, { "id": "HN", "name": "Honduras", "population": 8576532 }, { "id": "JM", "name": "Jamaica", "population": 2723246 }, { "id": "MX", "name": "Mexico", "population": 122273473 }, { "id": "MS", "name": "Montserrat", "population": 4922 }, { "id": "NI", "name": "Nicaragua", "population": 6262703 }, { "id": "PA", "name": "Panama", "population": 3814672 }, { "id": "PR", "name": "Puerto Rico", "population": 3474182 }, { "id": "KN", "name": "Saint Kitts and Nevis", "population": 46204 }, { "id": "LC", "name": "Saint Lucia", "population": 186000 }, { "id": "PM", "name": "Saint Pierre and Miquelon", "population": 6069 }, { "id": "VC", "name": "Saint Vincent and the Grenadines", "population": 109991 }, { "id": "TT", "name": "Trinidad and Tobago", "population": 1228691 }, { "id": "TC", "name": "Turks and Caicos Islands", "population": 31458 }, { "id": "US", "name": "United States", "population": 326766748 }, { "id": "VI", "name": "U.S. Virgin Islands", "population": 106235 } ] }, { "name": "South America", "children": [ { "id": "AR", "name": "Argentina", "population": 43847430 }, { "id": "BO", "name": "Bolivia", "population": 11051600 }, { "id": "BR", "name": "Brazil", "population": 209288278 }, { "id": "CL", "name": "Chile", "population": 18191900 }, { "id": "CO", "name": "Colombia", "population": 49065615 }, { "id": "EC", "name": "Ecuador", "population": 16624858 }, { "id": "FK", "name": "Falkland Islands", "population": 2563 }, { "id": "GF", "name": "French Guiana", "population": 269352 }, { "id": "GY", "name": "Guyana", "population": 777859 }, { "id": "PY", "name": "Paraguay", "population": 6811297 }, { "id": "PE", "name": "Peru", "population": 32165485 }, { "id": "SR", "name": "Suriname", "population": 542975 }, { "id": "UY", "name": "Uruguay", "population": 3456750 }, { "id": "VE", "name": "Venezuela", "population": 31977065 } ] }, { "name": "Oceania", "children": [ { "id": "AS", "name": "American Samoa", "population": 55641 }, { "id": "AU", "name": "Australia", "population": 24450561 }, { "id": "CK", "name": "Cook Islands", "population": 17380 }, { "id": "FJ", "name": "Fiji", "population": 905502 }, { "id": "PF", "name": "French Polynesia", "population": 271800 }, { "id": "GU", "name": "Guam", "population": 168564 }, { "id": "KI", "name": "Kiribati", "population": 113400 }, { "id": "MH", "name": "Marshall Islands", "population": 53127 }, { "id": "FM", "name": "Micronesia", "population": 105544 }, { "id": "NR", "name": "Nauru", "population": 10084 }, { "id": "NC", "name": "New Caledonia", "population": 268767 }, { "id": "NZ", "name": "New Zealand", "population": 4693200 }, { "id": "NU", "name": "Niue", "population": 1618 }, { "id": "NF", "name": "Norfolk Island", "population": 2302 }, { "id": "MP", "name": "Northern Mariana Islands", "population": 56940 }, { "id": "PW", "name": "Palau", "population": 21729 }, { "id": "PG", "name": "Papua New Guinea", "population": 8251162 }, { "id": "PN", "name": "Pitcairn Islands", "population": 56 }, { "id": "WS", "name": "Samoa", "population": 196440 }, { "id": "SB", "name": "Solomon Islands", "population": 611343 }, { "id": "TK", "name": "Tokelau", "population": 1411 }, { "id": "TO", "name": "Tonga", "population": 108020 }, { "id": "TV", "name": "Tuvalu", "population": 11323 }, { "id": "VU", "name": "Vanuatu", "population": 276244 }, { "id": "WF", "name": "Wallis and Futuna", "population": 11750 } ] } ] } // Group small countries into Others am5.array.each(data.children, (continent) => { var others = { name: "Others", id: "Others", population: 0 }; for (var i = continent.children.length - 1; i >= 0; i--) { var country = continent.children[i]; if (country.population < 5000000) { others.population += country.population am5.array.remove(continent.children, country); } } continent.children.push(others); }); // Create series // https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding var series = root.container.children.push(am5hierarchy.VoronoiTreemap.new(root, { paddingLeft: 5, paddingRight: 5, paddingTop: 5, paddingBottom: 5, singleBranchOnly: true, downDepth: 2, upDepth: 0, initialDepth: 2, valueField: "population", categoryField: "name", childDataField: "children", idField: "name", type: "polygon", cornerCount: 120 })); // Show full name if polygon is big and only the id if its small series.labels.template.adapters.add("x", (x, target) => { var dataItem = target.dataItem ; if (dataItem) { var polygon = dataItem.get("polygon"); if (polygon) { var minX = polygon.getPrivate("minX", 0); var maxX = polygon.getPrivate("maxX", 0); var dataContext = dataItem.dataContext ; if (dataContext) { if (maxX - minX < 50) { target.set("text", dataContext.id); } else { target.set("text", dataContext.name); } } } } return x; }); // WQhen last level node is clicked, zoom to parent series.nodes.template.events.on("click", (e) => { var dataItem = e.target.dataItem ; if (dataItem) { if (!dataItem.get("children")) { series.selectDataItem(dataItem.get("parent")); } } }); // Set data // https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data series.data.setAll([data]); // Select root node // https://www.amcharts.com/docs/v5/charts/hierarchy/#Pre_selected_branch series.set("selectedDataItem", series.dataItems[0]); // Make stuff animate on load series.appear(1000, 100);