-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
116 lines (112 loc) · 5.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<h2>Distribution of number of people having COVID-19 in India</h2>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/datamaps.none.js"></script>
<div id="india" style="height: 600px; width: 900px;"></div>
<script>
function parseCsv(data) {
var allTextLines = data.split(/\r\n|\n/);
var headings = allTextLines[0].split(',');
var states = headings.slice(1);
// console.log("states");
// console.log(states);
// console.log("alltextlinse");
// console.log(allTextLines);
var numbers = allTextLines.slice(1);
// console.log("numbers");
// console.log(numbers);
var allDays = {};
for (var j=0; j<numbers.length;j++) {
var line = numbers[j];
// console.log(line);
var entries = line.split(',');
var date = entries[0];
var stateEntries = entries.slice(1);
// console.log(stateEntries);
allDays[date] = {};
for (var i =0; i < stateEntries.length; i++) {
var count = 0;
if(stateEntries[i].length > 0) {
count = Number(stateEntries[i]);
}
allDays[date][states[i]] = count;
}
}
console.log(allDays);
return allDays;
}
function getText(url){
// read text from URL location
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
if (type.indexOf("text") !== 1) {
var alldays = parseCsv(request.responseText);
console.log(alldays);
plotMap(alldays);
return request.responseText;
}
}
}
}
function plotMap(data) {
var numbers = data["15/3/2020"];
// TODO(rahul): get rid of this hack
numbers['Jammu & Kashmir'] += numbers['Ladakh'];
state_id = {'Andaman & Nicobar Island': 'AN', 'Andhra Pradesh': 'AP', 'Arunanchal Pradesh': 'AR', 'Assam': 'AS', 'Bihar': 'BR', 'Chhattisgarh': 'CT', 'Puducherry': 'PY', 'Punjab': 'PB', 'Rajasthan': 'RJ', 'Sikkim': 'SK', 'Tamil Nadu': 'TN', 'Chandigarh': 'CH', 'Telangana': 'TS', 'Tripura': 'TR', 'Uttar Pradesh': 'UP', 'Uttarakhand': 'UK', 'West Bengal': 'WB', 'Odisha': 'OD', 'Dadara & Nagar Havelli': 'DN', 'Daman & Diu': 'DD', 'Goa': 'GA', 'Gujarat': 'GJ', 'Haryana': 'HR', 'Himachal Pradesh': 'HP', 'Jammu & Kashmir': 'JK', 'Jharkhand': 'JH', 'Karnataka': 'KA', 'Kerala': 'KL', 'Lakshadweep': 'LD', 'Madhya Pradesh': 'MP', 'Maharashtra': 'MH', 'Manipur': 'MN', 'Meghalaya': 'ML', 'Mizoram': 'MZ', 'Nagaland': 'NL', 'NCT of Delhi': 'DL'};
var bubble_map = new Datamap({
element: document.getElementById('india'),
scope: 'india',
geographyConfig: {
popupOnHover: true,
highlightOnHover: true,
borderColor: '#444',
borderWidth: 0.5,
dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json'
//dataJson: topoJsonData
},
fills: {
'MAJOR': '#306596',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#dddddd'
},
setProjection: function (element) {
var projection = d3.geo.mercator()
.center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
.scale(1000);
var path = d3.geo.path().projection(projection);
return { path: path, projection: projection };
}
});
var bubbles = [];
for (var name in state_id) {
var bubble = {
centered: state_id[name],
fillKey: "MAJOR",
radius: Math.sqrt(numbers[name])*2,
cases: numbers[name],
state: name
};
bubbles.push(bubble);
}
setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.
bubble_map.bubbles(bubbles, {
popupTemplate: function (geo, data) {
return `<div class="hoverinfo">Region: ${data.state}, Cases: ${data.cases}</div>`;
}
});
}, 1000);
}
var csvurl = "https://raw.githubusercontent.com/rahulgurnani/COVID-19-India/master/data/statewise.csv";
getText(csvurl);
</script>
</body>
</html>