-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_tract_test.html
147 lines (136 loc) · 6.27 KB
/
index_tract_test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!--<link rel="stylesheet" type="text/css" href="/MarkerCluster-1.3.0/dist/markercluster.css"><!-->
<!--<link rel="stylesheet" type="text/css" href="/leaflet.markercluster-1style.css"><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- <script src="hta_ca.js"></script> -->
<!-- <script src="updated_school_districts.js"></script> -->
<!-- <script src="updated_school_districts2.js"></script> -->
<!-- <script src="kana.js"></script> -->
<script src="mergedTracts.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- <script src="ca_tract_school_district.js"></script> -->
<!-- <script src="leaflet.markercluster-1.3.0/dist/leaflet.markercluster.js"></script> -->
<script>
var parameters = [
// {"text": "District Name","id": "name","val":"NAME"},
//{"text": "Custom Index","id": "custom_index","val":"rank"},
{"text": "County","id": "county","val":"County"},
{"text": "School District Rank Score","id": "rank","val":"Rank score (2017)"},
//{"text": "City","id": "city", "val":"City"},
// {"text": "District Type","id": "kind","val":"kind"},
{"text": "Population","id": "population","val":"population"},
{"text": "Households","id": "households","val":"households"},
{"text": "Median Gross Rent (Mo)","id": "medgrossrent","val":"median_gross_rent"},
{"text": "Avg Housing Cost (Mo)","id": "avgmonthlyhouse","val":"h_cost"},
{"text": "Num Violent Crimes in County","id": "violent","val":"Violent_sum"},
{"text": "Num Property Crimes in County","id": "property","val":"Property_sum"},
{"text": "Avg Transportation Cost","id": "transportation","val":"t_cost_80ami"},
{"text": "Avg Transit Cost","id": "transit","val":"transit_cost_80ami"},
{"text": "Job Access Score (1-10)","id": "access","val":"emp_ovrll_ndx"},
{"text": "Avg Annual Miles Traveled","id": "vmt","val":"vmt_per_hh_80ami"}];
$(document).ready(function () {
var tablebody = $('#detailsbody');
for (var i = 0; i < parameters.length; i++) {
var th = '<tr><th scope="row" class="text-right">' + parameters[i]['text'] + '</th>'
// if (parameters[i]['id'] == "rank") {
// var td = '<td id="' + parameters[i]['id'].toFixed(4) + '">...</td></tr>'
// } else {
var td = '<td id="' + parameters[i]['id'] + '">...</td></tr>'
// }
tablebody.append(th+td);
}
});
</script>
</head>
<title>
SUSA: The California Housing Crisis
</title>
<body>
<h1 class="container">
The California Housing Crisis
</h1>
<div class="container">
<p>
This web application is aimed to help the average consumer navigate the housing crisis.
This is meant to act as a reference for you to start your search for housing.
Just click on a tract to view more information and double click to zoom in on a tract and its surrounding tracts.
</br>Enter your location in the search bar below to view tracts near you!
</br>Good Luck :)</p>
</div>
</br>
<div class="container">
<div>
<text>
Enter a Location to find out more:
</text>
</div>
<div id="floating-panel" class="input-group">
<input id="address" type="textbox" class="form-control" value="Berkeley, CA">
<div class="input-group-append">
<input id="submit" class="btn btn-outline-secondary" type="button" value="Search">
</div>
</div>
<br/>
<div>
<text>
How important are the following characteristics to you?
</text>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Cost</span>
</div>
<input type="range" min="1" max="10" value="5" class="form-control" id="slideCost" style="height:50px;">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Safety</span>
</div>
<input type="range" min="1" max="10" value="5" class="form-control" id="slideSafety" style="height:50px;">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Travel</span>
</div>
<input type="range" min="1" max="10" value="5" class="form-control" id="slideTravel" style="height:50px;">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">School</span>
</div>
<input type="range" min="1" max="10" value="5" class="form-control" id="slideSchool" style="height:50px;">
</div>
<input id="recalc_map" class="btn btn-outline-secondary" type="button" value="Recalculate Map" onclick="recalculate()">
</div>
<br/>
<div class="container">
<div class="row">
<div id="map" class="col"></div>
<div class="col" style="height:600px;overflow-y:scroll;">
<div class="panel panel-default">
<div class="panel-body">
<h4> Tract Information: </h4>
<table class="table" id="details">
<tbody id="detailsbody">
<tr></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<input id="reset_map" class="btn btn-outline-secondary" type="button" value="Reset Map" onclick="reset()">
</div>
<script src="myscript_tract_test.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCslizjh07L9rDkfH9vY7vL6dDqju1gnA8&callback=initMap">
</script>
</body>
</html>