Datamap's D3 bubbles not displaying

I trying to use the datamaps guide and plugin located here http://datamaps.github.io/ datamaps to create the bubbles they show in their example. However, the bubbles are not showing. What am I missing in the code. Thank you.

Here is a link to my jsfiddle: https://jsfiddle.net/centem/882qLzty/

<div id="container" style="position:relative; width:500px; height:300px;"></div>
        <script>
            var map = new Datamap({element: document.getElementById("container")});

            var bubble_map = new Datamap({
              element: document.getElementById("bubbles"),
              geographyConfig: {
                popupOnHover: false,
                highlightOnHover: false
              },
              fills: {
                defaultFill: '#ABDDA4',
                USA: 'blue',
                RUS: 'red'
              }
            });
            bubble_map.bubbles([
              {
                name: 'Not a bomb, but centered on Brazil',
                radius: 23,
                centered: 'BRA',
                country: 'USA',
                yeild: 0,
                fillKey: 'USA',
                date: '1954-03-01'
              },
              {
                name: 'Not a bomb',
                radius: 15,
                yeild: 0,
                country: 'USA',
                centered: 'USA',
                date: '1986-06-05',
                significance: 'Centered on US',
                fillKey: 'USA'
              },
              {
                name: 'Castle Bravo',
                radius: 25,
                yeild: 15000,
                country: 'USA',
                significance: 'First dry fusion fuel "staged" thermonuclear weapon; a serious nuclear fallout accident occurred',
                fillKey: 'USA',
                date: '1954-03-01',
                latitude: 11.415,
                longitude: 165.1619
              },{
                name: 'Tsar Bomba',
                radius: 70,
                yeild: 50000,
                country: 'USSR',
                fillKey: 'RUS',
                significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
                date: '1961-10-31',
                latitude: 73.482,
                longitude: 54.5854
              }
            ], {
              popupTemplate: function(geo, data) {
                return '<div class="hoverinfo">Yield:' + data.yeild + ' Exploded on ' + data.date + ' by the '  + data.country + ''
              }
            });
        </script>

Thank you.

You are initializing the data map here:

var map = new Datamap({element: document.getElementById("container")});

Then again you initialize with a wrong DOM ID (there is no DOM id bubbles).

var bubble_map = new Datamap({
              element: document.getElementById("bubbles"),<---it should be container
              geographyConfig: {
                popupOnHover: false,
                highlightOnHover: false

Fix:

1) You should not initialize datamaps again on same DOM ID.

2) You need to correct the DOM ID for bubble datamap.

corrected code here