(view source)Symbol Maps

This map shows location of German visitors to the Kartograph website in 2012, as measured by Piwik Web Analytics. It uses the Symbol Map API and qTip tooltips. Please scroll down to see the code behind this map.

It basically goes down to this:

// cities is a list of dictionaries such as
cities = [{ city_name: "Berlin", nb_visits: 1496, lon: 13.4, lat: 52.517 }, ...];

// create a scale for radii
var scale = kartograph.scale.sqrt(cities, 'nb_visits').range([0, 40]);

// add bubbles to the map
map.addSymbols({
    type: kartograph.Bubble,
    data: cities,
    location: function(city) {
        return [city.lon, city.lat];
    },
    radius: function(city) {
        return scale(city.nb_visits);
    },
    tooltip: function(city) {
        return '<h3>'+city.city_name+'</h3>'+city.nb_visits+' visits';
    },
    sortBy: 'radius desc',
    style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;',
});