-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfront.html
113 lines (97 loc) · 4.37 KB
/
front.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
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Covid19</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<script>
function cards (){
d3.csv('https://raw.githubusercontent.com/Joellensilva/Dashboard-covid19/main/covid19-dados.csv').then(Graphic);
d3.csv('https://raw.githubusercontent.com/Joellensilva/Dashboard-covid19/main/vacinas.csv').then(Vaccinated);
}
function Graphic(data) {
var confirmed = data.map(function(d) {return d.last_available_confirmed});
var deaths = data.map(function(d) {return d.last_available_deaths});
document.getElementById("deaths7days").value = deaths[0] - deaths[6];
document.getElementById("deaths1month").value = deaths[0] - deaths[30];
document.getElementById("deaths1year").value = deaths[0] - deaths[365];
/* console.log(deaths7days);
console.log(deaths1month);
console.log(deaths1year);*/
var confirmed = new Chart(document.getElementsByClassName("confirmed"), {
type: 'line',
data: {
labels: ["fev 21","mar 21","abr 21","mai 21","jun 21","jul 21","ago 21","set 21","out 21","nov 21","dez 21","jan 22"],
datasets: [{
label: "Casos confirmados",
data: [confirmed[337] - confirmed[365], confirmed[306] - confirmed[337], confirmed[276] - confirmed[306], confirmed[245] - confirmed [276], confirmed[215] - confirmed[245], confirmed[184] - confirmed[215], confirmed[153] - confirmed[184], confirmed[123] - confirmed[153], confirmed[92] - confirmed[123], confirmed[62]- confirmed[92], confirmed[31] - confirmed[62], confirmed[0] - confirmed[31]],
borderWidth: 4,
backgroundColor: 'blue'
}]
}
});
var deaths = new Chart(document.getElementsByClassName("deaths"), {
type: 'line',
data: {
labels: ["fev 21","mar 21","abr 21","mai 21","jun 21","jul 21","ago 21","set 21","out 21","nov 21","dez 21","jan 22"],
datasets: [{
label: "Óbitos",
data: [deaths[337] - deaths[365], deaths[306] - deaths[337], deaths[276] - deaths[306], deaths[245] - deaths[276], deaths[215] - deaths[245], deaths[184] - deaths[215], deaths[153] - deaths[184], deaths[123] - deaths[153], deaths[92] - deaths[123], deaths[62] - deaths[92], deaths[31] - deaths[62], deaths[0] - deaths[31]],
borderWidth: 4,
backgroundColor: 'red'
}]
}
});
}
function Vaccinated(data) {
var vaccinated = data.map(function(d) {return d.vacina_descricao_dose});
var vac1 = 0, vac2 = 0, vac3 = 0, doseuni = 0, i;
for(i=0; i<vaccinated.length; i++){
if(vaccinated[i] === '1ª Dose'){
vac1++;
}
else if(vaccinated[i] === '2ª Dose'){
vac2++;
}
else if(vaccinated[i] === 'Reforço' || vaccinated[i] === 'Dose Adicional'){
vac3++;
}
else if(vaccinated[i] === 'Dose'){
doseuni++;
}
}
var vaccinated = new Chart(document.getElementsByClassName("vaccinated"), {
type: 'bar',
data: {
labels: ["1ª Dose", "2ª Dose", "3ª Dose", "Dose única"],
datasets: [{
label: "População vacinada",
data: [vac1, vac2, vac3, doseuni]
}]
}
});
}
</script>
</head>
<body onload="cards()">
<h1>Dados COVID-19 em Arapiraca- Al</h1>
<br><br><br>
<section class="container wrap">
<canvas class="confirmed" id = "item2"></canvas>
<br><br><br>
<canvas class="deaths" id = "item2"></canvas>
<br><br><br>
<canvas class="vaccinated" id = "item2"></canvas>
</section>
<br><br><br>
<section class = "center">
<p>Mortes 7 dias <input id="deaths7days"></input></p>
<p>Mortes 1 mês <input id="deaths1month"></input></p>
<p>Mortes 1 ano <input id="deaths1year"></input></p>
</section>
</body>
</html>