HTMLcopy
1
<div id="container"></div>
CSScopy
7
1
html, body, #container
2
{
3
width: 100%;
4
height: 100%;
5
margin: 0;
6
padding: 0;
7
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// load json data
4
anychart.data.loadJsonFile("https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json", function (data) {
5
6
// Variables
7
// go into the records section of the data
8
var geoData = data.records
9
10
// sum of all cases per country
11
var sumCases = 0;
12
13
// sum of all deaths per country
14
var sumDeaths = 0;
15
16
// convert cases and deaths to numbers
17
var numC;
18
var numD;
19
20
// create a new array with the resulting data
21
var data = [];
22
23
// Go through the initial data
24
for (var i = 0; i < geoData.length; i++) {
25
// convert strings to numbers and save them to new variables
26
numC = parseInt(geoData[i].cases);
27
numD = parseInt(geoData[i].deaths);
28
29
// check if we are in the same country by comparing the geoId
30
// if the country is the same, add cases and deaths to the appropriate variables
31
if ((geoData[i + 1]) != null && (geoData[i].geoId == geoData[i + 1].geoId)) {
32
sumCases = sumCases + numC;
33
sumDeaths = sumDeaths + numD;
34
}
35
else {
36
37
// add last day cases and deaths of the same country
38
sumCases = sumCases + numC;
39
sumDeaths = sumDeaths + numD;
40
41
// insert the resulting data in the array using the AnyChart keywords
42
data.push({ id: geoData[i].geoId, value: sumCases, size: sumDeaths, title: geoData[i].countriesAndTerritories })
43
44
// reset the variables to start over
45
sumCases = 0;
46
sumDeaths = 0;
47
48
}
49
};
50
51
// connect the data with the map
52
var chart = anychart.map(data);
53
chart.geoData(anychart.maps.world);
54
55
// specify the chart type and set the series
56
var series = chart.choropleth(data);
57
58
// variable to store data that will be used for bubbles
59
var bubbleData=[];
60
61
// store only the countries that have at least 1 death
62
for (var i=0; i<data.length; i++) {
63
if (data[i].size>0){
64
bubbleData.push(data[i]);
65
}
66
};
67
68
// create a series for bubbles
69
var series_1 = chart.bubble(bubbleData);
70
71
// set the chart title
72
chart.title("COVID-19 Global Cases");
73
74
// color scale ranges
75
ocs = anychart.scales.ordinalColor([
76
{ less: 99 },
77
{ from: 100, to: 999 },
78
{ from: 1000, to: 9999 },
79
{ from: 10000, to: 29999 },
80
{ from: 30000, to: 39000 },
81
{ from: 40000, to: 59000 },
82
{ from: 60000, to: 99999 },
83
{ greater: 100000 }
84
]);
85
86
// set scale colors
87
ocs.colors(["rgb(252,245,245)", "rgb(241,219,216)", "rgb(229,190,185)", "rgb(211,152,145)", "rgb(192,117,109)", "rgb(178,93,86)", "rgb(152,50,48)", "rgb(150,33,31)"]);
88
89
// tell the series what to use as a colorRange (colorScale)
90
series.colorScale(ocs);
91
92
// enable the legend
93
chart.legend(true);
94
95
// set the source mode of the legend and add styles
96
chart.legend()
97
.itemsSourceMode("categories")
98
.position('right')
99
.align('top')
100
.itemsLayout('vertical')
101
.padding(50, 0, 0, 20)
102
.paginator(false);
103
104
// set the container id
105
chart.container('container');
106
107
// draw the chart
108
chart.draw();
109
});
110
111
});