-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathabout.html
167 lines (157 loc) · 8.87 KB
/
about.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML>
<html>
<head>
<meta charset = 'utf8'>
<title>CCUSA Disaster Operations Map - About</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Begin Mapbox requests -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />
<!-- end Mapbox requests -->
<!-- begin project-specific STATIC asset calls.
page-specific calls that require ready DOM elements called at end of <body>.
may change that practice later. for now we can avoid listening for window.load, document.ready, etc -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- end project-specific asset calls -->
</head>
<body>
<div>
<!--Navbar-->
<div>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 navbar-left" style="font-family: 'Nunita;' color:#fff; padding-top:8px"><a class="title" href="index.html"><img class="icon logo logo-smaller" src="static/ccusa_logo.svg" width="250" alt="DKDC logo"></a></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 pull-right">
<li class="nav">
<li class="nav"> <a href="index.html">Map</a></li>
<li class="nav"> <a href="about.html">About</a></li>
<li class="nav"> <a href="data.html">Data</a></li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
</div>
</div>
<!---jumbotron---->
<div class="jumbotron">
<h3>CCUSA provides disaster relief assistance and wanted to create a map to better target mitigation, preparedness, relief, and recovery projects in order
to best serve communities that are both at greatest risk for disasters and most overlooked or outright excluded
from federal assistance during disasters. Specifically, they wanted to see the presence of acutely vulnerable
populations such as uninsured (homeowners or renters), homeless, or subsidized renters at the local level.
Information about a particular area's social vulnerability, housing and transportation vulnerability, and demographics are visualized.
The Disaster Operations Map can be used to strategically allocate resources to prepare for disasters,
as well as identifying where vulnerable populations live within an area affected by a disaster.
</h3>
</div>
<!---TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify" style="background-color:##C0C0C0">
<br><br>
<h3>The code for the map is open source and available on our GitHub account. We are also very grateful to ATTOM Data Solutions, who kindly provided us with data for this project. Lastly, thank you MapBox DC for connecting us to your experts who helped us get started.
</h3><br><br>
</div>
<div class="col-md-1 justify"></div>
</div>
<!--Center buttons: GitHub MapBox ATTOM-->
<div class="col-md-12 text-center" style="background-color:##C0C0C0">
<div class="col-md-1 text-center"></div>
<!-->
<div class="col-md-3 text-center">
<p align="center"><center><img src='./static/github.png' style="height: 70px"> </img></center>
<br>
<a href="https://github.com/ccusa/Disaster_Vulnerability_Map" target="_blank"><h3>GitHub</h3></a>
<br>
Our work is open source to benefit as many as possible.
<br><br>
</div>
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/mapbox.png' style="height: 70px"> </img></center>
<br>
<a href="https://www.mapbox.com/" target="_blank"><h3>Mapbox</h3></a>
<br>
The Mapbox platform
</div>
<div class="col-md-3 text-center">
<p align="center"><center><img src='./static/attom.jpeg' style="height: 70px"> </img></center>
<br>
<a href="https://www.attomdata.com/" target="_blank"><h3>ATTOM</h3></a>
<br>
ATTOM is a data provider and generously provided disaster data to this project.
</div>
<div class="col-md-1 text-center"></div>
</div>
<br><br>
<!-TEXT -->
<div class="bio container-fluid" id="ccusa_container">
<!---TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify">
<br><br>
<h3>We would like to acknowledge and thank our amazing team and partners. Richard Carder and Jake Snyder were the DataKind Data Ambassadors. Lukas Martinelli, Tom MacWright, Lew Ting, Mohammed Kemal, and many others contributed significantly, as well as volunteers who participated in our Data Jam and Data Dives.
DKDC Chapter Leaders Max Richman and Judy Yang assisted with project supervision.
Thank you Zach Cahalan (CCUSA partner liaison) for providing guidance to the team, we hope the Disaster Operations Map makes a true and positive impact in your work!
<br><br>
</h3>
</div>
<div class="col-md-1 justify"></div>
</div>
<!--Center CCUSA and DKDC icons row 1-->
<div class="col-md-12 text-center">
<div class="col-md-2 text-center"></div>
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
<br>
<center align="center"><a href="https://twitter.com/CCharitiesUSA" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @CCharitiesUSA</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
<a href="https://catholiccharitiesusa.org/" target="_blank">Catholic Charities USA</a> is a national organization that offers support to member agencies,
provides disaster relief and promotes poverty-reduction through research and legislative reform. </p>
</div>
<!-->
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/dk.png' style="height: 100px"> </img></center>
<br>
<center align="center"><a href="https://twitter.com/DataKindDC" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @DataKindDC</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
<a href="http://www.datakind.org" target="_blank">DataKind</a> brings high-impact organizations together with leading data scientists to use data science in the service of humanity.
Our work helps organizations develop evidence-based decision making, increase efficiency, and enhance their data literacy.
<br><br>
</div>
<div class="col-md-2 text-center"></div>
</div>
<br><br>
</div>
<br><br>
<!-footer-->
<div class="closeinfo">
If you have any questions or feedback, please contact <a href="mailto:dc@datakind.org">DataKind</a>, or <a href="mailto:info@catholiccharitiesusa.org">Catholic Charities USA</a>.
</div>
</body>
</html>