HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/samples/maps-general-features/world-bubble-map/data.json
4
anychart.data.loadJsonFile(
5
'https://cdn.anychart.com/samples/maps-general-features/world-bubble-map/data.json',
6
function (data) {
7
var map = anychart.map();
8
map
9
.credits()
10
.enabled(true)
11
.url(
12
'https://en.wikipedia.org/wiki/List_of_sovereign_states_and_dependent_territories_by_population_density'
13
)
14
.logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico')
15
.text(
16
'Data source: https://en.wikipedia.org/wiki/List_of_sovereign_states_and_dependent_territories_by_population_density'
17
);
18
19
map
20
.title()
21
.enabled(true)
22
.useHtml(true)
23
.padding([10, 0, 10, 0])
24
.text(
25
'Worlds Population by Country<br/>' +
26
'<span style="color:#929292; font-size: 12px;">' +
27
'(Data was collected from Wikipedia, 2015)</span>'
28
);
29
30
map.geoData('anychart.maps.world');
31
32
map.interactivity().selectionMode('none');
33
map.padding(0);
34
35
var dataSet = anychart.data.set(data);
36
var densityData = dataSet.mapAs({ size: 'population' });
37
var series = map.bubble(densityData);
38
39
// set chart bubble settings
40
map.maxBubbleSize('7%').minBubbleSize('0.3%');
41
42
series.labels(false).selectionMode('none');
43
44
var choropleth = map.choropleth(densityData);
45
choropleth
46
.selectionMode('none')
47
.fill('#eaeaea')
48
.stroke('#D2D2D2')
49
.labels(false);
50
51
choropleth.hovered().stroke('#eaeaea').fill('#D2D2D2');
52
53
map
54
.tooltip()
55
.useHtml(true)
56
.format(function () {
57
return (
58
'<span style="color: #d9d9d9">Density</span>: ' +
59
parseFloat(this.getData('density')).toLocaleString() +
60
' pop./km² <br/>' +
61
'<span style="color: #d9d9d9">Population</span>: ' +
62
parseInt(this.getData('population')).toLocaleString() +
63
'<br/>' +
64
'<span style="color: #d9d9d9">Area</span>: ' +
65
parseInt(this.getData('area')).toLocaleString() +
66
' km²'
67
);
68
});
69
70
// create zoom controls
71
var zoomController = anychart.ui.zoom();
72
zoomController.render(map);
73
74
// set container id for the chart
75
map.container('container');
76
// initiate chart drawing
77
map.draw();
78
}
79
);
80
});