/
index.html
201 lines (201 loc) · 8.7 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Exploring Opportunity</title>
<link rel="stylesheet" type="text/css" href="styles/map.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Playfair+Display|Raleway|Old+Standard+TT|Open+Sans|Crimson+Text" rel="stylesheet">
<body>
<h1>Exploring Opportunity</h1>
<div id="howTo">
<a id="howTo" href="how-to">How to use this site</a>
</div>
<div id="dropContainer">
<div id="dropdown" onclick="showHide('dataContainer')"></div>
<div class="" id="dataContainer">
<div id="localContainer">
<h2 style="margin-left:8px">Use your own data</h2>
<div class="dataC" id="uploadContainer">
<div id="fileBttn">
<label class="bttn">Choose a <span class="mono">.csv</span><input type="file" id="input" style="display:none"/></label>
</div>
<div id="previewShadow">
<h5>Preview:</h5>
<div class="preview-box" id="uploadPreview"></div>
</div>
</div>
<div class="dataC mergeShadow">
<h4>Merge:</h4>
<p>Choose a variable that uniquely matches your geographies. It
must be a character string concatenation of the two-digit State and
three-digit County FIPS codes with leading zeros.
</p>
<p>For example: <span class="mono">35039</span> or
<span class="mono">01001</span>
</p>
<p style="margin-bottom:0">Missing values, should be of the form:
<span class="mono">NA</span> or
<span class="mono">NaN</span>
</p>
</div>
<div class="dataC">
<span class="mergeShadow">
<select disabled="true" id="idSelect">
<option id="load"></option>
</select>
</span>
<div id="mergeResults">
<h5>Information:</h5>
<div class="preview-box" id="information"></div>
<div class="bttn" id="missing">Download missing as <span class="mono">.json</span></div>
<div class="bttn" id="merged">Export merged dataset as <span class="mono">.csv</span></div>
</div>
</div>
<div class="cleared"></div>
</div>
<div id="apiContainer">
<h2 style="margin-left:8px">Use the Census API</h2>
<div class="apiC" style="margin-left:16px">
<h4>Dataset:</h4>
<select id="apiSelect">
<option value="null"></option>
<option value="acs">American Community Survery</option>
<option value="dec2000">2010 Decennial</option>
<select>
<h4>Variables:</h4>
<input id="apiVars"/>
<div class="bttn" id="missing">Download missing as <span class="mono">.json</span></div>
<div class="bttn" id="merged">Export merged dataset as <span class="mono">.csv</span></div>
</div>
<div class="apiC" id="apiShadow">
<h5>Information:</h5>
<div class="preview-box" id="apiPreview"></div>
</div>
</div>
</div>
</div>
<div class="contentWrapper">
<div id="mapLoader0"></div>
<div class="mainContent" id="mapContainer" onclick='showHide("inputContainer", "hide")'></div>
<div class="mainContent" id="input-field">
<div id="showInput" onclick="showHide('inputContainer')"></div>
<div id="inputContainer">
<div class="container" id="outcomeContainer">
<h2>Mapping Mobility</h2>
</div>
<div class="container">
<h3>Outcome:</h3>
<select id="outcomeSelector">
<option class="default" value="perm_res_p25_kr26">perm_res_p25_kr26</option>
</select>
<h5 style="font-weight:normal">Monotonic Transformation (optional):</h5>
<select class="full transform" id="outMonTrans">
<option class="null" value="null"></option>
<option value="logx">log(xᵢ - min{x + 1 | x ≤ 0})</option>
<option value="sqrtx">sqrt(xᵢ - min{x | x < 0})</option>
<option value="expx">exp(xᵢ)</option>
</select>
</div>
<div class="container" id="tooltipOptionConatiner">
<h3>Summary Variables:</h3>
<div class="tooltipOption"><input type="checkbox" class="ttOpt" value="cty_pop2000" name="Population" checked="checked">Population</input></div>
<div class="tooltipOption"><input type="checkbox" class="ttOpt" value="unemp_rate" name="Unemployment" checked="checked">Unemployment</input></div>
<div class="tooltipOption"><input type="checkbox" class="ttOpt" value="cs_labforce" name="Labor Force Participation">Labor Force Participation</input></div>
<div class="tooltipOption"><input type="checkbox" class="ttOpt" value="poor_share" name="Percent Below FPL">Percent Below Federal Poverty Level</input></div>
<div class="tooltipOption"><input type="checkbox" class="ttOpt" value="median_house_value" name="Median Home Value">Median Home Value</input></div>
</div>
<div class="container">
<h3>Colors:</h3>
<input value='["#222130","#add8e6"]' id="colorInput">
</div>
</div>
</div>
</div>
<div class="cleared" style="height:64px"></div>
<div class="mainContent" id="resultsContainer">
<div id="resultsSidebar">
<div class="closed" id="resultsOpts">
<div class="container">
<h2>Correlating Mobility</h2>
</div>
<div class="container">
<h3>LHS:</h3>
<select id="lhsSelect">
<option value="perm_res_p25_kr26">perm_res_p25_kr26</option>
</select>
</div>
<div class="container" id="rhsContainer">
<h3>RHS:</h3>
<div id="rhsSelect"></div>
</div>
<div align="center"><div class="bttn" id="predict" onclick='showHide("plotOpts","hide")'>Run!</div></div>
</div>
<div id="showResults" onclick="showHide('resultsOpts')"></div>
</div>
<div id="plotSidebar">
<div id="showPlot" onclick="showHide('plotOpts')"></div>
<div class="closed"class="closed" id="plotOpts">
<div class="container">
<h2>Plotting Mobility</h2>
</div>
<div class="container">
<h3>Independent Variable:</h3>
<select class="full" id="indVarSelect">
<option class="default" value="perm_res_p25_kr26">perm_res_p25_kr26</option>
</select>
<h5 style="font-weight:normal">Monotonic Transformation (optional):</h5>
<select class="full transform" id="indMonTrans">
<option class="load" value="null"></option>
<option class="transform" value="logx">log(xᵢ - min{x + 1 | x ≤ 0})</option>
<option class="transform" value="sqrtx">sqrt(xᵢ - min{x | x < 0})</option>
<option class="transform" value="expx">exp(xᵢ)</option>
</select>
</div>
<div class="container">
<h3>Dependent Variable:</h3>
<select class="full" id="depVarSelect">
<option class="default" value="cs_fam_wkidsinglemom">cs_fam_wkidsinglemom</option>
</select>
<h5 style="font-weight:normal">Monotonic Transformation (optional):</h5>
<select class="full transform" id="depMonTrans">
<option class="null" value="null"></option>
<option value="logx">log(xᵢ - min{x + 1 | x ≤ 0})</option>
<option value="sqrtx">sqrt(xᵢ - min{x | x < 0})</option>
<option value="expx">exp(xᵢ)</option>
</select>
</div>
<div class="container">
<h3>Fit Tend:</h3>
<select class="full" id="trendSelect">
<option class="null" value="null"></option>
<option value="line">Line</option>
<option value="quad">Quadratic</option>
<option value="local" disabled="disabled">Local Polynomial</option>
</select>
</div>
<div class="container">
<h3>Number of Bins</h3>
<input value="64" id="binNumber">
</div>
</div>
</div>
<div id="outputContainer">
<div class="results" id="plotContainer">
<div id="plot"></div>
</div>
<div class="results" id="regTableContainer" onclick='showHide("plotOpts","hide")'>
<h2 class="instructions">OLS Regression:</h2>
<div id="regTable"></div>
</div>
</div>
</div>
<div class="cleared" id="bottomBar">
<h1 style="color:snow;margin:10px;">□</h1>
<p>This project makes use of <a href="https://d3js.org/" target="_blank">D3.js</a> and <a href="http://www.numericjs.com/" target="_blank">Numeric.js</a> for visualization and numerical methods. It’s developed and maintained by <a href="https://www.checogonzales.com" target="_blank">Checo Gonzales</a>. <a href="mailto:chc.gnzls@gmail.com?Subject=Exploring%20Opportunity:%20[something%20specific]" target="_top">Questions, comments</a>, and <a href="https://github.com/chcgnzls/exploring-opportunity" target="_blank">contributions</a> are encouraged.
</p>
<p>The publicly available data comes from <a href="https://www.nhgis.org/" target="_blank">NHGIS</a>, the <a href="https://www.census.gov/" target="_blank">US Census Bureau</a>, <a href="http://www.equality-of-opportunity.org/data" target="_blank">Chetty, et al. (2014)</a>, or from wherever you collected yours.
</p>
</div>
<script src="scripts/d3.v4.js" charset="utf-8"></script>
<script src="scripts/topojson.v1.js"></script>
<script src="scripts/numeric-1.2.6.js"></script>
<script src="scripts/map.js"></script>
</body>