| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Thu, 31 Jul 2025 03:30:23 GMT
etag: W/"687e6267-9318"
expires: Thu, 31 Jul 2025 03:40:23 GMT
last-modified: Mon, 21 Jul 2025 15:53:11 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 503ab42c4bc4bd000c5c946d1d12b967e69e9cee
x-github-request-id: 5B68:4ED44:1B3A5:266D0:688AE34B
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210033-BOM
x-timer: S1753932623.031124,VS0,VE217
x-vercel-cache: MISS
x-vercel-id: bom1::fbjjs-1753932623003-2481315944b7
content-length: 9128
Bubble maps in JavaScript
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});
});