Rotating Globe With Circles - Amcharts

amCharts
Products
Demos
Download
Buy
Support
Docs
Previous All demos Next
Open in:
Rotating Globe with Circles
With amCharts 5 you can create amazing Map charts and you don’t have to be limited
to flattened representation of Earth. As you can see in this demo, you can use an
orthographic projection to display the planet as an interactive globe.
Learn more about map projections in our documentation.
Demo source
JavaScript
TypeScript / ES6
...

<style>
#chartdiv {
width: 100%;
height: 600px;
}
</style>


<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>


<script>
am5.ready(function() {
// Create root element

// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var 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/
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "rotateX",
panY: "rotateY",
projection: am5map.geoOrthographic()
}));
// Create series for background fill
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
#Background_polygon
var backgroundSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {})
);
backgroundSeries.mapPolygons.template.setAll({
fill: root.interfaceColors.get("alternativeBackground"),
fillOpacity: 0.1,
strokeOpacity: 0
});
backgroundSeries.data.push({
geometry:
am5map.getGeoRectangle(90, 180, -90, -180)
});
// Create main polygon series for countries

var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow
}));
polygonSeries.mapPolygons.template.setAll({
fillOpacity: 0.15,
strokeWidth: 0.5,
stroke: root.interfaceColors.get("background")
});
// Create polygon series for projected circles

var circleSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
circleSeries.mapPolygons.template.setAll({
templateField: "polygonTemplate",
tooltipText: "{name}:{value}"
});
// Define data
var colors = am5.ColorSet.new(root, {});
var data = [
{ "id": "AF", "name": "Afghanistan", "value": 32358260, polygonTemplate: { fill:
colors.getIndex(0) } },
{ "id": "AL", "name": "Albania", "value": 3215988, polygonTemplate: { fill:
{ "id": "DZ", "name": "Algeria", "value": 35980193, polygonTemplate: { fill:
{ "id": "AO", "name": "Angola", "value": 19618432, polygonTemplate: { fill:
{ "id": "AR", "name": "Argentina", "value": 40764561, polygonTemplate: { fill:
{ "id": "AM", "name": "Armenia", "value": 3100236, polygonTemplate: { fill:
{ "id": "AU", "name": "Australia", "value": 22605732, polygonTemplate: { fill:
{ "id": "AT", "name": "Austria", "value": 8413429, polygonTemplate: { fill:
{ "id": "AZ", "name": "Azerbaijan", "value": 9306023, polygonTemplate: { fill:
{ "id": "BH", "name": "Bahrain", "value": 1323535, polygonTemplate: { fill:
{ "id": "BD", "name": "Bangladesh", "value": 150493658, polygonTemplate: { fill:
{ "id": "BY", "name": "Belarus", "value": 9559441, polygonTemplate: { fill:
{ "id": "BE", "name": "Belgium", "value": 10754056, polygonTemplate: { fill:
{ "id": "BJ", "name": "Benin", "value": 9099922, polygonTemplate: { fill:
{ "id": "BT", "name": "Bhutan", "value": 738267, polygonTemplate: { fill:
{ "id": "BO", "name": "Bolivia", "value": 10088108, polygonTemplate: { fill:
{ "id": "BA", "name": "Bosnia and Herzegovina", "value": 3752228,
polygonTemplate: { fill: colors.getIndex(8) } },
{ "id": "BW", "name": "Botswana", "value": 2030738, polygonTemplate: { fill:
{ "id": "BR", "name": "Brazil", "value": 196655014, polygonTemplate: { fill:
{ "id": "BN", "name": "Brunei", "value": 405938, polygonTemplate: { fill:
{ "id": "BG", "name": "Bulgaria", "value": 7446135, polygonTemplate: { fill:
{ "id": "BF", "name": "Burkina Faso", "value": 16967845, polygonTemplate: { fill:
{ "id": "BI", "name": "Burundi", "value": 8575172, polygonTemplate: { fill:
{ "id": "KH", "name": "Cambodia", "value": 14305183, polygonTemplate: { fill:
{ "id": "CM", "name": "Cameroon", "value": 20030362, polygonTemplate: { fill:
{ "id": "CA", "name": "Canada", "value": 34349561, polygonTemplate: { fill:
{ "id": "CV", "name": "Cape Verde", "value": 500585, polygonTemplate: { fill:
{ "id": "CF", "name": "Central African Rep.", "value": 4486837, polygonTemplate:
{ fill: colors.getIndex(2) } },
{ "id": "TD", "name": "Chad", "value": 11525496, polygonTemplate: { fill:
{ "id": "CL", "name": "Chile", "value": 17269525, polygonTemplate: { fill:
{ "id": "CN", "name": "China", "value": 1347565324, polygonTemplate: { fill:
{ "id": "CO", "name": "Colombia", "value": 46927125, polygonTemplate: { fill:
{ "id": "KM", "name": "Comoros", "value": 753943, polygonTemplate: { fill:
{ "id": "CD", "name": "Congo, Dem. Rep.", "value": 67757577, polygonTemplate:
{ "id": "CG", "name": "Congo, Rep.", "value": 4139748, polygonTemplate: { fill:
{ "id": "CR", "name": "Costa Rica", "value": 4726575, polygonTemplate: { fill:
{ "id": "CI", "name": "Cote d'Ivoire", "value": 20152894, polygonTemplate:
{ "id": "HR", "name": "Croatia", "value": 4395560, polygonTemplate: { fill:
{ "id": "CU", "name": "Cuba", "value": 11253665, polygonTemplate: { fill:
{ "id": "CY", "name": "Cyprus", "value": 1116564, polygonTemplate: { fill:
{ "id": "CZ", "name": "Czech Rep.", "value": 10534293, polygonTemplate: { fill:
{ "id": "DK", "name": "Denmark", "value": 5572594, polygonTemplate: { fill:
{ "id": "DJ", "name": "Djibouti", "value": 905564, polygonTemplate: { fill:
{ "id": "DO", "name": "Dominican Rep.", "value": 10056181, polygonTemplate:
{ "id": "EC", "name": "Ecuador", "value": 14666055, polygonTemplate: { fill:
{ "id": "EG", "name": "Egypt", "value": 82536770, polygonTemplate: { fill:
{ "id": "SV", "name": "El Salvador", "value": 6227491, polygonTemplate: { fill:
{ "id": "GQ", "name": "Equatorial Guinea", "value": 720213, polygonTemplate:
{ "id": "ER", "name": "Eritrea", "value": 5415280, polygonTemplate: { fill:
{ "id": "EE", "name": "Estonia", "value": 1340537, polygonTemplate: { fill:
{ "id": "ET", "name": "Ethiopia", "value": 84734262, polygonTemplate: { fill:
{ "id": "FJ", "name": "Fiji", "value": 868406, polygonTemplate: { fill:
{ "id": "FI", "name": "Finland", "value": 5384770, polygonTemplate: { fill:
{ "id": "FR", "name": "France", "value": 63125894, polygonTemplate: { fill:
{ "id": "GA", "name": "Gabon", "value": 1534262, polygonTemplate: { fill:
{ "id": "GM", "name": "Gambia", "value": 1776103, polygonTemplate: { fill:
{ "id": "GE", "name": "Georgia", "value": 4329026, polygonTemplate: { fill:
{ "id": "DE", "name": "Germany", "value": 82162512, polygonTemplate: { fill:
{ "id": "GH", "name": "Ghana", "value": 24965816, polygonTemplate: { fill:
{ "id": "GR", "name": "Greece", "value": 11390031, polygonTemplate: { fill:
{ "id": "GT", "name": "Guatemala", "value": 14757316, polygonTemplate: { fill:
{ "id": "GN", "name": "Guinea", "value": 10221808, polygonTemplate: { fill:
{ "id": "GW", "name": "Guinea-Bissau", "value": 1547061, polygonTemplate: { fill:
{ "id": "GY", "name": "Guyana", "value": 756040, polygonTemplate: { fill:
{ "id": "HT", "name": "Haiti", "value": 10123787, polygonTemplate: { fill:
{ "id": "HN", "name": "Honduras", "value": 7754687, polygonTemplate: { fill:
{ "id": "HK", "name": "Hong Kong, China", "value": 7122187, polygonTemplate:
{ "id": "HU", "name": "Hungary", "value": 9966116, polygonTemplate: { fill:
{ "id": "IS", "name": "Iceland", "value": 324366, polygonTemplate: { fill:
{ "id": "IN", "name": "India", "value": 1241491960, polygonTemplate: { fill:
{ "id": "ID", "name": "Indonesia", "value": 242325638, polygonTemplate: { fill:
{ "id": "IR", "name": "Iran", "value": 74798599, polygonTemplate: { fill:
{ "id": "IQ", "name": "Iraq", "value": 32664942, polygonTemplate: { fill:
{ "id": "IE", "name": "Ireland", "value": 4525802, polygonTemplate: { fill:
{ "id": "IL", "name": "Israel", "value": 7562194, polygonTemplate: { fill:
{ "id": "IT", "name": "Italy", "value": 60788694, polygonTemplate: { fill:
{ "id": "JM", "name": "Jamaica", "value": 2751273, polygonTemplate: { fill:
{ "id": "JP", "name": "Japan", "value": 126497241, polygonTemplate: { fill:
{ "id": "JO", "name": "Jordan", "value": 6330169, polygonTemplate: { fill:
{ "id": "KZ", "name": "Kazakhstan", "value": 16206750, polygonTemplate: { fill:
{ "id": "KE", "name": "Kenya", "value": 41609728, polygonTemplate: { fill:
{ "id": "KP", "name": "Korea, Dem. Rep.", "value": 24451285, polygonTemplate:
{ "id": "KR", "name": "Korea, Rep.", "value": 48391343, polygonTemplate: { fill:
{ "id": "KW", "name": "Kuwait", "value": 2818042, polygonTemplate: { fill:
{ "id": "KG", "name": "Kyrgyzstan", "value": 5392580, polygonTemplate: { fill:
{ "id": "LA", "name": "Laos", "value": 6288037, polygonTemplate: { fill:
{ "id": "LV", "name": "Latvia", "value": 2243142, polygonTemplate: { fill:
{ "id": "LB", "name": "Lebanon", "value": 4259405, polygonTemplate: { fill:
{ "id": "LS", "name": "Lesotho", "value": 2193843, polygonTemplate: { fill:
{ "id": "LR", "name": "Liberia", "value": 4128572, polygonTemplate: { fill:
{ "id": "LY", "name": "Libya", "value": 6422772, polygonTemplate: { fill:
{ "id": "LT", "name": "Lithuania", "value": 3307481, polygonTemplate: { fill:
{ "id": "LU", "name": "Luxembourg", "value": 515941, polygonTemplate: { fill:
{ "id": "MK", "name": "Macedonia, FYR", "value": 2063893, polygonTemplate:
{ "id": "MG", "name": "Madagascar", "value": 21315135, polygonTemplate: { fill:
{ "id": "MW", "name": "Malawi", "value": 15380888, polygonTemplate: { fill:
{ "id": "MY", "name": "Malaysia", "value": 28859154, polygonTemplate: { fill:
{ "id": "ML", "name": "Mali", "value": 15839538, polygonTemplate: { fill:
{ "id": "MR", "name": "Mauritania", "value": 3541540, polygonTemplate: { fill:
{ "id": "MU", "name": "Mauritius", "value": 1306593, polygonTemplate: { fill:
{ "id": "MX", "name": "Mexico", "value": 114793341, polygonTemplate: { fill:
{ "id": "MD", "name": "Moldova", "value": 3544864, polygonTemplate: { fill:
{ "id": "MN", "name": "Mongolia", "value": 2800114, polygonTemplate: { fill:
{ "id": "ME", "name": "Montenegro", "value": 632261, polygonTemplate: { fill:
{ "id": "MA", "name": "Morocco", "value": 32272974, polygonTemplate: { fill:
{ "id": "MZ", "name": "Mozambique", "value": 23929708, polygonTemplate: { fill:
{ "id": "MM", "name": "Myanmar", "value": 48336763, polygonTemplate: { fill:
{ "id": "NA", "name": "Namibia", "value": 2324004, polygonTemplate: { fill:
{ "id": "NP", "name": "Nepal", "value": 30485798, polygonTemplate: { fill:
{ "id": "NL", "name": "Netherlands", "value": 16664746, polygonTemplate: { fill:
{ "id": "NZ", "name": "New Zealand", "value": 4414509, polygonTemplate: { fill:
{ "id": "NI", "name": "Nicaragua", "value": 5869859, polygonTemplate: { fill:
{ "id": "NE", "name": "Niger", "value": 16068994, polygonTemplate: { fill:
{ "id": "NG", "name": "Nigeria", "value": 162470737, polygonTemplate: { fill:
{ "id": "NO", "name": "Norway", "value": 4924848, polygonTemplate: { fill:
{ "id": "OM", "name": "Oman", "value": 2846145, polygonTemplate: { fill:
{ "id": "PK", "name": "Pakistan", "value": 176745364, polygonTemplate: { fill:
{ "id": "PA", "name": "Panama", "value": 3571185, polygonTemplate: { fill:
{ "id": "PG", "name": "Papua New Guinea", "value": 7013829, polygonTemplate:
{ "id": "PY", "name": "Paraguay", "value": 6568290, polygonTemplate: { fill:
{ "id": "PE", "name": "Peru", "value": 29399817, polygonTemplate: { fill:
{ "id": "PH", "name": "Philippines", "value": 94852030, polygonTemplate: { fill:
{ "id": "PL", "name": "Poland", "value": 38298949, polygonTemplate: { fill:
{ "id": "PT", "name": "Portugal", "value": 10689663, polygonTemplate: { fill:
{ "id": "PR", "name": "Puerto Rico", "value": 3745526, polygonTemplate: { fill:
{ "id": "QA", "name": "Qatar", "value": 1870041, polygonTemplate: { fill:
{ "id": "RO", "name": "Romania", "value": 21436495, polygonTemplate: { fill:
{ "id": "RU", "name": "Russia", "value": 142835555, polygonTemplate: { fill:
{ "id": "RW", "name": "Rwanda", "value": 10942950, polygonTemplate: { fill:
{ "id": "SA", "name": "Saudi Arabia", "value": 28082541, polygonTemplate: { fill:
{ "id": "SN", "name": "Senegal", "value": 12767556, polygonTemplate: { fill:
{ "id": "RS", "name": "Serbia", "value": 9853969, polygonTemplate: { fill:
{ "id": "SL", "name": "Sierra Leone", "value": 5997486, polygonTemplate: { fill:
{ "id": "SG", "name": "Singapore", "value": 5187933, polygonTemplate: { fill:
{ "id": "SK", "name": "Slovak Republic", "value": 5471502, polygonTemplate:
{ "id": "SI", "name": "Slovenia", "value": 2035012, polygonTemplate: { fill:
{ "id": "SB", "name": "Solomon Islands", "value": 552267, polygonTemplate:
{ "id": "SO", "name": "Somalia", "value": 9556873, polygonTemplate: { fill:
{ "id": "ZA", "name": "South Africa", "value": 50459978, polygonTemplate: { fill:
{ "id": "ES", "name": "Spain", "value": 46454895, polygonTemplate: { fill:
{ "id": "LK", "name": "Sri Lanka", "value": 21045394, polygonTemplate: { fill:
{ "id": "SD", "name": "Sudan", "value": 34735288, polygonTemplate: { fill:
{ "id": "SR", "name": "Suriname", "value": 529419, polygonTemplate: { fill:
{ "id": "SZ", "name": "Swaziland", "value": 1203330, polygonTemplate: { fill:
{ "id": "SE", "name": "Sweden", "value": 9440747, polygonTemplate: { fill:
{ "id": "CH", "name": "Switzerland", "value": 7701690, polygonTemplate: { fill:
{ "id": "SY", "name": "Syria", "value": 20766037, polygonTemplate: { fill:
{ "id": "TW", "name": "Taiwan", "value": 23072000, polygonTemplate: { fill:
{ "id": "TJ", "name": "Tajikistan", "value": 6976958, polygonTemplate: { fill:
{ "id": "TZ", "name": "Tanzania", "value": 46218486, polygonTemplate: { fill:
{ "id": "TH", "name": "Thailand", "value": 69518555, polygonTemplate: { fill:
{ "id": "TG", "name": "Togo", "value": 6154813, polygonTemplate: { fill:
{ "id": "TT", "name": "Trinidad and Tobago", "value": 1346350, polygonTemplate: {
fill: colors.getIndex(4) } },
{ "id": "TN", "name": "Tunisia", "value": 10594057, polygonTemplate: { fill:
{ "id": "TR", "name": "Turkey", "value": 73639596, polygonTemplate: { fill:
{ "id": "TM", "name": "Turkmenistan", "value": 5105301, polygonTemplate: { fill:
{ "id": "UG", "name": "Uganda", "value": 34509205, polygonTemplate: { fill:
{ "id": "UA", "name": "Ukraine", "value": 45190180, polygonTemplate: { fill:
{ "id": "AE", "name": "United Arab Emirates", "value": 7890924, polygonTemplate:
{ "id": "GB", "name": "United Kingdom", "value": 62417431, polygonTemplate:
{ "id": "US", "name": "United States", "value": 313085380, polygonTemplate:
{ "id": "UY", "name": "Uruguay", "value": 3380008, polygonTemplate: { fill:
{ "id": "UZ", "name": "Uzbekistan", "value": 27760267, polygonTemplate: { fill:
{ "id": "VE", "name": "Venezuela", "value": 29436891, polygonTemplate: { fill:
{ "id": "PS", "name": "West Bank and Gaza", "value": 4152369, polygonTemplate:
{ "id": "VN", "name": "Vietnam", "value": 88791996, polygonTemplate: { fill:
{ "id": "YE", "name": "Yemen, Rep.", "value": 24799880, polygonTemplate: { fill:
{ "id": "ZM", "name": "Zambia", "value": 13474959, polygonTemplate: { fill:
{ "id": "ZW", "name": "Zimbabwe", "value": 12754378, polygonTemplate: { fill:
colors.getIndex(2) } }
];
var valueLow = Infinity;

var valueHigh = -Infinity;
for (var i = 0; i < data.length; i++) {

var value = data[i].value;
if (value < valueLow) {
valueLow = value;
}
if (value > valueHigh) {
valueHigh = value;
}
}
// radius in degrees
var minRadius = 0.5;
var maxRadius = 5;
// Create circles when data for countries is fully loaded.

polygonSeries.events.on("datavalidated", function () {
circleSeries.data.clear();

var dataContext = data[i];
var countryDataItem = polygonSeries.getDataItemById(dataContext.id);
var countryPolygon = countryDataItem.get("mapPolygon");
var value = dataContext.value;
var radius = minRadius + maxRadius * (value - valueLow) / (valueHigh -

valueLow);
if (countryPolygon) {
var geometry = am5map.getGeoCircle(countryPolygon.visualCentroid(), radius);
circleSeries.data.push({
name: dataContext.name,
value: dataContext.value,
polygonTemplate: dataContext.polygonTemplate,
geometry: geometry
});
}
}
})
// Make stuff animate on load

chart.appear(1000, 100);
}); // end am5.ready()

</script>


<div id="chartdiv"></div>
amCharts
More info
Accessibility Features
About amCharts
Press Kit
Getting support
Subscribe to amNews
Products
amCharts 5: Charts
amCharts 5: Maps
amCharts 5: Stock Chart
WordPress Plugin
Version information
Tools & Resources
Free SVG Maps
Pixel Map Generator
Visited Countries Map
Visited States Map
Contact Us
contact@amcharts.com
Support Center
Legal Stuff
Privacy Policy
Terms & Conditions
Facebook
Twitter
LinkedIn
Copyright © 2006-2022, amCharts. All rights reserved.Source of the demo

<style>
#chartdiv {
width: 100%;
height: 600px;
}
</style>


<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>


<script>
am5.ready(function() {
// Create root element

// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var 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/
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "rotateX",
panY: "rotateY",
projection: am5map.geoOrthographic()
}));
// Create series for background fill

#Background_polygon
var backgroundSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {})
);
backgroundSeries.mapPolygons.template.setAll({
fillOpacity: 0.1,
strokeOpacity: 0
});
backgroundSeries.data.push({
geometry:
am5map.getGeoRectangle(90, 180, -90, -180)
});
// Create main polygon series for countries

var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow
}));
polygonSeries.mapPolygons.template.setAll({
fillOpacity: 0.15,
strokeWidth: 0.5,
stroke: root.interfaceColors.get("background")
});
// Create polygon series for projected circles

var circleSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
circleSeries.mapPolygons.template.setAll({
templateField: "polygonTemplate",
tooltipText: "{name}:{value}"
});
// Define data
var colors = am5.ColorSet.new(root, {});
var data = [
{ "id": "AF", "name": "Afghanistan", "value": 32358260, polygonTemplate: { fill:
{ "id": "AL", "name": "Albania", "value": 3215988, polygonTemplate: { fill:
{ "id": "DZ", "name": "Algeria", "value": 35980193, polygonTemplate: { fill:
{ "id": "AO", "name": "Angola", "value": 19618432, polygonTemplate: { fill:
{ "id": "AR", "name": "Argentina", "value": 40764561, polygonTemplate: { fill:
{ "id": "AM", "name": "Armenia", "value": 3100236, polygonTemplate: { fill:
{ "id": "AU", "name": "Australia", "value": 22605732, polygonTemplate: { fill:
{ "id": "AT", "name": "Austria", "value": 8413429, polygonTemplate: { fill:
{ "id": "AZ", "name": "Azerbaijan", "value": 9306023, polygonTemplate: { fill:
{ "id": "BH", "name": "Bahrain", "value": 1323535, polygonTemplate: { fill:
{ "id": "BD", "name": "Bangladesh", "value": 150493658, polygonTemplate: { fill:
{ "id": "BY", "name": "Belarus", "value": 9559441, polygonTemplate: { fill:
{ "id": "BE", "name": "Belgium", "value": 10754056, polygonTemplate: { fill:
{ "id": "BJ", "name": "Benin", "value": 9099922, polygonTemplate: { fill:
{ "id": "BT", "name": "Bhutan", "value": 738267, polygonTemplate: { fill:
{ "id": "BO", "name": "Bolivia", "value": 10088108, polygonTemplate: { fill:
{ "id": "BA", "name": "Bosnia and Herzegovina", "value": 3752228,
polygonTemplate: { fill: colors.getIndex(8) } },
{ "id": "BW", "name": "Botswana", "value": 2030738, polygonTemplate: { fill:
{ "id": "BR", "name": "Brazil", "value": 196655014, polygonTemplate: { fill:
{ "id": "BN", "name": "Brunei", "value": 405938, polygonTemplate: { fill:
{ "id": "BG", "name": "Bulgaria", "value": 7446135, polygonTemplate: { fill:
{ "id": "BF", "name": "Burkina Faso", "value": 16967845, polygonTemplate: { fill:
{ "id": "BI", "name": "Burundi", "value": 8575172, polygonTemplate: { fill:
{ "id": "KH", "name": "Cambodia", "value": 14305183, polygonTemplate: { fill:
{ "id": "CM", "name": "Cameroon", "value": 20030362, polygonTemplate: { fill:
{ "id": "CA", "name": "Canada", "value": 34349561, polygonTemplate: { fill:
{ "id": "CV", "name": "Cape Verde", "value": 500585, polygonTemplate: { fill:
{ "id": "CF", "name": "Central African Rep.", "value": 4486837, polygonTemplate:
{ "id": "TD", "name": "Chad", "value": 11525496, polygonTemplate: { fill:
{ "id": "CL", "name": "Chile", "value": 17269525, polygonTemplate: { fill:
{ "id": "CN", "name": "China", "value": 1347565324, polygonTemplate: { fill:
{ "id": "CO", "name": "Colombia", "value": 46927125, polygonTemplate: { fill:
{ "id": "KM", "name": "Comoros", "value": 753943, polygonTemplate: { fill:
{ "id": "CD", "name": "Congo, Dem. Rep.", "value": 67757577, polygonTemplate:
{ "id": "CG", "name": "Congo, Rep.", "value": 4139748, polygonTemplate: { fill:
{ "id": "CR", "name": "Costa Rica", "value": 4726575, polygonTemplate: { fill:
{ "id": "CI", "name": "Cote d'Ivoire", "value": 20152894, polygonTemplate:
{ "id": "HR", "name": "Croatia", "value": 4395560, polygonTemplate: { fill:
{ "id": "CU", "name": "Cuba", "value": 11253665, polygonTemplate: { fill:
{ "id": "CY", "name": "Cyprus", "value": 1116564, polygonTemplate: { fill:
{ "id": "CZ", "name": "Czech Rep.", "value": 10534293, polygonTemplate: { fill:
{ "id": "DK", "name": "Denmark", "value": 5572594, polygonTemplate: { fill:
{ "id": "DJ", "name": "Djibouti", "value": 905564, polygonTemplate: { fill:
{ "id": "DO", "name": "Dominican Rep.", "value": 10056181, polygonTemplate:
{ "id": "EC", "name": "Ecuador", "value": 14666055, polygonTemplate: { fill:
{ "id": "EG", "name": "Egypt", "value": 82536770, polygonTemplate: { fill:
{ "id": "SV", "name": "El Salvador", "value": 6227491, polygonTemplate: { fill:
{ "id": "GQ", "name": "Equatorial Guinea", "value": 720213, polygonTemplate:
{ "id": "ER", "name": "Eritrea", "value": 5415280, polygonTemplate: { fill:
{ "id": "EE", "name": "Estonia", "value": 1340537, polygonTemplate: { fill:
{ "id": "ET", "name": "Ethiopia", "value": 84734262, polygonTemplate: { fill:
{ "id": "FJ", "name": "Fiji", "value": 868406, polygonTemplate: { fill:
{ "id": "FI", "name": "Finland", "value": 5384770, polygonTemplate: { fill:
{ "id": "FR", "name": "France", "value": 63125894, polygonTemplate: { fill:
{ "id": "GA", "name": "Gabon", "value": 1534262, polygonTemplate: { fill:
{ "id": "GM", "name": "Gambia", "value": 1776103, polygonTemplate: { fill:
{ "id": "GE", "name": "Georgia", "value": 4329026, polygonTemplate: { fill:
{ "id": "DE", "name": "Germany", "value": 82162512, polygonTemplate: { fill:
{ "id": "GH", "name": "Ghana", "value": 24965816, polygonTemplate: { fill:
{ "id": "GR", "name": "Greece", "value": 11390031, polygonTemplate: { fill:
{ "id": "GT", "name": "Guatemala", "value": 14757316, polygonTemplate: { fill:
{ "id": "GN", "name": "Guinea", "value": 10221808, polygonTemplate: { fill:
{ "id": "GW", "name": "Guinea-Bissau", "value": 1547061, polygonTemplate: { fill:
{ "id": "GY", "name": "Guyana", "value": 756040, polygonTemplate: { fill:
{ "id": "HT", "name": "Haiti", "value": 10123787, polygonTemplate: { fill:
{ "id": "HN", "name": "Honduras", "value": 7754687, polygonTemplate: { fill:
{ "id": "HK", "name": "Hong Kong, China", "value": 7122187, polygonTemplate:
{ "id": "HU", "name": "Hungary", "value": 9966116, polygonTemplate: { fill:
{ "id": "IS", "name": "Iceland", "value": 324366, polygonTemplate: { fill:
{ "id": "IN", "name": "India", "value": 1241491960, polygonTemplate: { fill:
{ "id": "ID", "name": "Indonesia", "value": 242325638, polygonTemplate: { fill:
{ "id": "IR", "name": "Iran", "value": 74798599, polygonTemplate: { fill:
{ "id": "IQ", "name": "Iraq", "value": 32664942, polygonTemplate: { fill:
{ "id": "IE", "name": "Ireland", "value": 4525802, polygonTemplate: { fill:
{ "id": "IL", "name": "Israel", "value": 7562194, polygonTemplate: { fill:
{ "id": "IT", "name": "Italy", "value": 60788694, polygonTemplate: { fill:
{ "id": "JM", "name": "Jamaica", "value": 2751273, polygonTemplate: { fill:
{ "id": "JP", "name": "Japan", "value": 126497241, polygonTemplate: { fill:
{ "id": "JO", "name": "Jordan", "value": 6330169, polygonTemplate: { fill:
{ "id": "KZ", "name": "Kazakhstan", "value": 16206750, polygonTemplate: { fill:
{ "id": "KE", "name": "Kenya", "value": 41609728, polygonTemplate: { fill:
{ "id": "KP", "name": "Korea, Dem. Rep.", "value": 24451285, polygonTemplate:
{ "id": "KR", "name": "Korea, Rep.", "value": 48391343, polygonTemplate: { fill:
{ "id": "KW", "name": "Kuwait", "value": 2818042, polygonTemplate: { fill:
{ "id": "KG", "name": "Kyrgyzstan", "value": 5392580, polygonTemplate: { fill:
{ "id": "LA", "name": "Laos", "value": 6288037, polygonTemplate: { fill:
{ "id": "LV", "name": "Latvia", "value": 2243142, polygonTemplate: { fill:
{ "id": "LB", "name": "Lebanon", "value": 4259405, polygonTemplate: { fill:
{ "id": "LS", "name": "Lesotho", "value": 2193843, polygonTemplate: { fill:
{ "id": "LR", "name": "Liberia", "value": 4128572, polygonTemplate: { fill:
{ "id": "LY", "name": "Libya", "value": 6422772, polygonTemplate: { fill:
{ "id": "LT", "name": "Lithuania", "value": 3307481, polygonTemplate: { fill:
{ "id": "LU", "name": "Luxembourg", "value": 515941, polygonTemplate: { fill:
{ "id": "MK", "name": "Macedonia, FYR", "value": 2063893, polygonTemplate:
{ "id": "MG", "name": "Madagascar", "value": 21315135, polygonTemplate: { fill:
{ "id": "MW", "name": "Malawi", "value": 15380888, polygonTemplate: { fill:
{ "id": "MY", "name": "Malaysia", "value": 28859154, polygonTemplate: { fill:
{ "id": "ML", "name": "Mali", "value": 15839538, polygonTemplate: { fill:
{ "id": "MR", "name": "Mauritania", "value": 3541540, polygonTemplate: { fill:
{ "id": "MU", "name": "Mauritius", "value": 1306593, polygonTemplate: { fill:
{ "id": "MX", "name": "Mexico", "value": 114793341, polygonTemplate: { fill:
{ "id": "MD", "name": "Moldova", "value": 3544864, polygonTemplate: { fill:
{ "id": "MN", "name": "Mongolia", "value": 2800114, polygonTemplate: { fill:
{ "id": "ME", "name": "Montenegro", "value": 632261, polygonTemplate: { fill:
{ "id": "MA", "name": "Morocco", "value": 32272974, polygonTemplate: { fill:
{ "id": "MZ", "name": "Mozambique", "value": 23929708, polygonTemplate: { fill:
{ "id": "MM", "name": "Myanmar", "value": 48336763, polygonTemplate: { fill:
{ "id": "NA", "name": "Namibia", "value": 2324004, polygonTemplate: { fill:
{ "id": "NP", "name": "Nepal", "value": 30485798, polygonTemplate: { fill:
{ "id": "NL", "name": "Netherlands", "value": 16664746, polygonTemplate: { fill:
{ "id": "NZ", "name": "New Zealand", "value": 4414509, polygonTemplate: { fill:
{ "id": "NI", "name": "Nicaragua", "value": 5869859, polygonTemplate: { fill:
{ "id": "NE", "name": "Niger", "value": 16068994, polygonTemplate: { fill:
{ "id": "NG", "name": "Nigeria", "value": 162470737, polygonTemplate: { fill:
{ "id": "NO", "name": "Norway", "value": 4924848, polygonTemplate: { fill:
{ "id": "OM", "name": "Oman", "value": 2846145, polygonTemplate: { fill:
{ "id": "PK", "name": "Pakistan", "value": 176745364, polygonTemplate: { fill:
{ "id": "PA", "name": "Panama", "value": 3571185, polygonTemplate: { fill:
{ "id": "PG", "name": "Papua New Guinea", "value": 7013829, polygonTemplate:
{ "id": "PY", "name": "Paraguay", "value": 6568290, polygonTemplate: { fill:
{ "id": "PE", "name": "Peru", "value": 29399817, polygonTemplate: { fill:
{ "id": "PH", "name": "Philippines", "value": 94852030, polygonTemplate: { fill:
{ "id": "PL", "name": "Poland", "value": 38298949, polygonTemplate: { fill:
{ "id": "PT", "name": "Portugal", "value": 10689663, polygonTemplate: { fill:
{ "id": "PR", "name": "Puerto Rico", "value": 3745526, polygonTemplate: { fill:
{ "id": "QA", "name": "Qatar", "value": 1870041, polygonTemplate: { fill:
{ "id": "RO", "name": "Romania", "value": 21436495, polygonTemplate: { fill:
{ "id": "RU", "name": "Russia", "value": 142835555, polygonTemplate: { fill:
{ "id": "RW", "name": "Rwanda", "value": 10942950, polygonTemplate: { fill:
{ "id": "SA", "name": "Saudi Arabia", "value": 28082541, polygonTemplate: { fill:
{ "id": "SN", "name": "Senegal", "value": 12767556, polygonTemplate: { fill:
{ "id": "RS", "name": "Serbia", "value": 9853969, polygonTemplate: { fill:
{ "id": "SL", "name": "Sierra Leone", "value": 5997486, polygonTemplate: { fill:
{ "id": "SG", "name": "Singapore", "value": 5187933, polygonTemplate: { fill:
{ "id": "SK", "name": "Slovak Republic", "value": 5471502, polygonTemplate:
{ "id": "SI", "name": "Slovenia", "value": 2035012, polygonTemplate: { fill:
{ "id": "SB", "name": "Solomon Islands", "value": 552267, polygonTemplate:
{ "id": "SO", "name": "Somalia", "value": 9556873, polygonTemplate: { fill:
{ "id": "ZA", "name": "South Africa", "value": 50459978, polygonTemplate: { fill:
{ "id": "ES", "name": "Spain", "value": 46454895, polygonTemplate: { fill:
{ "id": "LK", "name": "Sri Lanka", "value": 21045394, polygonTemplate: { fill:
{ "id": "SD", "name": "Sudan", "value": 34735288, polygonTemplate: { fill:
{ "id": "SR", "name": "Suriname", "value": 529419, polygonTemplate: { fill:
{ "id": "SZ", "name": "Swaziland", "value": 1203330, polygonTemplate: { fill:
{ "id": "SE", "name": "Sweden", "value": 9440747, polygonTemplate: { fill:
{ "id": "CH", "name": "Switzerland", "value": 7701690, polygonTemplate: { fill:
{ "id": "SY", "name": "Syria", "value": 20766037, polygonTemplate: { fill:
{ "id": "TW", "name": "Taiwan", "value": 23072000, polygonTemplate: { fill:
{ "id": "TJ", "name": "Tajikistan", "value": 6976958, polygonTemplate: { fill:
{ "id": "TZ", "name": "Tanzania", "value": 46218486, polygonTemplate: { fill:
{ "id": "TH", "name": "Thailand", "value": 69518555, polygonTemplate: { fill:
{ "id": "TG", "name": "Togo", "value": 6154813, polygonTemplate: { fill:
{ "id": "TT", "name": "Trinidad and Tobago", "value": 1346350, polygonTemplate: {
fill: colors.getIndex(4) } },
{ "id": "TN", "name": "Tunisia", "value": 10594057, polygonTemplate: { fill:
{ "id": "TR", "name": "Turkey", "value": 73639596, polygonTemplate: { fill:
{ "id": "TM", "name": "Turkmenistan", "value": 5105301, polygonTemplate: { fill:
{ "id": "UG", "name": "Uganda", "value": 34509205, polygonTemplate: { fill:
{ "id": "UA", "name": "Ukraine", "value": 45190180, polygonTemplate: { fill:
{ "id": "AE", "name": "United Arab Emirates", "value": 7890924, polygonTemplate:
{ "id": "GB", "name": "United Kingdom", "value": 62417431, polygonTemplate:
{ "id": "US", "name": "United States", "value": 313085380, polygonTemplate:
{ "id": "UY", "name": "Uruguay", "value": 3380008, polygonTemplate: { fill:
{ "id": "UZ", "name": "Uzbekistan", "value": 27760267, polygonTemplate: { fill:
{ "id": "VE", "name": "Venezuela", "value": 29436891, polygonTemplate: { fill:
{ "id": "PS", "name": "West Bank and Gaza", "value": 4152369, polygonTemplate:
{ "id": "VN", "name": "Vietnam", "value": 88791996, polygonTemplate: { fill:
{ "id": "YE", "name": "Yemen, Rep.", "value": 24799880, polygonTemplate: { fill:
{ "id": "ZM", "name": "Zambia", "value": 13474959, polygonTemplate: { fill:
{ "id": "ZW", "name": "Zimbabwe", "value": 12754378, polygonTemplate: { fill:
colors.getIndex(2) } }
];
var valueLow = Infinity;

var valueHigh = -Infinity;

var value = data[i].value;
if (value < valueLow) {
valueLow = value;
}
if (value > valueHigh) {
valueHigh = value;
}
}
// radius in degrees
var minRadius = 0.5;
var maxRadius = 5;
// Create circles when data for countries is fully loaded.

polygonSeries.events.on("datavalidated", function () {
circleSeries.data.clear();

var dataContext = data[i];
var countryDataItem = polygonSeries.getDataItemById(dataContext.id);
var countryPolygon = countryDataItem.get("mapPolygon");
var value = dataContext.value;
var radius = minRadius + maxRadius * (value - valueLow) / (valueHigh -

valueLow);
if (countryPolygon) {
var geometry = am5map.getGeoCircle(countryPolygon.visualCentroid(), radius);
circleSeries.data.push({
name: dataContext.name,
value: dataContext.value,
polygonTemplate: dataContext.polygonTemplate,
geometry: geometry
});
}
}
})
// Make stuff animate on load

chart.appear(1000, 100);
}); // end am5.ready()

</script>


<div id="chartdiv"></div>

Rotating Globe With Circles - Amcharts

Uploaded by

Copyright:

Available Formats

You might also like

Rotating Globe With Circles - Amcharts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rotating Globe With Circles - Amcharts

Uploaded by

Copyright:

Available Formats

amCharts

Learn more about map projections in our documentation.

// Create root element

// Create the map chart

// Create main polygon series for countries

// Create polygon series for projected circles

var valueLow = Infinity;

for (var i = 0; i < data.length; i++) {

// Create circles when data for countries is fully loaded.

for (var i = 0; i < data.length; i++) {

var value = dataContext.value;

var radius = minRadius + maxRadius * (value - valueLow) / (valueHigh -

// Make stuff animate on load

}); // end am5.ready()

// Create root element

// Create the map chart

// Create series for background fill

// Create main polygon series for countries

// Create polygon series for projected circles

var valueLow = Infinity;

for (var i = 0; i < data.length; i++) {

// Create circles when data for countries is fully loaded.

for (var i = 0; i < data.length; i++) {

var value = dataContext.value;

var radius = minRadius + maxRadius * (value - valueLow) / (valueHigh -

// Make stuff animate on load

}); // end am5.ready()

You might also like