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. Sign up for early access now.
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);
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});
});
