Bubble Maps in JavaScript

How to make a D3.js-based bubble map in JavaScript. A bubble map overlays a bubble chart on a map.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Europe Bubble Map

var data = [{
    type: 'scattergeo',
    mode: 'markers',
    locations: ['FRA', 'DEU', 'RUS', 'ESP'],
    marker: {
        size: [20, 30, 15, 10],
        color: [10, 20, 40, 50],
        cmin: 0,
        cmax: 50,
        colorscale: 'Greens',
        colorbar: {
            title: {text: 'Some rate'},
            ticksuffix: '%',
            showticksuffix: 'last'
        },
        line: {
            color: 'black'
        }
    },
    name: 'europe data'
}];

var layout = {
    'geo': {
        'scope': 'europe',
        'resolution': 50
    }
};

Plotly.newPlot('myDiv', data, layout);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var data = [{\n type: 'scattergeo',\n mode: 'markers',\n locations: ['FRA', 'DEU', 'RUS', 'ESP'],\n marker: {\n size: [20, 30, 15, 10],\n color: [10, 20, 40, 50],\n cmin: 0,\n cmax: 50,\n colorscale: 'Greens',\n colorbar: {\n title: {text: 'Some rate'},\n ticksuffix: '%',\n showticksuffix: 'last'\n },\n line: {\n color: 'black'\n }\n },\n name: 'europe data'\n}];\n\nvar layout = {\n 'geo': {\n 'scope': 'europe',\n 'resolution': 50\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

USA Bubble Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

    var cityName = unpack(rows, 'name'),
        cityPop = unpack(rows, 'pop'),
        cityLat = unpack(rows, 'lat'),
        cityLon = unpack(rows, 'lon'),
        color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
        citySize = [],
        hoverText = [],
        scale = 50000;

    for ( var i = 0 ; i < cityPop.length; i++) {
        var currentSize = cityPop[i] / scale;
        var currentText = cityName[i] + " pop: " + cityPop[i];
        citySize.push(currentSize);
        hoverText.push(currentText);
    }

    var data = [{
        type: 'scattergeo',
        locationmode: 'USA-states',
        lat: cityLat,
        lon: cityLon,
        hoverinfo: 'text',
        text: hoverText,
        marker: {
            size: citySize,
            line: {
                color: 'black',
                width: 2
            },
        }
    }];

    var layout = {
        title: {text: '2014 US City Populations'},
        showlegend: false,
        geo: {
            scope: 'usa',
            projection: {
                type: 'albers usa'
            },
            showland: true,
            landcolor: 'rgb(217, 217, 217)',
            subunitwidth: 1,
            countrywidth: 1,
            subunitcolor: 'rgb(255,255,255)',
            countrycolor: 'rgb(255,255,255)'
        },
    };

    Plotly.newPlot("myDiv", data, layout, {showLink: false});

});

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv', function(err, rows){\n\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\n var cityName = unpack(rows, 'name'),\n cityPop = unpack(rows, 'pop'),\n cityLat = unpack(rows, 'lat'),\n cityLon = unpack(rows, 'lon'),\n color = [,\"rgb(255,65,54)\",\"rgb(133,20,75)\",\"rgb(255,133,27)\",\"lightgrey\"],\n citySize = [],\n hoverText = [],\n scale = 50000;\n\n for ( var i = 0 ; i < cityPop.length; i++) {\n var currentSize = cityPop[i] / scale;\n var currentText = cityName[i] + \" pop: \" + cityPop[i];\n citySize.push(currentSize);\n hoverText.push(currentText);\n }\n\n var data = [{\n type: 'scattergeo',\n locationmode: 'USA-states',\n lat: cityLat,\n lon: cityLon,\n hoverinfo: 'text',\n text: hoverText,\n marker: {\n size: citySize,\n line: {\n color: 'black',\n width: 2\n },\n }\n }];\n\n var layout = {\n title: {text: '2014 US City Populations'},\n showlegend: false,\n geo: {\n scope: 'usa',\n projection: {\n type: 'albers usa'\n },\n showland: true,\n landcolor: 'rgb(217, 217, 217)',\n subunitwidth: 1,\n countrywidth: 1,\n subunitcolor: 'rgb(255,255,255)',\n countrycolor: 'rgb(255,255,255)'\n },\n };\n\n Plotly.newPlot(\"myDiv\", data, layout, {showLink: false});\n\n});\n"}">