-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (106 loc) · 3.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Philadelphia Census in D3</title>
<link rel='stylesheet' href='css/style.css' />
<script src='js/lib/jquery-1.9.1.min.js'></script>
<script src='js/lib/jquery-ui.min.js'></script>
<script src='js/lib/d3.v3.min.js'></script>
<script src='js/lib/d3.geo.projection.v0.min.js'></script>
<script src='js/lib/topojson.v1.min.js'></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone.localStorage.js"></script>
<script src='js/scripts/centerWholeMapView.js'></script>
<script src='js/scripts/initMap.js'></script>
<script src='js/scripts/CMFunctions.js'></script>
<script src='js/scripts/completeMap.js'></script>
<script src='js/scripts/variables.js'></script>
<script src='js/scripts/demographicsSetup.js'></script>
<script src='js/scripts/drawLegend.js'></script>
<script src='js/scripts/centerZoomView.js'></script>
<script src='js/scripts/readIn.js'></script>
</head>
<body>
<form id='insertForm' method='post'>
<input type='text' id='ResInput' name='ResInput' placeholder='Tract #'></input>
<button id='submit'>Submit</button>
<select id='demoInput' name = 'demoInput'>
<option value='noselection'>Select a Demographic</option>
<option value='totalpop'>Population</option>
<option value='popdense'>Population Density</option>
<option value='orwhite'>White Population %</option>
<option value='orblack'>Black Population %</option>
<option value='latino'>Latino Population %</option>
<option value='orasian'>Asian Population %</option>
<option value='orother'>Other Population %</option>
<option value='twoormorerace'>Multiple Races %</option>
<option value='totalhouse'>Homes</option>
<option value='housedense'>Home Density</option>
<option value='vacant'>Vacant Homes %</option>
</select>
</form>
<div id='infoDiv'>
<div class='universe_name_label'>Philadelphia</div>
<div class='LR_name_label'></div>
<div class='HR_name_label'></div>
<div class='demoNameText'></div>
<div class='demoValueText'></div>
</div>
<svg id='infoSVG'></svg>
<svg id='mapSVG'></svg>
<script type="text/javascript">
var h = $(window).height();
//var w = h;
var w = $(window).width();
var extension = 300;
var svg = d3.select('#mapSVG');
var isvg = d3.select('#infoSVG');
/* var bsvg = d3.select('#buttonSVG');*/
var appView = Backbone.View.extend({
el:$('#insertForm'),
events: {
'change #demoInput': 'demoChanged',
'click #submit': 'submitClicked'
},
demoChanged: function(){
getDemographic();
},
submitClicked: function(e){
e.preventDefault();
formData = $('#insertForm').serializeArray();
viewRes.segNumber = formData[0].value;
if (viewRes.segNumber != 00) {
viewRes.mode='zoomIn';
initMap();
}
/*else {
viewRes.mode='LR';
}*/
//initMap();
}
});
function getDemographic() {
formData = $('#insertForm').serializeArray();
currentDemo.code = formData[1].value;
completeMap();
};
function precise_round(num,decimals){
if (num == undefined){
return '';
} else {
return (Math.round((num*Math.pow(10,decimals))+(10/Math.pow(100,decimals)))/Math.pow(10,decimals)).toFixed(decimals);
}
}
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
$(document).ready(readIn);
new appView();
</script>
</body>
</html>