Displaying bubbles in Kartograph.js

Question

I am trying to create the bubbles on my SVG map generated by Kartograph. I want to do something like this: http://kartograph.org/showcase/symbols/

The map loads but the symbol does not display. I have no errors thrown in the Javascript console.

$(document).ready(function() {

var map = $K.map('#map');

map.loadMap("mapfinal.svg", function() {
    // add layers
    map.addLayer('background', {
        styles: {
            fill: '#e8f9fb',
            'stroke': 'none'
        }
    });
    map.addLayer('world', {
        styles: {
            fill: '#f5f3f2',
            'stroke': 'none'
        }
    });
    map.addLayer('states', {
        styles: {
            fill: '#FFF',
            'stroke': '#882222',
            'stroke-width': 0.5,
            'stroke-opacity': 0.4
        }
    });
    map.addLayer('urban', {
        styles: {
            fill: '#553344',
            'fill-opacity': 0.6,
            'stroke': 'none'
        }
    });
    map.addSymbols({
        type: kartograph.Bubble,
        data: [{
            lon: -104,
            lat: 40.5,
            name: 'Berlin'
        }],
        radius: 40,
        location: function(d) {
            return [d.lon, d.lat]
        },
        style: 'fill:#800000; stroke: #fff; fill-opacity: 0.5',
    });

});

});

I don't know what else to do. I have followed all the example code and read the docs.

Answer 1

In case someone else runs into this in the future, the issue was the map itself. For whatever reason, there is a bug in the kartograph.py framework that generates SQG maps with incorrect coordinates. My bubbles were not showing up because the longitude and latitude were not present on the map. When I regenerated my map using the laea projection, it worked.