110 | 
112 |
115 | ATTOM is a data provider and generously provided disaster data to this project. 116 |
117 |
118 | 112 |
ATTOM
113 | 114 |115 | ATTOM is a data provider and generously provided disaster data to this project. 116 |
11 |
12 | var layout = [
13 | {
14 | title: 'Socioeconomic Status',
15 | items: [
16 | { title: 'Below poverty', code: 'EPL_POV' },
17 | { title: 'Unemployed', code: 'EPL_UNEMP' },
18 | { title: 'Income', code: 'EPL_PCI' },
19 | { title: 'No High School Diploma', code: 'EPL_NOHSDP' }
20 | ]
21 | },
22 | {
23 | title: 'Household Composition',
24 | items: [
25 | { title: 'Aged 65 or Over', code: 'EPL_AGE6' },
26 | { title: 'Aged 17 or Younger', code: 'EPL_AGE1' },
27 | { title: 'Disability Aged 5+', code: 'EPL_DIS' },
28 | { title: 'Single-Parent Households', code: 'EPL_SNGPNT' }
29 | ]
30 | },
31 | {
32 | title: 'Minority Status/Language',
33 | items: [
34 | { title: 'Minority', code: 'EPL_MINRTY' },
35 | { title: 'Speaks English "Less than Well"', code: 'EPL_LIMENG' }
36 | ]
37 | },
38 | {
39 | title: 'Housing and Transportation',
40 | items: [
41 | { title: 'Multi-Unit Structures', code: 'EPL_MUNIT' },
42 | { title: 'Mobile Homes', code: 'EPL_MOBILE' },
43 | { title: 'Crowding', code: 'EPL_CROWD' },
44 | { title: 'No Vehicle', code: 'EPL_NOVEH' },
45 | { title: 'Group Quarters', code: 'EPL_GRO' }
46 | ]
47 | }
48 | ];
49 |
50 | //function updateSidebarTitle(title) {
51 | // $('#overlay-title').text(title)}
52 |
53 | function updateSidebar(options) {
54 | console.log(options);
55 | layout.forEach(function(category) {
56 | category.items.forEach(function(item) {
57 | item.value = options[item.code] || options[item.code.substring(0, 7)];
58 | });
59 | });
60 |
61 | d3.select('#location').text(options.LOCATIO);
62 | d3.select('#F_Total-bignumber').text(options.FNew);
63 | d3.select('#population').text(function(d) {
64 | return 'Population ' + d3.format(',')(options.E_TOTPO);
65 | });
66 | d3.select('#diocese').text(function(d) {
67 | return 'Catholic Diocese: ' + options.Diocese;
68 | });
69 |
70 | var categories = container
71 | .selectAll('div.category')
72 | .data(layout, function(d) {
73 | return d.title;
74 | });
75 |
76 | var categoryEnter = categories
77 | .enter()
78 | .append('div')
79 | .attr('class', 'category');
80 |
81 | categoryEnter.append('div').append('h6').text(function(category) {
82 | return category.title;
83 | });
84 |
85 | var items = categories.merge(categoryEnter).selectAll('div.item').data(
86 | function(data) {
87 | return data.items;
88 | },
89 | function(data) {
90 | return data.title;
91 | }
92 | );
93 |
94 | var itemEnter = items.enter().append('div').attr('class', 'item cf');
95 |
96 | itemEnter.append('div').attr('class', 'item-title fl w-40').text(function(category) {
97 | return category.title;
98 | });
99 |
100 |
101 |
102 |
103 | var img = items.selectAll('div.flag-col').data(function(data) {
104 | return data.value > 90 ? [data] : [];
105 | });
106 |
107 | img.exit().remove();
108 |
109 | img
110 | .enter()
111 | .append('div')
112 | .attr('class', 'flag-col fl w-10 center')
113 | .append('img')
114 | .attr('src', 'icons/flag.svg')
115 | .attr('width', 12)
116 | .style('vertical-align', 'top')
117 | .style('padding-left', '3px')
118 | .attr('height', 12);
119 |
120 |
121 |
122 | itemEnter.append('div').attr('class', 'item-number fl w-10');
123 | items = items.merge(itemEnter);
124 |
125 | var svg = items.selectAll('g').data(function(data) {
126 | return [data];
127 | });
128 |
129 | svg.selectAll(".point").remove();
130 |
131 |
132 | var svgEnter = svg
133 | .enter()
134 | .append('div')
135 | .attr('class', 'fl w-40')
136 | .append('svg')
137 | .attr("preserveAspectRatio", "xMinYMin meet")
138 | .attr("viewBox", "0 0 130 8")
139 | // .attr('width', barwidth + 2)
140 | .style('vertical-align', 'top')
141 | // .attr('height', barheight + 2)
142 | .append('g')
143 | .attr('transform', 'translate(2, 2)');
144 |
145 | svgEnter
146 | .append('rect')
147 | .attr('class', 'bar-background')
148 | .attr('rx', 0)
149 | .attr('ry', 0)
150 | .attr('height', 10)
151 | .attr('width', width(100))
152 | .style('stroke', 'none')
153 | .style('fill', '#ccc');
154 |
155 | svgEnter
156 | .append('rect')
157 | .attr('class', 'bar')
158 | .attr('rx', 0)
159 | .attr('ry', 0)
160 | .attr('height', 10)
161 | .attr('width', 0)
162 | .style('fill', '#fff');
163 |
164 |
165 |
166 | svgEnter
167 | .append('svg')
168 | .attr('class', 'flag')
169 | .attr('y', 12)
170 | .style('fill', '#ffffff');
171 |
172 | svg = svg.merge(svgEnter);
173 | items = items.merge(itemEnter);
174 |
175 | svg
176 | .select('rect.bar')
177 | .transition()
178 | .duration(300)
179 | .attr('width', function(d) {
180 | return d.value !== undefined ?
181 | width(d.value) : width(1);
182 | })
183 | .style('fill', function(d) {
184 | return d.value !== undefined ?
185 | colorScale(d.value) : '#ccc';
186 | });
187 |
188 | items
189 | .select('div.item-number')
190 | .text(function(d) {
191 | return d.value === undefined ?
192 | 'N/A' : d3.format('.1f')(d.value);
193 | });
194 | }
195 |
196 | updateSidebar({});
197 |
--------------------------------------------------------------------------------
/css/mapbox-geocoder.css:
--------------------------------------------------------------------------------
1 | .mapboxgl-ctrl-geocoder,
2 | .mapboxgl-ctrl-geocoder *,
3 | .mapboxgl-ctrl-geocoder *:after,
4 | .mapboxgl-ctrl-geocoder *:before {
5 | -webkit-box-sizing:border-box;
6 | -moz-box-sizing:border-box;
7 | box-sizing:border-box;
8 | }
9 | .mapboxgl-ctrl-geocoder {
10 | font:15px/20px font-family: 'Roboto', sans-serif;
11 | position:relative;
12 | margin-right: 10px;
13 | margin-left: 10px;
14 | background-color:white;
15 | width:30%;
16 | min-width:180px;
17 | max-width:360px;
18 | z-index:1;
19 | border-radius:12px;
20 | }
21 |
22 | .mapboxgl-ctrl-geocoder input[type='text'] {
23 | font-size:12px;
24 | font-family: 'Roboto', sans-serif;
25 | width:100%;
26 | border:0;
27 | background-color:transparent;
28 | height:25px;
29 | margin:0;
30 | color:rgba(0,0,0,1);
31 | padding:10px 10px 10px 40px;
32 | text-overflow:ellipsis;
33 | white-space:nowrap;
34 | overflow:hidden;
35 | }
36 | .mapboxgl-ctrl-geocoder input:focus {
37 | color:rgba(0,0,0,.75);
38 | font-family: 'Roboto', sans-serif;
39 | outline:0;
40 | box-shadow:none;
41 | outline:thin dotted\8;
42 | }
43 |
44 | .mapboxgl-ctrl-geocoder .geocoder-icon-search {
45 | position:absolute;
46 | top:3px;
47 | left:10px;
48 | }
49 | .mapboxgl-ctrl-geocoder button {
50 | padding:0;
51 | margin:0;
52 | background-color:#fff;
53 | border:none;
54 | cursor:pointer;
55 | }
56 | .mapboxgl-ctrl-geocoder .geocoder-pin-right * {
57 | background-color:#fff;
58 | z-index:2;
59 | position:absolute;
60 | right:10px;
61 | top:10px;
62 | display:none;
63 | }
64 |
65 | .mapboxgl-ctrl-geocoder,
66 | .mapboxgl-ctrl-geocoder ul {
67 | box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
68 | }
69 |
70 | /* Suggestions */
71 | .mapboxgl-ctrl-geocoder ul {
72 | background-color:#fff;
73 | border-radius: 0 0 3px 3px;
74 | left:0;
75 | list-style:none;
76 | margin:0;
77 | padding:0;
78 | position:absolute;
79 | width:100%;
80 | top:100%;
81 | z-index:1000;
82 | overflow:hidden;
83 | font-size:12px;
84 | }
85 | .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-geocoder ul,
86 | .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-geocoder ul {
87 | top:auto;
88 | bottom:100%;
89 | }
90 | .mapboxgl-ctrl-geocoder ul > li > a {
91 | clear:both;
92 | font-family: 'Roboto', sans-serif;
93 | cursor:default;
94 | display:block;
95 | padding:5px 10px;
96 | white-space:nowrap;
97 | overflow:hidden;
98 | text-overflow:ellipsis;
99 | white-space:nowrap;
100 | border-bottom:1px solid rgba(0,0,0,0.1);
101 | color:#404040;
102 | }
103 | .mapboxgl-ctrl-geocoder ul > li:last-child > a { border-bottom:none; }
104 | .mapboxgl-ctrl-geocoder ul > li > a:hover {
105 | font-family: 'Roboto', sans-serif;
106 | color:#fff;
107 | background-color:#332A85;
108 | text-decoration:none;
109 | cursor:pointer;
110 | }
111 | .mapboxgl-ctrl-geocoder ul > li.active > a {
112 | color:#fff;
113 | font-family: 'Roboto', sans-serif;
114 | background-color:#332A85;
115 | text-decoration:none;
116 | cursor:pointer;
117 | }
118 |
119 | @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
120 | @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
121 | @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
122 | @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
123 |
124 | /* icons */
125 | .geocoder-icon {
126 | display:inline-block;
127 | width:20px;
128 | height:20px;
129 | vertical-align:middle;
130 | speak:none;
131 | background-repeat:no-repeat;
132 | }
133 | .geocoder-icon-search {
134 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIj4NCiAgPHBhdGggZD0iTTguNSA0QzYgNCA0IDYgNCA4LjUgNCAxMSA2IDEzIDguNSAxMyA5LjQgMTMgMTAuMiAxMi44IDEwLjggMTIuM0wxMC45IDEyLjMgMTQuMyAxNS43QzE0LjUgMTUuOSAxNC43IDE2IDE1IDE2IDE1LjYgMTYgMTYgMTUuNiAxNiAxNSAxNiAxNC43IDE1LjkgMTQuNSAxNS43IDE0LjNMMTIuMyAxMC45IDEyLjMgMTAuOEMxMi44IDEwLjIgMTMgOS40IDEzIDguNSAxMyA2IDExIDQgOC41IDR6TTguNSA1LjVDMTAuMiA1LjUgMTEuNSA2LjggMTEuNSA4LjUgMTEuNSAxMC4yIDEwLjIgMTEuNSA4LjUgMTEuNSA2LjggMTEuNSA1LjUgMTAuMiA1LjUgOC41IDUuNSA2LjggNi44IDUuNSA4LjUgNS41eiIgZmlsbD0iIzAwMCIvPg0KPC9zdmc+);
135 | }
136 | .geocoder-icon-close {
137 | background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiPg0KICA8cGF0aCBkPSJtNSA1IDAgMS41IDMuNSAzLjUtMy41IDMuNSAwIDEuNSAxLjUgMCAzLjUtMy41IDMuNSAzLjUgMS41IDAgMC0xLjUtMy41LTMuNSAzLjUtMy41IDAtMS41LTEuNSAwLTMuNSAzLjUtMy41LTMuNS0xLjUgMHoiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg==);
138 | }
139 | .geocoder-icon-loading {
140 | background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
141 | -webkit-animation: rotate 400ms linear infinite;
142 | -moz-animation: rotate 400ms linear infinite;
143 | -ms-animation: rotate 400ms linear infinite;
144 | animation: rotate 400ms linear infinite;
145 | }
--------------------------------------------------------------------------------
/js/newdonut.js:
--------------------------------------------------------------------------------
1 | var Donut=function(el,variable,iconurl){
2 | var donut=this;
3 |
4 | var ele = features.offsetWidth;
5 | /* Below is the width of ele */
6 |
7 | console.log(ele);
8 |
9 | donut.variable=variable;
10 |
11 | donut.tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
12 |
13 | // An arc function with all values bound except the endAngle. So, to compute an
14 | // SVG path string for a given angle, we pass an object with an endAngle
15 | // property to the `arc` function, and it will return the corresponding string.
16 |
17 | var donutwidth = (ele/7.5);
18 | console.log(donutwidth);
19 | var donutheight = donutwidth;
20 | var donut_color_range =
21 | ['#ffffcc','#ffeda0','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#bd0026','#800026'];
22 |
23 | var donut_data_bins = [3,6,9,12,15,18,21,24,60];
24 | donut.donutcolorScale = d3.scaleLinear().domain(donut_data_bins).range(donut_color_range);
25 |
26 |
27 |
28 | // nothing here yet
29 |
30 |
31 |
32 | donut.arc = d3.arc()
33 | .innerRadius((donutwidth/2)*.5)
34 | .outerRadius(donutwidth/2*.9)
35 | .startAngle(0);
36 |
37 | // Get the SVG container, and apply a transform such that the origin is the
38 | // center of the canvas. This way, we don’t need to position arcs individually.
39 | var svg = d3.select("#donut-1").append("svg")
40 | .attr('id','donut')
41 | .attr('width',donutwidth)
42 | .attr('height',donutheight)
43 |
44 | g = svg.append("g").attr("transform", "translate(" + donutwidth / 2 + "," + donutheight / 2 + ")");
45 |
46 | // Add the background arc, from 0 to 100% (tau).
47 | var background = g.append("path")
48 | .datum({endAngle: donut.tau})
49 | .style('stroke', 'none')
50 | .style('fill', '#ccc')
51 | .attr("d", donut.arc);
52 |
53 | donut.foreground = g.append("path")
54 | .datum({endAngle: 0 * donut.tau})
55 | .style("fill", "orange")
56 | .style('border-radius',4)
57 | .attr("d", donut.arc);
58 |
59 |
60 |
61 | // Add the foreground arc in orange, currently showing 12.7%.
62 |
63 |
64 | //var text = g.append("text")
65 | // .attr("x", 0)
66 | //.attr("y", 0)
67 | //.style('fill','#fff')
68 | //.text("");
69 |
70 |
71 | var img=g.append('image')
72 | .attr("xlink:href", iconurl)
73 | .style('fill','#fff')
74 | .attr("x", -9)
75 | .attr("y", -9)
76 | .attr("width", 17)
77 | .attr("height", 17);
78 |
79 | };
80 |
81 | // Every so often, start a transition to a new random angle. The attrTween
82 | // definition is encapsulated in a separate function (a closure) below.
83 | Donut.prototype.updateHazard=function(options) {
84 | var donut=this;
85 | console.log(options);
86 | donut.foreground.transition()
87 | .duration(300)
88 | .style('fill',function(d) {
89 | return donut.donutcolorScale(options[donut.variable]);})
90 | .attrTween("d", donut.arcTween(options[donut.variable]/60 * donut.tau));
91 |
92 | }
93 |
94 |
95 |
96 | // Returns a tween for a transition’s "d" attribute, transitioning any selected
97 | // arcs from their current angle to the specified new angle.
98 | Donut.prototype.arcTween=function(newAngle) {
99 | var donut=this;
100 | // The function passed to attrTween is invoked for each selected element when
101 | // the transition starts, and for each element returns the interpolator to use
102 | // over the course of transition. This function is thus responsible for
103 | // determining the starting angle of the transition (which is pulled from the
104 | // element’s bound datum, d.endAngle), and the ending angle (simply the
105 | // newAngle argument to the enclosing function).
106 | return function(d) {
107 |
108 | // To interpolate between the two angles, we use the default d3.interpolate.
109 | // (Internally, this maps to d3.interpolateNumber, since both of the
110 | // arguments to d3.interpolate are numbers.) The returned function takes a
111 | // single argument t and returns a number between the starting angle and the
112 | // ending angle. When t = 0, it returns d.endAngle; when t = 1, it returns
113 | // newAngle; and for 0 < t < 1 it returns an angle in-between.
114 | var interpolate = d3.interpolate(d.endAngle, newAngle);
115 |
116 | // The return value of the attrTween is also a function: the function that
117 | // we want to run for each tick of the transition. Because we used
118 | // attrTween("d"), the return value of this last function will be set to the
119 | // "d" attribute at every tick. (It’s also possible to use transition.tween
120 | // to run arbitrary code for every tick, say if you want to set multiple
121 | // attributes from a single function.) The argument t ranges from 0, at the
122 | // start of the transition, to 1, at the end.
123 | return function(t) {
124 |
125 | // Calculate the current arc angle based on the transition time, t. Since
126 | // the t for the transition and the t for the interpolate both range from
127 | // 0 to 1, we can pass t directly to the interpolator.
128 | //
129 | // Note that the interpolated angle is written into the element’s bound
130 | // data object! This is important: it means that if the transition were
131 | // interrupted, the data bound to the element would still be consistent
132 | // with its appearance. Whenever we start a new arc transition, the
133 | // correct starting angle can be inferred from the data.
134 | d.endAngle = interpolate(t);
135 |
136 | // Lastly, compute the arc path given the updated data! In effect, this
137 | // transition uses data-space interpolation: the data is interpolated
138 | // (that is, the end angle) rather than the path string itself.
139 | // Interpolating the angles in polar coordinates, rather than the raw path
140 | // string, produces valid intermediate arcs during the transition.
141 | return donut.arc(d);
142 | };
143 | };
144 | }
145 |
146 | var donuts = [
147 | new Donut('#donut-1', 'Hurricn','icons/hurricane - black.svg'),
148 | new Donut('#donut-2', 'Flood','icons/flood - black.svg'),
149 | new Donut('#donut-3', 'Earthqk','icons/earthquake - black.svg'),
150 | new Donut('#donut-4', 'Wildfir','icons/wildfire - black.svg'),
151 | new Donut('#donut-5', 'Tornado','icons/tornado - black.svg'),
152 | new Donut('#donut-6', 'Hail','icons/hail - black.svg'),
153 | ];
154 |
155 | function updateDonuts(options) {
156 | donuts.forEach(function(donut) {
157 | donut.updateHazard(options);
158 | })
159 | }
160 |
--------------------------------------------------------------------------------
/scripts/DataClean.R:
--------------------------------------------------------------------------------
1 | # Install as necessary:
2 | #install.packages('magrittr')
3 | #install.packages('rgdal')
4 | #install.packages('stringr')
5 | #install.packages('raster')
6 | #install.packages('dplyr')
7 |
8 | library(magrittr)
9 | library(rgdal)
10 | library(stringr)
11 | library(raster)
12 | library(sf)
13 | library(dplyr)
14 |
15 | # CDC data. Available at https://svi.cdc.gov/SVIDataToolsDownload.html
16 | # replace /Users/jakesnyder/DisasterVulnerability/ with the path to the data on your machine
17 |
18 | #Jake's Paths
19 | cdc_county_path <- "/Users/jakesnyder/DisasterVulnerability/County"
20 | cdc_tract_path <- "/Users/jakesnyder/DisasterVulnerability/Tract"
21 | hazard_path <- "/Users/jakesnyder/DisasterVulnerability/ATTOM hazard.csv"
22 | ccusa_path <- "/Users/jakesnyder/DisasterVulnerability/CountiesDioceses_052017.csv"
23 | main_path <- "/Users/jakesnyder/DisasterVulnerability"
24 | pr_county_path <- "/Users/jakesnyder/DisasterVulnerability/PRCounty"
25 | pr_tract_path <- "/Users/jakesnyder/DisasterVulnerability/PRTract"
26 |
27 | #Rich's Paths
28 | #cdc_path<-"/Users/Richard/Documents/dev/DisasterVulnerability/merge_no_nulls"
29 | #hazard_path<-"/Users/Richard/Documents/dev/DisasterVulnerability/ATTOM.csv"
30 | #ccusa_path<-"/Users/Richard/Documents/dev/DisasterVulnerability/Poly_Counties.csv"
31 |
32 | cdc_data <- readOGR(dsn = cdc_county_path, layer = "counties", stringsAsFactors = F)
33 | pr_county_data <- readOGR(dsn = pr_county_path, layer = "PUERTORICO_CNTY", stringsAsFactors = F)
34 |
35 | # Disaster likelyhood by fips. Available if you have accest to proprietary data
36 | hazard_data <- read.csv(hazard_path,stringsAsFactors = F, colClasses = c("FIPS" = "character"))
37 |
38 | #remove extra columns
39 | hazard_data<-hazard_data[,1:12]
40 |
41 | # remove NA's from hazard data
42 | hazard_data <- na.omit(hazard_data)
43 |
44 | # Load CCUSA agency and remove extra columns
45 | ccusa <- read.csv(ccusa_path,stringsAsFactors = F)
46 | ccusa <- ccusa %>% select(FIPS,Diocese) %>%
47 | mutate(FIPS = str_pad(FIPS,5,pad="0"))
48 |
49 |
50 | # join hazard data to shapefile
51 | merge_data <- merge(cdc_data, hazard_data, by.x="FIPS", by.y="FIPS", all.x=T)
52 | merge_data <- merge(merge_data, ccusa, by = "FIPS", all.x=T)
53 |
54 | # getting data as data frame
55 | county <- merge_data@data
56 | pr_counties <- pr_county_data@data
57 |
58 | # removing columns we don't need to keep the shapefile smaller
59 | county <- county %>% select(FIPS,
60 | LOCATIO,
61 | E_TOTPO,
62 | F_TOTAL,
63 | starts_with('EP'),
64 | -EP_UNIN,
65 | starts_with('RP'),
66 | contains('Risk'),
67 | Diocese) %>%
68 | # rename columns to match tract file
69 | rename(LOCATION = LOCATIO,
70 | E_TOTPOP = E_TOTPO,
71 | EP_UNEMP = EP_UNEM,
72 | EP_NOHSDP = EP_NOHS,
73 | EP_AGE65 = EP_AGE6,
74 | EP_AGE17 = EP_AGE1,
75 | EP_DISABL = EP_DISA,
76 | EP_SNGPNT = EP_SNGP,
77 | EP_MINRTY = EP_MINR,
78 | EP_LIMENG = EP_LIME,
79 | EP_MUNIT = EP_MUNI,
80 | EP_MOBILE = EP_MOBI,
81 | EP_CROWD = EP_CROW,
82 | EP_NOVEH = EP_NOVE,
83 | EP_GROUPQ = EP_GROU,
84 | EPL_UNEMP = EPL_UNE,
85 | EPL_NOHSDP = EPL_NOH,
86 | EPL_AGE65 = EPL_AGE6,
87 | EPL_AGE17 = EPL_AGE1,
88 | EPL_DISABL = EPL_DIS,
89 | EPL_SNGPNT = EPL_SNG,
90 | EPL_MINRTY = EPL_MIN,
91 | EPL_LIMENG = EPL_LIM,
92 | EPL_MUNIT = EPL_MUN,
93 | EPL_MOBILE = EPL_MOB,
94 | EPL_CROWD = EPL_CRO,
95 | EPL_NOVEH = EPL_NOV,
96 | EPL_GROUPQ = EPL_GRO) %>%
97 | # set null values created by join to 0
98 | mutate(Total.Natural.Hazard.Risk.Index = ifelse(is.na(Total.Natural.Hazard.Risk.Index),0,Total.Natural.Hazard.Risk.Index)) %>%
99 | mutate(Earthquake.Risk.Index = ifelse(is.na(Earthquake.Risk.Index),0,Earthquake.Risk.Index)) %>%
100 | mutate(Tornado.Risk.Index = ifelse(is.na(Tornado.Risk.Index),0,Tornado.Risk.Index)) %>%
101 | mutate(Hail.Risk.Index = ifelse(is.na(Hail.Risk.Index),0,Hail.Risk.Index)) %>%
102 | mutate(Hurricane.Storm.Surge.Risk.Index = ifelse(is.na(Hurricane.Storm.Surge.Risk.Index),0,Hurricane.Storm.Surge.Risk.Index)) %>%
103 | mutate(Flood.Risk.Index = ifelse(is.na(Flood.Risk.Index),0,Flood.Risk.Index)) %>%
104 | mutate(Wildfire.Risk.Index = ifelse(is.na(Wildfire.Risk.Index),0,Wildfire.Risk.Index)) %>%
105 | # rename hazard field names to be <11 characters
106 | rename(Total.Risk = Total.Natural.Hazard.Risk.Index,
107 | Earthquake = Earthquake.Risk.Index,
108 | Tornado = Tornado.Risk.Index,
109 | Hail = Hail.Risk.Index,
110 | Hurricane = Hurricane.Storm.Surge.Risk.Index,
111 | Flood = Flood.Risk.Index,
112 | Wildfire = Wildfire.Risk.Index)
113 |
114 | # modify PR counties to match other counties
115 | county_cols <- colnames(county)
116 | pr_counties <- pr_counties %>%
117 | mutate(Total.Risk = 0,
118 | Earthquake = 0,
119 | Tornado = 0,
120 | Hail = 0,
121 | Hurricane = 0,
122 | Flood = 0,
123 | Wildfire = 0,
124 | Diocese = '') %>%
125 | select_(.dots=county_cols)
126 |
127 | # setting it back to a large SpatialPolygonsDataframe
128 | merge_data@data <- county
129 | pr_county_data@data <- pr_counties
130 |
131 | # merge PR into larger dataset
132 | merge_data <- raster::union(merge_data,pr_county_data)
133 |
134 | # write to shapefile
135 | writeOGR(merge_data, dsn=main_path, layer="counties", driver="ESRI Shapefile", overwrite_layer = T)
136 |
137 | ## tract file reduction
138 | svi <- readOGR(cdc_tract_path, stringsAsFactors = F)
139 | tract <- svi@data
140 |
141 | pr_tract_data <- readOGR(dsn = pr_tract_path, layer = "PUERTORICO", stringsAsFactors = F)
142 | pr_tracts <- pr_tract_data@data
143 |
144 | # removing columns we don't need to keep the shapefile smaller
145 | tract <- tract %>% select(FIPS,
146 | LOCATION,
147 | E_TOTPOP,
148 | F_TOTAL,
149 | starts_with('EP'),
150 | -EP_UNINSUR,
151 | starts_with('RP'))
152 |
153 | # modify PR tract data to match tract
154 | tract_names <- colnames(tract)
155 |
156 | pr_tracts <- pr_tracts %>%
157 | select_(.dots=tract_names)
158 |
159 | # change null values to zero
160 | tract[tract==-999] <- 0
161 | pr_tracts[pr_tracts==-999] <- 0
162 |
163 | # setting it back to a large SpatialPolygonsDataframe
164 | svi@data <- tract
165 | pr_tract_data@data <- pr_tracts
166 |
167 | # merge PR into larger dataset
168 | svi <- raster::union(svi,pr_tract_data)
169 |
170 | # write to shapefile
171 | writeOGR(svi, dsn=main_path, layer="tracts", driver="ESRI Shapefile", overwrite_layer = T)
172 |
--------------------------------------------------------------------------------
/icons/flood.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
74 |
--------------------------------------------------------------------------------
/icons/flood - black.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
74 |
--------------------------------------------------------------------------------
/js/mapbox.js:
--------------------------------------------------------------------------------
1 | mapboxgl.accessToken = 'pk.eyJ1IjoiZGF0YWtpbmRkYyIsImEiOiJjaWppcmZtMHcwMnZ2dHlsdDlzenN0MnRqIn0.FsB8WZ_HKhb3mPa1MPXxdw';
2 |
3 | const toggleableLayerIds = [
4 | 'Social Vulnerability - Overall',
5 | 'Socioeconomic Status',
6 | 'Household Composition & Disability',
7 | 'Housing & Transportation',
8 | 'Total Natural Hazard Risk',
9 | 'Earthquake Risk',
10 | 'Tornado Risk',
11 | 'Hail Risk',
12 | 'Hurricane Risk',
13 | 'Flood Risk',
14 | 'Wildfire Risk'
15 | ];
16 | const toggleableLayersSocial = [
17 | { ids: ['tract', 'county'], name: ['Social Vulnerability - Overall']},
18 | { ids: ['tract-socio','county-socio'], name: ['Socioeconomic Vulnerability']},
19 | { ids: ['tract-household','county-household'], name: ['Household Composition and Disability Vulnerability']},
20 | { ids: ['tract-minority','county-minority'], name: ['Minority Status and Language Vulnerability']},
21 | { ids: ['tract-household','county-housing'], name: ['Housing and Transportation Vulnerability']},
22 | ];
23 |
24 | const toggleableLayersHazard = [
25 | { ids: ['county-hazard'], name: ['Overall Hazard Risk']},
26 | { ids: ['county-hurricane'], name: ['Hurricane Risk'], icon: ['icons/hurricane.svg']},
27 | { ids: ['county-flood'], name: ['Flood Risk'], icon: ['icons/flood.svg']},
28 | { ids: ['county-earthquake'], name: ['Earthquake Risk'], icon: ['icons/earthquake.svg']},
29 | { ids: ['county-wildfire'], name: ['Wildfire Risk'], icon: ['icons/wildfire.svg']},
30 | { ids: ['county-tornado'], name: ['Tornado Risk'], icon: ['icons/tornado.svg']},
31 | { ids: ['county-hail'], name: ['Hail Risk'], icon: ['icons/hail.svg']},
32 | ];
33 |
34 | function addCustomLayers(map) {
35 |
36 | mapSources.forEach(function(source) {
37 | let id = source[0];
38 | let obj = source[1];
39 | map.addSource(id, obj)
40 | });
41 |
42 | mapLayers.forEach(function(layer) {
43 | let obj = layer[0];
44 | let label = layer[1];
45 | map.addLayer(obj, label);
46 | });
47 |
48 | }
49 |
50 |
51 | function hideAllLayers() {
52 | toggleableLayersSocial.forEach(function(layer, i) {
53 | var link = menusocial.children[i];
54 | link.className = '';
55 | layer.ids.forEach(function(layerId) {
56 | map.setLayoutProperty(layerId, 'visibility', 'none');
57 | });
58 | });
59 | toggleableLayersHazard.forEach(function(layer, i) {
60 | var link = menuhazard.children[i];
61 | link.className = '';
62 | layer.ids.forEach(function(layerId) {
63 | map.setLayoutProperty(layerId, 'visibility', 'none');
64 | });
65 | });
66 | }
67 |
68 | function setOnLinkClickHandler(link, layer) {
69 | link.onclick = function (e) {
70 | e.preventDefault();
71 | e.stopPropagation();
72 | hideAllLayers();
73 | this.className = 'active';
74 | layer.ids.forEach(function(layerId) {
75 | map.setLayoutProperty(layerId, 'visibility', 'visible');
76 | });
77 |
78 | updateLegend(layer.ids[0],layer.name[0])
79 |
80 | };
81 | }
82 |
83 | function takeSnapshot() {
84 | newTab = window.open(printLink, 'Image');
85 | newTab.focus();
86 | }
87 |
88 | function loadPrintLink(map) {
89 |
90 | let el = $("#print-link");
91 | el.text('Print Current View');
92 | el.css("pointer-events", "all");
93 | el.css("cursor", "pointer");
94 |
95 | el.click(function() {
96 | printLink = map.getCanvas().toDataURL("image/png");
97 | takeSnapshot()
98 | });
99 | }
100 |
101 |
102 | var geocoder = new MapboxGeocoder({
103 | accessToken: mapboxgl.accessToken,
104 | zoom: 14,
105 | types: 'region,postcode,district,place',
106 | country: 'US'
107 | });
108 |
109 |
110 | var map = new mapboxgl.Map({
111 | container: 'map', // container id
112 | style: 'mapbox://styles/datakinddc/cin4w64ct0005abkuk6wxrak1',
113 | zoom: 2,
114 | hash:true,
115 | center: [-110.93, 38.49],
116 | minZoom: 3.5,
117 | // We only need to preserve drawing buffer if we implement printing
118 | // otherwise it is a performance drawback
119 | preserveDrawingBuffer: true,
120 | attributionControl: false
121 | });
122 |
123 | function addLayerNav(map) {
124 |
125 | var menusocial = document.getElementById('menusocial');
126 | var menuhazard = document.getElementById('menuhazard');
127 |
128 | toggleableLayersSocial.forEach(function(layer) {
129 | var link = document.createElement('a');
130 | link.href = '#';
131 | link.textContent = layer.name;
132 |
133 | setOnLinkClickHandler(link, layer);
134 |
135 | menusocial.appendChild(link);
136 | });
137 |
138 | toggleableLayersHazard.forEach(function(layer) {
139 | var link = document.createElement('a');
140 | link.href = '#';
141 | link.textContent = layer.name;
142 |
143 | setOnLinkClickHandler(link, layer);
144 |
145 | menuhazard.appendChild(link);
146 | });
147 | }
148 |
149 | //map.addControl(geocoder, 'top-left');
150 |
151 | d3.select('#search')
152 | .node()
153 | .appendChild(geocoder.onAdd(map));
154 |
155 |
156 | map.on('load', function() {
157 | addCustomLayers(map);
158 | addLayerNav(map);
159 | loadPrintLink(map);
160 |
161 |
162 | var lastFIPS=0;
163 | var click='FALSE';
164 |
165 | map.on('click', function (e){
166 | if(click==='TRUE'){
167 | click='FALSE'
168 | }else{click='TRUE'};
169 | console.log(click);
170 | } );
171 |
172 |
173 | map.on('mousemove', function (e) {
174 | if(click==='FALSE'){
175 | var county = map.queryRenderedFeatures(e.point, {
176 | layers: ['county','county-socio','county-housing','county-household','county-minority',
177 | 'county-hazard','county-hurricane','county-flood', 'county-earthquake','county-wildfire',
178 | 'county-tornado','county-hail']
179 | });
180 | var tract = map.queryRenderedFeatures(e.point, {
181 | layers: ['tract','tract-socio','tract-household','tract-housing','tract-minority']
182 | });
183 |
184 | if (tract.length>0){
185 | tract.map(function(e2){
186 | e2.properties.Earthquake = 0;
187 | e2.properties.Hail = 0;
188 | e2.properties.Flood = 0;
189 | e2.properties.Hurricane = 0;
190 | e2.properties.Tornado = 0;
191 | e2.properties.Diocese = 0;
192 | return e2;
193 | });
194 | if (county.length > 0){
195 | tract.map(function(e2){
196 | e2.properties.Earthquake = county[0].properties.Earthquake;
197 | e2.properties.Hail = county[0].properties.Hail;
198 | e2.properties.Flood = county[0].properties.Flood;
199 | e2.properties.Hurricane = county[0].properties.Hurricane;
200 | e2.properties.Tornado = county[0].properties.Tornado;
201 | e2.properties.Diocese = county[0].properties.Diocese;
202 | return e2;
203 | });
204 | }
205 | }
206 |
207 | if (county.length > 0 && map.getZoom() < 8.0) {
208 | map.getSource('highlight').setData({
209 | "type": "FeatureCollection",
210 | "features": county
211 | });
212 | if (county[0].properties.FIPS !== lastFIPS) {
213 | updateSidebar(county[0].properties);
214 | updateDonuts(county[0].properties);
215 | lastFIPS = county[0].properties.FIPS;
216 | }
217 |
218 | }
219 | else if (tract.length>0 && map.getZoom() >= 8.0) {
220 | map.getSource('highlight').setData({
221 | "type": "FeatureCollection",
222 | "features": tract
223 | });
224 | if (tract[0].properties.FIPS !== lastFIPS) {
225 | updateSidebar(tract[0].properties);
226 | updateDonuts(tract[0].properties);
227 | lastFIPS = tract[0].properties.FIPS;
228 | }
229 | } else {
230 | map.getCanvas().style.cursor = 'default';
231 | }
232 | };
233 | });
234 | });
235 |
236 |
--------------------------------------------------------------------------------
/css/map.css:
--------------------------------------------------------------------------------
1 | .mapbox-portal{
2 | height: 100%;
3 | min-height: 300px;
4 | width: 50%;
5 | }
6 | .navbar-default .navbar-nav>li>a {
7 | color: #ffffff !important;
8 | border-color:none;
9 | font-family: 'Roboto', sans-serif;
10 |
11 | font-size: 0.9em;
12 | }
13 |
14 | .navbar-default .navbar-collapse, .navbar-default .navbar-form{
15 | border-color:none;
16 | }
17 |
18 | a.header1 {
19 | font-family: 'Roboto', sans-serif;
20 | font-size: 1.2em !important;
21 | font-weight: 600 !important;
22 | color: #fff;
23 | }
24 |
25 |
26 | html, body {
27 | height: 0%;
28 | margin: 0;
29 | padding: 0;
30 | font-family: 'Roboto', sans-serif;
31 | font-size: 0.8em;
32 | color: #000;
33 | }
34 |
35 | h2, h3 {
36 | font-weight: 600;
37 | font-family: 'Nunito', sans-serif;
38 | }
39 |
40 | h4,h5,h6 {
41 | font-family: 'Nunito', sans-serif;
42 | }
43 | p {
44 | margin: 10px;
45 | text-align: left;
46 | }
47 |
48 | .title, .title:hover, .title:focus {
49 | color: #fff;
50 | font-family: 'Nunito', sans-serif;
51 | }
52 |
53 | #DKDC {
54 | position:absolute;
55 | right:5px;
56 | bottom:20px;
57 | }
58 |
59 | a {
60 | color: #000;
61 | }
62 |
63 | a.mapboxgl-ctrl-logo{
64 | display: none !important;
65 | }
66 |
67 | /**
68 | * Create a position for the map
69 | * on the page */
70 | #map {
71 | position:absolute;
72 | top: 50px;
73 | left: 0px;
74 | bottom:0;
75 | width:100%;
76 | }
77 | /**
78 | * Set rules for how the map overlays
79 | * (info box and legend) will be displayed
80 | * on the page. */
81 |
82 | .map-overlay {
83 | position: absolute;
84 | bottom: 0px;
85 | left: 0px;
86 | background:rgba(255,255,255,1);
87 | overflow: auto;
88 | }
89 |
90 | .navbar,.navbar-default,.nav,#aboutlink,#print-link{
91 | background: #332A85;
92 | color: #ffffff;
93 | text-align: right;
94 | border-color: none;
95 | }
96 |
97 | .navbar-toggle {
98 | position: relative;
99 | float: right;
100 | padding: 9px 10px;
101 | margin-top: 8px;
102 | margin-right: 15px;
103 | margin-bottom: 8px;
104 | background-color: transparent;
105 | background-image: none;
106 | border: 1px solid transparent;
107 | border-radius: 6px;
108 | border-color: transparent;
109 |
110 | }
111 |
112 | .navbar-default .navbar-toggle .icon-bar {
113 | background-color: #fff;
114 | border-color:none;
115 | }
116 | .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
117 | background-color: transparent;
118 | border-color:none;
119 | }
120 |
121 |
122 |
123 | #print-link {
124 | pointer-events: none;
125 | cursor: default;
126 | }
127 |
128 | #search{
129 | padding-top: 12px;
130 | padding-bottom: 10px;
131 | }
132 |
133 | #features {
134 | top: 50px;
135 | border-right: 1px solid #ccc;
136 | margin-top: 0px;
137 | width: 33%;
138 | min-width: 300px;
139 | }
140 |
141 | #menu {
142 | background: #fff;
143 | position: absolute;
144 | z-index: -2;
145 | top: 50px;
146 | height: calc(100% - 50px);
147 | width: 240px;
148 | }
149 |
150 | #menu a {
151 | display: block;
152 | margin: 0;
153 | padding: 10px;
154 | text-decoration: none;
155 | background-color: #fff;
156 | transition-property: background-color, color;
157 | transition-duration: .2s;
158 | transition-timing-function: ease-out;
159 | }
160 |
161 | #menu a:last-child {
162 | border: none;
163 | }
164 |
165 | #menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
166 | transition-property: background-color, color;
167 | transition-duration: .2s;
168 | transition-timing-function: ease-out;
169 | background-color: #FF921A;
170 | color: #fff;
171 | }
172 |
173 | .navbar-default .navbar-collapse, .navbar-default .navbar-form {
174 | border-color:none !important;
175 | }
176 |
177 | #menu a.active:hover {
178 | background: #FF921A;
179 | }
180 |
181 | .menutitles{
182 | margin-left: 10px;
183 | }
184 |
185 | #footer {
186 | position: absolute;
187 | bottom: 0;
188 | right: 0;
189 | padding-right: 10px;
190 | padding-top: 2px;
191 | padding-bottom: 2px;
192 | }
193 |
194 | #F_Total-bignumber {
195 | text-align: center;
196 | vertical-align: baseline;
197 | font-size: 18px;
198 | width:30px;
199 | font-weight: 500;
200 | }
201 |
202 | .btn-primary {
203 | background: #332A85;
204 | color: #ffffff;
205 | border-color: #332A85;
206 | }
207 |
208 | #legend {
209 | position: absolute;
210 | bottom: 0px;
211 | left: 33%;
212 | padding: 20px;
213 | width: 100px;
214 | color: #000;
215 | }
216 |
217 | @media all and (max-width: 900px) {
218 | #legend{
219 | margin-right: 0px;
220 | right: 300px;
221 | }
222 | }
223 |
224 | .center {
225 | margin-right: auto;
226 | margin-left: auto;
227 | }
228 |
229 | .legend-key {
230 | display: inline-block;
231 | border-radius: 20%;
232 | width: 10px;
233 | height: 10px;
234 | margin-right: 5px;
235 | }
236 |
237 | .legend-number {
238 | margin-right: 5px;
239 | }
240 |
241 | .legend-title {
242 | padding-bottom: 1em;
243 | }
244 |
245 | /* Popup container */
246 | .popup {
247 | position: relative;
248 | display: inline-block;
249 | cursor: pointer;
250 | }
251 |
252 | /* The actual popup (appears on top) */
253 | .popup .popuptext {
254 | visibility: hidden;
255 | font-family: 'Roboto', sans-serif;
256 | font-size: 0.6em;
257 | width: 220px;
258 | color: #000;
259 | background-color: rgba(255,255,255,1);
260 | text-align: left;
261 | border-radius: 6px;
262 | padding: 8px;
263 | position: absolute;
264 | z-index: 1;
265 | bottom: 125%;
266 | left: 50%;
267 | margin-left: -110px;
268 | }
269 |
270 | /* Popup arrow */
271 | .popup .popuptext::after {
272 | content: "";
273 | font-family: 'Roboto', sans-serif;
274 | color: #000;
275 | font-size: 0.8em;
276 | position: absolute;
277 | top: 100%;
278 | left: 50%;
279 | margin-left: -5px;
280 | border-width: 5px;
281 | border-style: solid;
282 | border-color: rgba(255,255,255,.8) transparent transparent transparent;
283 | }
284 |
285 | /* Toggle this class when clicking on the popup container (hide and show the popup) */
286 | .popup .show {
287 | visibility: visible;
288 | -webkit-animation: fadeIn 1s;
289 | animation: fadeIn 1s
290 | }
291 | .popup2 {
292 | position: relative;
293 | display: inline-block;
294 | cursor: pointer;
295 | }
296 |
297 | /* The actual popup (appears on top) */
298 | .popup2 .popuptext2 {
299 | visibility: hidden;
300 | font-family: 'Roboto', sans-serif;
301 | font-size: 0.6em;
302 | width: 220px;
303 | color: #000;
304 | background-color: rgba(255,255,255,1);
305 | text-align: left;
306 | border-radius: 6px;
307 | padding: 8px;
308 | position: absolute;
309 | z-index: 1;
310 | top: 125%;
311 | left: 50%;
312 | margin-left: -110px;
313 | }
314 |
315 | /* Popup arrow */
316 | .popup2 .popuptext2::after {
317 | content: "";
318 | font-family: 'Roboto', sans-serif;
319 | color: #000;
320 | font-size: 0.8em;
321 | position: absolute;
322 | bottom: 100%;
323 | left: 50%;
324 | margin-left: -5px;
325 | border-width: 5px;
326 | border-style: solid;
327 | border-color: rgba(255,255,255,.8) transparent transparent transparent;
328 | }
329 |
330 | /* Toggle this class when clicking on the popup container (hide and show the popup) */
331 | .popup2 .show {
332 | visibility: visible;
333 | -webkit-animation: fadeIn 1s;
334 | animation: fadeIn 1s
335 | }
336 |
337 |
338 |
339 | /* Add animation (fade in the popup) */
340 | @-webkit-keyframes fadeIn {
341 | from {opacity: 0;}
342 | to {opacity: 1;}
343 | }
344 |
345 | @keyframes fadeIn {
346 | from {opacity: 0;}
347 | to {opacity:1 ;}
348 | }
349 |
350 | @media print {
351 | .map-overlay {
352 | position: absolute;
353 | bottom: 0px;
354 | left: 0px;
355 | background:rgba(255,255,255,1) !important;
356 | overflow: auto;
357 | -webkit-print-color-adjust: exact;
358 | }
359 |
360 |
361 |
362 |
363 | }
364 |
365 |
366 |
367 |
368 |
369 |
370 | @media print {
371 |
372 | html, body, h1, h2, h3, h4, h5, .item-title, #location, #population, #diocese, .fl, #F_Total-bignumber {
373 | color: #fff !important;
374 | }
375 |
376 | .mapbox-portal{
377 | height: 100% !important;
378 | min-height: 300px;
379 | width: 50%;
380 | }
381 |
382 | }
383 |
384 |
385 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 
100 | Index scores range from 0 to 1, which depicts the percentiles of a particular county or tract relative to the rest of the USA. The higher the percentile ranking, the more vulnerable an area is in that category. A red flag indicates that an area is highly vulnerable, or in the top 90th percentile of a particular vulnerability.
101 |
102 |
109 |
131 | Hazard Risk is shown on a scale of 0-60. Data page contains more information about the factors considered for each.
Hurricane
Flood
Earthquake
Wildfire
Tornado
Hail Legend
169 | | Indicator | 114 |Vulnerability Category | 115 |Description | 116 |
|---|---|---|
| Below Poverty | 119 |Socioeconomic Status | 120 |Persons below poverty estimate | 121 |
| Unemployed | 124 |Socioeconomic Status | 125 |Civilian (age 16+) | 126 |
| Income | 129 |Socioeconomic Status | 130 |Per capita income | 131 |
| No High School Diploma | 134 |Socioeconomic Status | 135 |Persons (age 25+) with no high school diploma | 136 |
| Aged 65 or older | 140 |Household Composition | 141 |Persons aged 65 or older | 142 |
| Aged 17 or younger | 145 |Household Composition | 146 |Persons aged 17 or younger | 147 |
| Civilian with a disability | 150 |Household Composition | 151 |Civilian noninstitutionalized | 152 |
| Single-Parent Households | 155 |Household Composition | 156 |Single parent household with children under 18 | 157 |
| Minority | 163 |Minority Status/Language | 164 |Minority (all persons except white, non-Hispanic) | 165 |
| Speak English “Less than Well” | 168 |Minority Status/Language | 169 |Persons (age 5+) who speak English "less than well" | 170 |
| Multi-Unit Structures | 174 |Housing and Transportation | 175 |Housing in structures with 10 or more units | 176 |
| Mobile Homes | 179 |Housing and Transportation | 180 |Mobile homes | 181 |
| Crowding | 184 |Housing and Transportation | 185 |At household level (occupied housing units), more people than rooms | 186 |
| No Vehicle | 189 |Housing and Transportation | 190 |Households with no vehicle available estimate | 191 |
| Population | 194 |195 | | 196 | |
| Location | 199 |200 | | Text description of tract, county, and state | 201 |
| Indicator | 228 |Description | 229 |
|---|---|
| Overall Hazard Risk | 232 |Descrip | 233 |
| Hurricane Risk | 236 |Data is from FEMA and the National Hurricane Center (NHC), and risk level is based on two factors with equal weight: number and intensity of hurricane strikes historically; and percentage of homes located in flood zones identified as having a risk of “storm-induced waves” | 237 |
| Flood Risk | 240 |Data is based on flood zones created by the Federal Emergency Management Agency (FEMA), and the level of risk was based on the percentage of homes in each county located in high-risk flood zones | 241 |
| Earthquake Risk | 244 |Data is from the United States Geological Survey (USGS), and the level of risk was based on the probability of a magnitude 5.0 earthquake in each county | 245 |
| Wildfire Risk | 248 |Data is from the United States Department of Agriculture Forest Service and Fire Modeling Institute, and risk level is based on the percentage of homes in each county located in “Very High” or “High” Wildfire Hazard Potential (WHP) areas. | 249 |
| Tornado Risk | 252 |Data is from the National Oceanic and Atmospheric Administration (NOAA), and level of risk was based on the Destruction Potential Index (DPI) for each county. DPI is calculated using number of tornadoes, path of tornadoes in square miles, and intensity of tornadoes on the Fujita scale. | 253 |
| Hail Risk | 256 |Data is from NOAA and the risk level is based on the average number of hail storms per year in each county with hail that exceeds 1-inch in size over the past 15 years. | 257 |