Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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 src="//www.amcharts.com/lib/3/ammap.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script src="//www.amcharts.com/lib/3/themes/black.js"></script>
<script src="//www.amcharts.com/lib/box2d/Box2dWeb-2.1.a.3.min.js"></script>

<div id="chartdiv" style="width: 900px; height: 600px; margin:auto"></div>

<!-- this is only needed for debud draw
    <canvas id="canvas" width="1000px" height="700px"></canvas> -->
<div style="text-align:center">
  <input type="button" class="btn" value="Release bubbles" onclick="releaseBubbles()"/>
  <input type="button" class="btn" value="Attach bubbles" onclick="attachBubbles()"/>
</div>
<div class="description" style="margin:auto; text-align:center; margin:15px">
  Demo made with <a href="https://www.amcharts.com">amCharts</a> and box2D physics engine. The numbers are not real.
</div>
              
            
!

CSS

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

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

.description {
  color:#aaa;
  font-size:0.8em;
}

a:visited, a:active, a {
  color:#aaa;
  text-decoration:underline;
}

a:hover {
  color:#FFF;
  text-decoration:underline;
}

.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;
}

.amcharts-map-image:hover {
  filter: url(#blur);
}
              
            
!

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;
    // min and max bullet sizes - adjust them to your needs
    var minBulletSize = 7;
    var maxBulletSize = 80;

    // 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 = 15;
        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: []
        }

        // create circle for each country
        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
            });
        }

        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 = 0.5; // 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.6; // adjust this property to reduce or increase bouncing

        // 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
        // release initially to do some animation
        releaseBubbles();
        // attach bubbles in some time
        setTimeout(attachBubbles, 8000);
        window.setInterval(update, 1000 / framesPerSecond);
    }

    //update bubbles
    function update() {
        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();
    };

    // releases bubbles
    function releaseBubbles() {
        for (var i = 0; i < images.length; i++) {
            var image = images[i];
            setTimeout(destroyJoint, Math.random() * 2000, image); // we release bubbles randomly during 2 sec interval
        }
    }

    // destroys joint
    function destroyJoint(image) {
        if (image.joint) {
            world.DestroyJoint(image.joint);
            image.joint = null;
        }
    }

    // attach bubbles back
    function attachBubbles() {
        for (var i = 0; i < images.length; i++) {
            var image = images[i];
            if (!image.joint) {
                setTimeout(restoreJoint, Math.random() * 100, image); // we attach bubbles randomly during 0.1 sec interval
            }
        }
    }

    // restores joint
    function restoreJoint(image) {
        var joint = world.CreateJoint(image.jointDef);
        image.joint = joint;
    }
              
            
!
999px

Console