-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
136 lines (130 loc) · 4.86 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta name="author" content="Roberto Arce Corretjer, Jose Conde,
Humberto Ortiz-Zuazaga, Juan Sola Sloan">
<META name="description" content="Demo public health heads-up display">
<TITLE>salHUD</TITLE>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="./js/lib/d3.js"></script>
<script src="./js/lib/klass.js"></script>
<script src="./js/atlaspr.js"></script>
</head>
<body>
<center>
<H1>Years of Potential Life Lost, Puerto Rico 2008</h1>
<div id="oracion_">
For all Causes of Death
</div>
</center>
<div id = 'map'></div>
<script type = 'text/javascript'>
function dibujalo(p1) {
var my_node = document.getElementById("map");
my_node.innerHTML = "";
var datamap = {};
var map;
d3.json("all-causes.json", function(data){
data.forEach(function(pueblo){
var fips_3digits = pueblo.fips.length == 1 ? ("00" + pueblo.fips) :
(pueblo.fips.length == 2 ? ("0" + pueblo.fips) : pueblo.fips);
// select which cause of death to plot
var rv ;
switch(Number(p1)) {
case 1: rv = pueblo.ypll; break;
case 2: rv = pueblo.cardio; break;
case 3: rv = pueblo.tumor; break;
case 4: rv = pueblo.diabetes; break;
case 5: rv = pueblo.alzheimer; break;
case 6: rv = pueblo.cerebrovascular; break;
case 7: rv = pueblo.respiratory; break;
case 8: rv = pueblo.accident; break;
case 9: rv = pueblo.nefritis; break;
case 10: rv = pueblo.homicide; break;
case 11: rv = pueblo.pneumonia; break;
case 12: rv = pueblo.other; break;
// default : rv = pueblo.ypll;
}
datamap[fips_3digits] = rv;
});
//
map = new AtlasPR({
node: my_node,
tiles: 'pueblos',
size: "large",
on_ready: function(){
map.encode_quan(datamap);
},
events: {on_click: function(feature,
svg_path){alert(feature.properties.NAME + "\n" + Math.floor(datamap[feature.properties.COUNTY]) );}}
});});
}
</script>
<script language="JavaScript">
function causasMan(p1) {
dibujalo(p1.value);
handleOracion(p1.value);
}
function handleOracion(num) {
var oracion = document.getElementById("oracion_");
var rv = new String();
switch(Number(num)) {
case 1: rv = "For All Causes of Death"; break;
case 2: rv = "For Heart Disease"; break;
case 3: rv = "For Cancer"; break;
case 4: rv = "For Diabetes"; break;
case 5: rv = "For Alzheimer's Disease"; break;
case 6: rv = "For Cerebrovascular Disease"; break;
case 7: rv = "For Chronic Lower Airway Respiratory Disease"; break;
case 8: rv = "For Unintentional Injuries"; break;
case 9: rv = "For Renal Disease"; break;
case 10: rv = "For Homicide"; break;
case 11: rv = "For Pneumonia and Influenza"; break;
case 12: rv = "For Other Causes"; break;
}
oracion.innerHTML="<h3>" + rv + "</h3>" ;
}
</script>
<table border=0><tr><td>
<select name="causas" onchange="causasMan(this)">
<option value="1">All Causes of Death</option>
<option value="2">Heart Disease</option>
<option value="3">Cancer</option>
<option value="4">Diabetes</option>
<option value="5">Alzheimer's Disease</option>
<option value="6">Cerebrovascular Disease</option>
<option value="7">Chronic Lower Airway Respiratory Disease</option>
<option value="8">Unintentional Injuries</option>
<option value="9">Renal Disease</option>
<option value="10">Homicide</option>
<option value="11">Pneumonia and Influenza</option>
<option value="12">Other Causes</option>
</select>
</table>
<script languange="javascript">
dibujalo(1);
handleOracion(1);
</script>
<p>Demo of salHUD, a heads-up display for public health data. Click on
a municipality to display the Years of Potential Life Lost (YPLL) due to
premature death among the residents of the indicated municipality by
the selected cause of death.
Municipalities are shaded with lighter colors representing lower YPLL, darker shades higher YPLL.
</p>
<p>Full source code for the demo is available <a
href="https://github.com/humberto-ortiz/salHUD">on github</a>. </p>
<p>The salHUD demo is a collaboration between hackers from three <a
href="http://www.upr.edu/">UPR</a> campuses for the <a
href="https://www.hackerleague.org/hackathons/puerto-rico-tech-summit-hackathon">Puerto
Rico Tech Summit Hackathon</a>. Participants are:
<ul>
<li><p>Roberto Arce Corretjer - <a href="http://www.uprrp.edu/">UPR-RRP</a></p></li>
<li><p>José Conde - <a href="http://www.rcm.upr.edu/">UPR-RCM</a></p></li>
<li><p>Humberto Ortiz-Zuazaga - <a href="http://www.uprrp.edu/">UPR-RRP</a></p></li>
<li><p>Juan Solá Sloan - <a href="http://www.uprb.edu/">UPR-Bayamon</a></p></li>
</ul>
</p>
</body>
</html>