Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/box2d/Box2dWeb-2.1.a.3.min.js"></script>

<div id="chartdiv" style="width: 100%; height: 600px; margin:auto"></div>
<input type="button" id="btn" class="btn" style="position:absolute; bottom: 50px; left:50px;" value="run demo" onclick="startInterval();"></input>
<!-- this is only needed for debud draw
<canvas id="canvas" width="1000px" height="700px"></canvas> -->
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lato:400);

body {
  font-family:Lato,Tahoma;
  color:#e7e7e7;
  font-size:1em;
  background-color:#222;
}

.btn {
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border:0;
  border-radius: 3px;
  color: #ffffff;
  font-size: 15px;
  background: #3d5296;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #4462c6;
  text-decoration: none;
}
              
            
!

JS

              
                   /*
        although ammap has methods like getAreaCenterLatitude and getAreaCenterLongitude,
        they are not suitable in quite a lot of cases as the center of some countries
        is even outside the country itself (like US, because of Alaska and Hawaii)
        That's why wehave the coordinates stored here
        */

       var latlong = {};
       latlong["AD"] = {
           "latitude": 42.5,
           "longitude": 1.5
       };
       latlong["AE"] = {
           "latitude": 24,
           "longitude": 54
       };
       latlong["AF"] = {
           "latitude": 33,
           "longitude": 65
       };
       latlong["AG"] = {
           "latitude": 17.05,
           "longitude": -61.8
       };
       latlong["AI"] = {
           "latitude": 18.25,
           "longitude": -63.1667
       };
       latlong["AL"] = {
           "latitude": 41,
           "longitude": 20
       };
       latlong["AM"] = {
           "latitude": 40,
           "longitude": 45
       };
       latlong["AN"] = {
           "latitude": 12.25,
           "longitude": -68.75
       };
       latlong["AO"] = {
           "latitude": -12.5,
           "longitude": 18.5
       };
       latlong["AP"] = {
           "latitude": 35,
           "longitude": 105
       };
       latlong["AQ"] = {
           "latitude": -90,
           "longitude": 0
       };
       latlong["AR"] = {
           "latitude": -34,
           "longitude": -64
       };
       latlong["AS"] = {
           "latitude": -14.3333,
           "longitude": -170
       };
       latlong["AT"] = {
           "latitude": 47.3333,
           "longitude": 13.3333
       };
       latlong["AU"] = {
           "latitude": -27,
           "longitude": 133
       };
       latlong["AW"] = {
           "latitude": 12.5,
           "longitude": -69.9667
       };
       latlong["AZ"] = {
           "latitude": 40.5,
           "longitude": 47.5
       };
       latlong["BA"] = {
           "latitude": 44,
           "longitude": 18
       };
       latlong["BB"] = {
           "latitude": 13.1667,
           "longitude": -59.5333
       };
       latlong["BD"] = {
           "latitude": 24,
           "longitude": 90
       };
       latlong["BE"] = {
           "latitude": 50.8333,
           "longitude": 4
       };
       latlong["BF"] = {
           "latitude": 13,
           "longitude": -2
       };
       latlong["BG"] = {
           "latitude": 43,
           "longitude": 25
       };
       latlong["BH"] = {
           "latitude": 26,
           "longitude": 50.55
       };
       latlong["BI"] = {
           "latitude": -3.5,
           "longitude": 30
       };
       latlong["BJ"] = {
           "latitude": 9.5,
           "longitude": 2.25
       };
       latlong["BM"] = {
           "latitude": 32.3333,
           "longitude": -64.75
       };
       latlong["BN"] = {
           "latitude": 4.5,
           "longitude": 114.6667
       };
       latlong["BO"] = {
           "latitude": -17,
           "longitude": -65
       };
       latlong["BR"] = {
           "latitude": -10,
           "longitude": -55
       };
       latlong["BS"] = {
           "latitude": 24.25,
           "longitude": -76
       };
       latlong["BT"] = {
           "latitude": 27.5,
           "longitude": 90.5
       };
       latlong["BV"] = {
           "latitude": -54.4333,
           "longitude": 3.4
       };
       latlong["BW"] = {
           "latitude": -22,
           "longitude": 24
       };
       latlong["BY"] = {
           "latitude": 53,
           "longitude": 28
       };
       latlong["BZ"] = {
           "latitude": 17.25,
           "longitude": -88.75
       };
       latlong["CA"] = {
           "latitude": 54,
           "longitude": -100
       };
       latlong["CC"] = {
           "latitude": -12.5,
           "longitude": 96.8333
       };
       latlong["CD"] = {
           "latitude": 0,
           "longitude": 25
       };
       latlong["CF"] = {
           "latitude": 7,
           "longitude": 21
       };
       latlong["CG"] = {
           "latitude": -1,
           "longitude": 15
       };
       latlong["CH"] = {
           "latitude": 47,
           "longitude": 8
       };
       latlong["CI"] = {
           "latitude": 8,
           "longitude": -5
       };
       latlong["CK"] = {
           "latitude": -21.2333,
           "longitude": -159.7667
       };
       latlong["CL"] = {
           "latitude": -30,
           "longitude": -71
       };
       latlong["CM"] = {
           "latitude": 6,
           "longitude": 12
       };
       latlong["CN"] = {
           "latitude": 35,
           "longitude": 105
       };
       latlong["CO"] = {
           "latitude": 4,
           "longitude": -72
       };
       latlong["CR"] = {
           "latitude": 10,
           "longitude": -84
       };
       latlong["CU"] = {
           "latitude": 21.5,
           "longitude": -80
       };
       latlong["CV"] = {
           "latitude": 16,
           "longitude": -24
       };
       latlong["CX"] = {
           "latitude": -10.5,
           "longitude": 105.6667
       };
       latlong["CY"] = {
           "latitude": 35,
           "longitude": 33
       };
       latlong["CZ"] = {
           "latitude": 49.75,
           "longitude": 15.5
       };
       latlong["DE"] = {
           "latitude": 51,
           "longitude": 9
       };
       latlong["DJ"] = {
           "latitude": 11.5,
           "longitude": 43
       };
       latlong["DK"] = {
           "latitude": 56,
           "longitude": 10
       };
       latlong["DM"] = {
           "latitude": 15.4167,
           "longitude": -61.3333
       };
       latlong["DO"] = {
           "latitude": 19,
           "longitude": -70.6667
       };
       latlong["DZ"] = {
           "latitude": 28,
           "longitude": 3
       };
       latlong["EC"] = {
           "latitude": -2,
           "longitude": -77.5
       };
       latlong["EE"] = {
           "latitude": 59,
           "longitude": 26
       };
       latlong["EG"] = {
           "latitude": 27,
           "longitude": 30
       };
       latlong["EH"] = {
           "latitude": 24.5,
           "longitude": -13
       };
       latlong["ER"] = {
           "latitude": 15,
           "longitude": 39
       };
       latlong["ES"] = {
           "latitude": 40,
           "longitude": -4
       };
       latlong["ET"] = {
           "latitude": 8,
           "longitude": 38
       };
       latlong["EU"] = {
           "latitude": 47,
           "longitude": 8
       };
       latlong["FI"] = {
           "latitude": 62,
           "longitude": 26
       };
       latlong["FJ"] = {
           "latitude": -18,
           "longitude": 175
       };
       latlong["FK"] = {
           "latitude": -51.75,
           "longitude": -59
       };
       latlong["FM"] = {
           "latitude": 6.9167,
           "longitude": 158.25
       };
       latlong["FO"] = {
           "latitude": 62,
           "longitude": -7
       };
       latlong["FR"] = {
           "latitude": 46,
           "longitude": 2
       };
       latlong["GA"] = {
           "latitude": -1,
           "longitude": 11.75
       };
       latlong["GB"] = {
           "latitude": 54,
           "longitude": -2
       };
       latlong["GD"] = {
           "latitude": 12.1167,
           "longitude": -61.6667
       };
       latlong["GE"] = {
           "latitude": 42,
           "longitude": 43.5
       };
       latlong["GF"] = {
           "latitude": 4,
           "longitude": -53
       };
       latlong["GH"] = {
           "latitude": 8,
           "longitude": -2
       };
       latlong["GI"] = {
           "latitude": 36.1833,
           "longitude": -5.3667
       };
       latlong["GL"] = {
           "latitude": 72,
           "longitude": -40
       };
       latlong["GM"] = {
           "latitude": 13.4667,
           "longitude": -16.5667
       };
       latlong["GN"] = {
           "latitude": 11,
           "longitude": -10
       };
       latlong["GP"] = {
           "latitude": 16.25,
           "longitude": -61.5833
       };
       latlong["GQ"] = {
           "latitude": 2,
           "longitude": 10
       };
       latlong["GR"] = {
           "latitude": 39,
           "longitude": 22
       };
       latlong["GS"] = {
           "latitude": -54.5,
           "longitude": -37
       };
       latlong["GT"] = {
           "latitude": 15.5,
           "longitude": -90.25
       };
       latlong["GU"] = {
           "latitude": 13.4667,
           "longitude": 144.7833
       };
       latlong["GW"] = {
           "latitude": 12,
           "longitude": -15
       };
       latlong["GY"] = {
           "latitude": 5,
           "longitude": -59
       };
       latlong["HK"] = {
           "latitude": 22.25,
           "longitude": 114.1667
       };
       latlong["HM"] = {
           "latitude": -53.1,
           "longitude": 72.5167
       };
       latlong["HN"] = {
           "latitude": 15,
           "longitude": -86.5
       };
       latlong["HR"] = {
           "latitude": 45.1667,
           "longitude": 15.5
       };
       latlong["HT"] = {
           "latitude": 19,
           "longitude": -72.4167
       };
       latlong["HU"] = {
           "latitude": 47,
           "longitude": 20
       };
       latlong["ID"] = {
           "latitude": -5,
           "longitude": 120
       };
       latlong["IE"] = {
           "latitude": 53,
           "longitude": -8
       };
       latlong["IL"] = {
           "latitude": 31.5,
           "longitude": 34.75
       };
       latlong["IN"] = {
           "latitude": 20,
           "longitude": 77
       };
       latlong["IO"] = {
           "latitude": -6,
           "longitude": 71.5
       };
       latlong["IQ"] = {
           "latitude": 33,
           "longitude": 44
       };
       latlong["IR"] = {
           "latitude": 32,
           "longitude": 53
       };
       latlong["IS"] = {
           "latitude": 65,
           "longitude": -18
       };
       latlong["IT"] = {
           "latitude": 42.8333,
           "longitude": 12.8333
       };
       latlong["JM"] = {
           "latitude": 18.25,
           "longitude": -77.5
       };
       latlong["JO"] = {
           "latitude": 31,
           "longitude": 36
       };
       latlong["JP"] = {
           "latitude": 36,
           "longitude": 138
       };
       latlong["KE"] = {
           "latitude": 1,
           "longitude": 38
       };
       latlong["KG"] = {
           "latitude": 41,
           "longitude": 75
       };
       latlong["KH"] = {
           "latitude": 13,
           "longitude": 105
       };
       latlong["KI"] = {
           "latitude": 1.4167,
           "longitude": 173
       };
       latlong["KM"] = {
           "latitude": -12.1667,
           "longitude": 44.25
       };
       latlong["KN"] = {
           "latitude": 17.3333,
           "longitude": -62.75
       };
       latlong["KP"] = {
           "latitude": 40,
           "longitude": 127
       };
       latlong["KR"] = {
           "latitude": 37,
           "longitude": 127.5
       };
       latlong["KW"] = {
           "latitude": 29.3375,
           "longitude": 47.6581
       };
       latlong["KY"] = {
           "latitude": 19.5,
           "longitude": -80.5
       };
       latlong["KZ"] = {
           "latitude": 48,
           "longitude": 68
       };
       latlong["LA"] = {
           "latitude": 18,
           "longitude": 105
       };
       latlong["LB"] = {
           "latitude": 33.8333,
           "longitude": 35.8333
       };
       latlong["LC"] = {
           "latitude": 13.8833,
           "longitude": -61.1333
       };
       latlong["LI"] = {
           "latitude": 47.1667,
           "longitude": 9.5333
       };
       latlong["LK"] = {
           "latitude": 7,
           "longitude": 81
       };
       latlong["LR"] = {
           "latitude": 6.5,
           "longitude": -9.5
       };
       latlong["LS"] = {
           "latitude": -29.5,
           "longitude": 28.5
       };
       latlong["LT"] = {
           "latitude": 55,
           "longitude": 24
       };
       latlong["LU"] = {
           "latitude": 49.75,
           "longitude": 6
       };
       latlong["LV"] = {
           "latitude": 57,
           "longitude": 25
       };
       latlong["LY"] = {
           "latitude": 25,
           "longitude": 17
       };
       latlong["MA"] = {
           "latitude": 32,
           "longitude": -5
       };
       latlong["MC"] = {
           "latitude": 43.7333,
           "longitude": 7.4
       };
       latlong["MD"] = {
           "latitude": 47,
           "longitude": 29
       };
       latlong["ME"] = {
           "latitude": 42.5,
           "longitude": 19.4
       };
       latlong["MG"] = {
           "latitude": -20,
           "longitude": 47
       };
       latlong["MH"] = {
           "latitude": 9,
           "longitude": 168
       };
       latlong["MK"] = {
           "latitude": 41.8333,
           "longitude": 22
       };
       latlong["ML"] = {
           "latitude": 17,
           "longitude": -4
       };
       latlong["MM"] = {
           "latitude": 22,
           "longitude": 98
       };
       latlong["MN"] = {
           "latitude": 46,
           "longitude": 105
       };
       latlong["MO"] = {
           "latitude": 22.1667,
           "longitude": 113.55
       };
       latlong["MP"] = {
           "latitude": 15.2,
           "longitude": 145.75
       };
       latlong["MQ"] = {
           "latitude": 14.6667,
           "longitude": -61
       };
       latlong["MR"] = {
           "latitude": 20,
           "longitude": -12
       };
       latlong["MS"] = {
           "latitude": 16.75,
           "longitude": -62.2
       };
       latlong["MT"] = {
           "latitude": 35.8333,
           "longitude": 14.5833
       };
       latlong["MU"] = {
           "latitude": -20.2833,
           "longitude": 57.55
       };
       latlong["MV"] = {
           "latitude": 3.25,
           "longitude": 73
       };
       latlong["MW"] = {
           "latitude": -13.5,
           "longitude": 34
       };
       latlong["MX"] = {
           "latitude": 23,
           "longitude": -102
       };
       latlong["MY"] = {
           "latitude": 2.5,
           "longitude": 112.5
       };
       latlong["MZ"] = {
           "latitude": -18.25,
           "longitude": 35
       };
       latlong["NA"] = {
           "latitude": -22,
           "longitude": 17
       };
       latlong["NC"] = {
           "latitude": -21.5,
           "longitude": 165.5
       };
       latlong["NE"] = {
           "latitude": 16,
           "longitude": 8
       };
       latlong["NF"] = {
           "latitude": -29.0333,
           "longitude": 167.95
       };
       latlong["NG"] = {
           "latitude": 10,
           "longitude": 8
       };
       latlong["NI"] = {
           "latitude": 13,
           "longitude": -85
       };
       latlong["NL"] = {
           "latitude": 52.5,
           "longitude": 5.75
       };
       latlong["NO"] = {
           "latitude": 62,
           "longitude": 10
       };
       latlong["NP"] = {
           "latitude": 28,
           "longitude": 84
       };
       latlong["NR"] = {
           "latitude": -0.5333,
           "longitude": 166.9167
       };
       latlong["NU"] = {
           "latitude": -19.0333,
           "longitude": -169.8667
       };
       latlong["NZ"] = {
           "latitude": -41,
           "longitude": 174
       };
       latlong["OM"] = {
           "latitude": 21,
           "longitude": 57
       };
       latlong["PA"] = {
           "latitude": 9,
           "longitude": -80
       };
       latlong["PE"] = {
           "latitude": -10,
           "longitude": -76
       };
       latlong["PF"] = {
           "latitude": -15,
           "longitude": -140
       };
       latlong["PG"] = {
           "latitude": -6,
           "longitude": 147
       };
       latlong["PH"] = {
           "latitude": 13,
           "longitude": 122
       };
       latlong["PK"] = {
           "latitude": 30,
           "longitude": 70
       };
       latlong["PL"] = {
           "latitude": 52,
           "longitude": 20
       };
       latlong["PM"] = {
           "latitude": 46.8333,
           "longitude": -56.3333
       };
       latlong["PR"] = {
           "latitude": 18.25,
           "longitude": -66.5
       };
       latlong["PS"] = {
           "latitude": 32,
           "longitude": 35.25
       };
       latlong["PT"] = {
           "latitude": 39.5,
           "longitude": -8
       };
       latlong["PW"] = {
           "latitude": 7.5,
           "longitude": 134.5
       };
       latlong["PY"] = {
           "latitude": -23,
           "longitude": -58
       };
       latlong["QA"] = {
           "latitude": 25.5,
           "longitude": 51.25
       };
       latlong["RE"] = {
           "latitude": -21.1,
           "longitude": 55.6
       };
       latlong["RO"] = {
           "latitude": 46,
           "longitude": 25
       };
       latlong["RS"] = {
           "latitude": 44,
           "longitude": 21
       };
       latlong["RU"] = {
           "latitude": 60,
           "longitude": 100
       };
       latlong["RW"] = {
           "latitude": -2,
           "longitude": 30
       };
       latlong["SA"] = {
           "latitude": 25,
           "longitude": 45
       };
       latlong["SB"] = {
           "latitude": -8,
           "longitude": 159
       };
       latlong["SC"] = {
           "latitude": -4.5833,
           "longitude": 55.6667
       };
       latlong["SD"] = {
           "latitude": 15,
           "longitude": 30
       };
       latlong["SE"] = {
           "latitude": 62,
           "longitude": 15
       };
       latlong["SG"] = {
           "latitude": 1.3667,
           "longitude": 103.8
       };
       latlong["SH"] = {
           "latitude": -15.9333,
           "longitude": -5.7
       };
       latlong["SI"] = {
           "latitude": 46,
           "longitude": 15
       };
       latlong["SJ"] = {
           "latitude": 78,
           "longitude": 20
       };
       latlong["SK"] = {
           "latitude": 48.6667,
           "longitude": 19.5
       };
       latlong["SL"] = {
           "latitude": 8.5,
           "longitude": -11.5
       };
       latlong["SM"] = {
           "latitude": 43.7667,
           "longitude": 12.4167
       };
       latlong["SN"] = {
           "latitude": 14,
           "longitude": -14
       };
       latlong["SO"] = {
           "latitude": 10,
           "longitude": 49
       };
       latlong["SR"] = {
           "latitude": 4,
           "longitude": -56
       };
       latlong["ST"] = {
           "latitude": 1,
           "longitude": 7
       };
       latlong["SV"] = {
           "latitude": 13.8333,
           "longitude": -88.9167
       };
       latlong["SY"] = {
           "latitude": 35,
           "longitude": 38
       };
       latlong["SZ"] = {
           "latitude": -26.5,
           "longitude": 31.5
       };
       latlong["TC"] = {
           "latitude": 21.75,
           "longitude": -71.5833
       };
       latlong["TD"] = {
           "latitude": 15,
           "longitude": 19
       };
       latlong["TF"] = {
           "latitude": -43,
           "longitude": 67
       };
       latlong["TG"] = {
           "latitude": 8,
           "longitude": 1.1667
       };
       latlong["TH"] = {
           "latitude": 15,
           "longitude": 100
       };
       latlong["TJ"] = {
           "latitude": 39,
           "longitude": 71
       };
       latlong["TK"] = {
           "latitude": -9,
           "longitude": -172
       };
       latlong["TM"] = {
           "latitude": 40,
           "longitude": 60
       };
       latlong["TN"] = {
           "latitude": 34,
           "longitude": 9
       };
       latlong["TO"] = {
           "latitude": -20,
           "longitude": -175
       };
       latlong["TR"] = {
           "latitude": 39,
           "longitude": 35
       };
       latlong["TT"] = {
           "latitude": 11,
           "longitude": -61
       };
       latlong["TV"] = {
           "latitude": -8,
           "longitude": 178
       };
       latlong["TW"] = {
           "latitude": 23.5,
           "longitude": 121
       };
       latlong["TZ"] = {
           "latitude": -6,
           "longitude": 35
       };
       latlong["UA"] = {
           "latitude": 49,
           "longitude": 32
       };
       latlong["UG"] = {
           "latitude": 1,
           "longitude": 32
       };
       latlong["UM"] = {
           "latitude": 19.2833,
           "longitude": 166.6
       };
       latlong["US"] = {
           "latitude": 38,
           "longitude": -97
       };
       latlong["UY"] = {
           "latitude": -33,
           "longitude": -56
       };
       latlong["UZ"] = {
           "latitude": 41,
           "longitude": 64
       };
       latlong["VA"] = {
           "latitude": 41.9,
           "longitude": 12.45
       };
       latlong["VC"] = {
           "latitude": 13.25,
           "longitude": -61.2
       };
       latlong["VE"] = {
           "latitude": 8,
           "longitude": -66
       };
       latlong["VG"] = {
           "latitude": 18.5,
           "longitude": -64.5
       };
       latlong["VI"] = {
           "latitude": 18.3333,
           "longitude": -64.8333
       };
       latlong["VN"] = {
           "latitude": 16,
           "longitude": 106
       };
       latlong["VU"] = {
           "latitude": -16,
           "longitude": 167
       };
       latlong["WF"] = {
           "latitude": -13.3,
           "longitude": -176.2
       };
       latlong["WS"] = {
           "latitude": -13.5833,
           "longitude": -172.3333
       };
       latlong["YE"] = {
           "latitude": 15,
           "longitude": 48
       };
       latlong["YT"] = {
           "latitude": -12.8333,
           "longitude": 45.1667
       };
       latlong["ZA"] = {
           "latitude": -29,
           "longitude": 24
       };
       latlong["ZM"] = {
           "latitude": -15,
           "longitude": 30
       };
       latlong["ZW"] = {
           "latitude": -20,
           "longitude": 30
       };



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

        // AMMAP PART OF THIS AWESOME DEMO
       var map;
       var chinaImage;

        // set dark theme
       AmCharts.theme = AmCharts.themes.black;

        // get min and max values
       var min = Infinity;
       var max = -Infinity;
       for (var i = 0; i < mapData.length; i++) {
           var value = mapData[i].value;
           if (value < min) {
               min = value;
           }
           if (value > max) {
               max = value;
           }
       }

        // build map
       AmCharts.ready(function() {
           map = new AmCharts.AmMap();
           map.addClassNames = true;
           map.pathToImages = "https://www.amcharts.com/lib/3/images/";
           map.fontFamily = "Lato";
           map.fontSize = 12;
           map.creditsPosition = "top-right";
           map.zoomControl.buttonFillColor = "#343434";

           // style tooltip
           map.balloon = {
               adjustBorderColor: false,
               horizontalPadding: 20,
               verticalPadding: 10,
               color: "#FFFFFF",
               maxWidth: 300,
               borderAlpha: 0,
               borderThickness: 1
           }

           // bubbles are images, we set opacity and tooltip text
           map.imagesSettings = {
               balloonText: "[[title]]: [[value]]",
               alpha: 0.7
           }

           map.addClassNames = true;
           map.defs = {
               "filter": [{
                   "id": "blur",
                   "feGaussianBlur": {
                       "in": "SourceGraphic",
                       "stdDeviation": 2
                   }
               }]
           };

           // make areas barely visible
           map.areasSettings = {
               unlistedAreasAlpha: 0.1,
               unlistedAreasOutlineAlpha: 0
           };

           // data provider. We use continents map to show real world map in background.
           var dataProvider = {
               map: "continentsLow",
               images: []
           }

          // min and max bullet sizes - adjust them to your needs
          var minBulletSize = 7;
          var maxBulletSize = 80;

          // adjust size if window is small
          if(document.getElementById("chartdiv").offsetWidth <= 700){
            minBulletSize = 6;
            maxBulletSize = 60;
          }
         
           var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
           var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

           // create circle for each country
           for (var i = 0; i < mapData.length; i++) {
               var dataItem = mapData[i];
               var value = dataItem.value;
               // calculate size of a bubble
               var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
               if (square < minSquare) {
                   square = minSquare;
               }
               var size = Math.sqrt(square / (Math.PI * 2));
               var id = dataItem.code;

               dataProvider.images.push({
                   type: "circle",
                   width: size,
                   height: size,
                   color: dataItem.color,
                   longitude: latlong[id].longitude,
                   latitude: latlong[id].latitude,
                   title: dataItem.name,
                   value: value
               });

               if (id == "CN") {
                   chinaImage = dataProvider.images[dataProvider.images.length - 1];
               }
           }

           map.dataProvider = dataProvider;

           // Listen for the init event and initialize box2d part
           map.addListener("init", initBox2D)

           map.write("chartdiv");
       });


        // BOX2D (Physics) part
       var width = 900;
       var height = 600;
       var pixels2meters = 30; // box2d uses meters, not pixels and this is ratio
       var framesPerSecond = 40;
       var world;
       var images;

       function initBox2D() {
           var b2Vec2 = Box2D.Common.Math.b2Vec2;
           var b2BodyDef = Box2D.Dynamics.b2BodyDef;
           var b2Body = Box2D.Dynamics.b2Body;
           var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
           var b2Fixture = Box2D.Dynamics.b2Fixture;
           var b2World = Box2D.Dynamics.b2World;
           var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
           var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
           var b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef;
           var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;


           world = new b2World(
               new b2Vec2(0, 10), //gravity
               false //allow sleep, false otherwise joints might not be restored
           );

           // walls and ground. please, study box2d tutorials if you want to understand everything below
           var wallsBodyDef = new b2BodyDef();
           wallsBodyDef.type = b2Body.b2_staticBody;

           var wallsFixtureDef = new b2FixtureDef();
           wallsFixtureDef.density = 1.0;
           wallsFixtureDef.friction = 0.5;
           wallsFixtureDef.restitution = 0.2;

           // floor
           wallsFixtureDef.shape = new b2PolygonShape();
           wallsFixtureDef.shape.SetAsBox(width / pixels2meters, 10 / pixels2meters);
           wallsBodyDef.position.Set(0, (height - 10) / pixels2meters);
           world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);

           // left wall
           wallsFixtureDef.shape.SetAsBox(5 / pixels2meters, height / pixels2meters);
           wallsBodyDef.position.Set(0, 0);
           world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);

           // right wall
           wallsBodyDef.position.Set(width / pixels2meters, 0);
           world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);


           // bubbles
           var bubbleBodyDef = new b2BodyDef();
           bubbleBodyDef.angularDamping = 3; // we don't want to bubbles to rotate like crazy
           bubbleBodyDef.linearDamping = 1; // makes movement more smooth. If you increase this value, bubbles will move like in some oil
           bubbleBodyDef.type = b2Body.b2_dynamicBody;

           var bubbleFixtureDef = new b2FixtureDef();
           bubbleFixtureDef.density = 0.2;
           bubbleFixtureDef.friction = 0.3;
           bubbleFixtureDef.restitution = 0;

           // we need to keep bubbles in place, so we create a static body to which bubbles will be constrained - think of a nail at each bubble position
           var nailFixtureDef = new b2FixtureDef();
           nailFixtureDef.shape = new b2CircleShape(2 / pixels2meters);

           var nailBodyDef = new b2BodyDef();
           nailBodyDef.type = b2Body.b2_staticBody; // nails are static, they don't move

           // now, loop through images of map's data provider
           images = map.dataProvider.images;

           for (var i = 0; i < images.length; i++) {
               var image = images[i];

               // create bubble
               bubbleFixtureDef.shape = new b2CircleShape(image.width / 2 / pixels2meters);
               bubbleBodyDef.position.x = image.displayObject.x / pixels2meters;
               bubbleBodyDef.position.y = image.displayObject.y / pixels2meters;
               var bubble = world.CreateBody(bubbleBodyDef).CreateFixture(bubbleFixtureDef);

               // create nail
               nailBodyDef.position.x = image.displayObject.x / pixels2meters;
               nailBodyDef.position.y = image.displayObject.y / pixels2meters;
               var nail = world.CreateBody(nailBodyDef).CreateFixture(nailFixtureDef);
               nail.SetSensor(true); // nail is sensor - this means the bubbles won't colide with it and can overlap

               // now, we need to link bubble with a nail with a joint (imagine a string)
               var jointDef = new b2DistanceJointDef();
               jointDef.bodyA = bubble.GetBody();
               jointDef.bodyB = nail.GetBody();
               // the following tow lines describes stiffness of a string, try to modify them.
               jointDef.dampingRatio = 0.4;
               jointDef.frequencyHz = 1.5;
               // lenght 0 means that the bubble will try to be at the nail position (if other bubbles allow)
               jointDef.length = 0;
               //connect the centers
               jointDef.localAnchorA = new b2Vec2(0, 0);
               jointDef.localAnchorB = new b2Vec2(0, 0);

               var joint = world.CreateJoint(jointDef);
               // store definition, image and joint in mapImage object
               image.jointDef = jointDef;
               image.box2Dimage = bubble;
               image.joint = joint;
           }

           //setup debug draw (if you don't need it, just delete the lines, uncomment to see how box objects are drawn)
           /*
            var debugDraw = new b2DebugDraw();
            debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
            debugDraw.SetDrawScale(pixels2meters);
            debugDraw.SetFillAlpha(0.5);
            debugDraw.SetLineThickness(1.0);
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
            world.SetDebugDraw(debugDraw);
            */
           // interval to update bubbles

       }


        // scale is actually not possible in box2d, so we will be removing old shape and adding new shape
       var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
       var bubbleFixtureDef = new b2FixtureDef();
       bubbleFixtureDef.density = 0.2;
       bubbleFixtureDef.friction = 0.3;
       bubbleFixtureDef.restitution = 0;

       var sign = 1;
        //update bubbles
       function update() {
           // change size of China
           var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
           var chinaBox2Dimage = chinaImage.box2Dimage;
           var body = chinaBox2Dimage.GetBody();
           // scale is actually not possible in box2d, so we remove old and add new fixture
           body.DestroyFixture(body.GetFixtureList());

           if (chinaImage.width > 160) {
               sign = -4;
           }
           if (chinaImage.width < 70) {
               sign = 1;
           }

           chinaImage.width += sign;

           bubbleFixtureDef.shape = new b2CircleShape(chinaImage.width / 2 / pixels2meters);
           chinaImage.box2Dimage = body.CreateFixture(bubbleFixtureDef);
           chinaImage.displayObject.node.firstChild.setAttribute("r", chinaImage.width / 2 - 1);

           var images = map.dataProvider.images;

           for (var i = 0; i < images.length; i++) {
               var image = images[i];
               var box2Dimage = image.box2Dimage;
               // box2D takes care of positions of bubbles, we simply get those positions and set them on ammap bubbles.
               var bbody = box2Dimage.GetBody();
               var position = bbody.GetPosition();

               var currentX = position.x;
               var currentY = position.y;

               image.displayObject.translate(position.x * 30, position.y * 30, 1, true);
           }


           world.Step(1 / framesPerSecond, 10, 10);

           // uncomment next line if you want to see box2d objects in action (also canvas element at the bottom)
           // world.DrawDebugData();
           world.ClearForces();
       };

       var interval;

       function startInterval() {
           document.getElementById("btn").style.visibility = "hidden";
           interval = window.setInterval(update, 1000 / framesPerSecond);
           setTimeout(stopInterval, 10000);
       }

       function stopInterval() {
           clearInterval(interval);
           document.getElementById("btn").style.visibility = "visible";
       }
              
            
!
999px

Console