Map with Animated Bubbles

index.html

<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>
<div id="chartdiv"></div>

map-with-animated-bubbles.markdown

Map with Animated Bubbles

Animating bullet sizes and values is a great way to showcase data changes over time. This demo shows you how to do it on a map.

Key implementation details

We use MapPointSeries to place the bubbles on the map. polygonIdField is set to the ID of the country polygon and the chart places the point in the center of that polygon/country. We then add a Circle as a bullet for the series. Finally, we use "heat rules" to apply settings based on the data values.

Then we just change the underlying values on a timer.

Related tutorials

• Map chart
• Map point series
• Bullets
• Heat rules

A Pen by Harshad Satra on CodePen.

License.

script.js

/**
 * ---------------------------------------
 * 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/
 * ---------------------------------------
 */

var data = [
  {
    id: "US",
    name: "United States",
    value: 0
  }, {
    id: "GB",
    name: "United Kingdom",
    value: 0
  }, {
    id: "CN",
    name: "China",
    value: 100
  }, {
    id: "IN",
    name: "India",
    value: 100
  }, {
    id: "AU",
    name: "Australia",
    value: 100
  }, {
    id: "CA",
    name: "Canada",
    value: 100
  }, {
    id: "BR",
    name: "Brasil",
    value: 100
  }, {
    id: "ZA",
    name: "South Africa",
    value: 100
  }
];

var root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);

var chart = root.container.children.push(am5map.MapChart.new(root, {}));

var polygonSeries = chart.series.push(
  am5map.MapPolygonSeries.new(root, {
    geoJSON: am5geodata_worldLow,
    exclude: ["AQ"]
  })
);

var bubbleSeries = chart.series.push(
  am5map.MapPointSeries.new(root, {
    valueField: "value",
    calculateAggregates: true,
    polygonIdField: "id"
  })
);

var circleTemplate = am5.Template.new({});

bubbleSeries.bullets.push(function(root, series, dataItem) {
  var container = am5.Container.new(root, {});

  var countryLabel = container.children.push(
    am5.Label.new(root, {
      text: "{name}",
      paddingLeft: 5,
      populateText: true,
      fontWeight: "bold",
      fontSize: 13,
      centerY: am5.p50
    })
  );

  return am5.Bullet.new(root, {
    sprite: container,
    dynamic: true
  });
});


bubbleSeries.data.setAll(data);

style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px
}