forked from home-fire-risk/smoke_alarm_map
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
146 lines (119 loc) · 5.84 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
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Home Fire Risk Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.css' type='text/css' />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link href='lib/bootstrap.min.css' rel='stylesheet' />
<link href='css/main.css' rel='stylesheet' />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">Home Fire Risk Map</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html" id="maplink">Map</a>
</li>
<li>
<a href="table.html" id="tablelink">View data</a>
</li>
<li>
<a href="#about" id="aboutlink">About</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="about" div class="popup">
<div class="divclose">×</div>
<div class="text">
<p>This visualization supports the Home Fire Campaign in an effort to reduce the number of deaths and injuries caused by home fires. Specifically, this DataKind project aims to identify and highlight, “high-risk” neighborhoods to target for in-home fire safety education and the installation of free smoke alarms by the American Red Cross and its partners.</p>
<p><a href="data/tabletracts.csv">Download data</a></p>
<p>This project uses machine learning techniques that leverage data from the U.S. Census, the American Red Cross and the National Fire Incident Reporting System to predict aggregate neighborhood home fire risk based on the following criteria:
<ul>
<li>Risk - No Smoke Alarm: The increased likelihood that homes within a census tract lack functioning smoke alarms.</li>
<li>Risk - Home Fire: The prevalence of home fires in a census tract over a 5-year period.</li>
<li>Risk - Fire-Related Injury: The increased likelihood that a home fire could result in an injury or death.</li>
</ul>
</p>
<p>Built by DataKind DC, 2016. View source on <a href="https://github.com/home-fire-risk" target="_blank">Github</a>.</p>
</div>
</div>
</div>
<div id='map-holder'>
<div id='map'></div>
<div id='geocoder-container'></div>
<div id='sidebar'>
<h2 class="sidebar-title">Home fire risk</h2>
<button id="print" class="btn">Print Current View</button>
<div id='tooltip'>
<div class="tt risk">
<div class="title">Risk score</div>
<div id='tooltip-risk'></div>
<div id="tooltip-rank"></div>
</div>
<div class="tt households">
<div class="title">Households</div>
<div id='tooltip-households'></div>
</div>
<div class="tt income">
<div class="title">Median household income</div>
<div id='tooltip-income'></div>
</div>
<div class="tt name">
<div class="title">Area</div>
<div id='tooltip-tract'></div>
<div id='tooltip-name'></div>
</div>
</div>
<div id="toptoggle">
<div class="title">Areas per region to view</div>
<div id="statbtns"></div>
</div>
<div id="legend-holder">
<div id="legend"></div>
</div>
</div>
</div>
<script src='lib/jquery-2.2.1.min.js'></script>
<script src='lib/d3.v3.min.js'></script>
<script src='lib/bootstrap.min.js'></script>
<script src="js/divnav.js"></script>
<script src="js/studiomap.js"></script>
<script src="js/legend.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80423504-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>