/
homepage.html
351 lines (330 loc) · 32.4 KB
/
homepage.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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
{% extends "base.html" %}
{% load places graphs demographics humanize safecache inline_jsmin %}
{% block meta_keywords %}United States,national,{{ block.super }}{% endblock %}
{% block extrahead %}
<style type="text/css">
.smallmap {
width: 400px;
height: 400px;
border: 2px solid #ccc;
}
.graph_label_icon{width:1em;height:1em;display:block;float:left;clear:left;border:1px solid #444;margin-right:5px;}
.clear{clear:both}
</style>
{# TODO: OVER 60KB OF EXTERNAL JS. Can we do better? #}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key={{GOOGLE_MAPS_API_KEY}}" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://s3.amazonaws.com/nationbrowse/map_engine_1.js" type="text/javascript"></script>
<script type="text/javascript">
{% safecache 86400 nation_overview %}
{% startjsmin %}
var $j = jQuery.noConflict();
jQuery(function(){
NBMap.sourceProj = new OpenLayers.Projection("EPSG:4326");
NBMap.targetProj = new OpenLayers.Projection("EPSG:900913");
// Initialize the map object
NBMap.map = new OpenLayers.Map('map_div' , {
projection: NBMap.targetProj,
displayProjection: NBMap.sourceProj,
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34),
controls: [
new OpenLayers.Control.ZoomPanel(),
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.ScaleLine()
]
});
NBMap.wkt_parser = new OpenLayers.Format.WKT();
// ===== Map layers =====
NBMap.vectors = new OpenLayers.Layer.Vector("States", {
styleMap: NBMap.state_pop_map
});
NBMap.google = new OpenLayers.Layer.Google("Google Terrain", {
'type': G_PHYSICAL_MAP,
'displayInLayerSwitcher': false, // don't allow disabling this layer
'numZoomLevels': 22,
'sphericalMercator': true
});
// Dump states in via Django template forloop.
NBMap.state_tmp = [];
{% for state in states %}
{% ifnotequal state.simple_wkt "POLYGON EMPTY" %}
NBMap.state_tmp[{{forloop.counter0}}] = NBMap.wkt_to_vector('{{state.simple_wkt|escapejs}}');
NBMap.state_tmp[{{forloop.counter0}}].attributes = {
'total_pop':{% if state.population_demographics.total %}{{ state.population_demographics.total }}{% else %}0{% endif %},
'pop_density':Math.round({% if state.population_demographics.total %}{{ state.population_demographics.total }}{% else %}0{% endif %}/{{ state.area.sq_mi|floatformat:2 }}),
'area':'{{ state.area.sq_mi|floatformat:3|intcomma }} sq. mi.',
'violent_crime_rate':{% if state.crime_data.violent_crimes_per100k %}{{ state.crime_data.violent_crimes_per100k|floatformat:2 }}{% else %}0{% endif %},
'per_capita_income':{% if state.socioeco_data.per_capita_income %}{{ state.socioeco_data.per_capita_income|floatformat:2 }}{% else %}0{% endif %}
};
NBMap.state_tmp[{{forloop.counter0}}].data = {
'id':{{state.id}},
'name':'{{state|escapejs}}',
'url':'{{state.get_absolute_url}}',
'total_pop':'{{ state.population_demographics.total|intcomma }}',
'male':'{{ state.population_demographics.male|intcomma }}',
'female':'{{ state.population_demographics.female|intcomma }}',
'violent_crime_rate':'{{ state.crime_data.violent_crimes_per100k|floatformat:2|intcomma }} (per 100,000 residents)',
'per_capita_income':'{% if state.socioeco_data.per_capita_income %}{{ state.socioeco_data.per_capita_income|floatformat:2 }}{% else %}N/A{% endif %}'
};
{% endifnotequal %}
{% endfor %}
// Since some of the above items will be null, recreate the array
// so we have consequtive IDs on the array (because OpenLayers expects
// 0...n objects and fails on nulls).
NBMap.shapes = [];
for(var i = 0; i<NBMap.state_tmp.length; i++){
if (NBMap.state_tmp[i]){
NBMap.shapes.push(NBMap.state_tmp[i]);
}
}
// Destroy 'temporary' array
NBMap.state_tmp.length = 0;
NBMap.state_tmp = null;
delete NBMap.state_tmp;
NBMap.vectors.addFeatures(NBMap.shapes);
NBMap.map.addLayers([NBMap.google,NBMap.vectors]);
// ===== Center the map on the State's center. =====
var nation_center = new OpenLayers.LonLat(-92.8125, 38.8225909761771);
// Need to reproject the lat/lon into spherical mercator
NBMap.map.setCenter(nation_center.transform(NBMap.sourceProj, NBMap.targetProj));
// Zoom to the closest zoom that shows every state.
NBMap.map.zoomTo(3);
// ===== Handle mouseover/mouseout/click events =====
NBMap.hover_control = new OpenLayers.Control.SelectFeature(NBMap.vectors, {
hover:true,
onSelect: function(feature) {
// Hover will bold the name of the state in the list
// and also scroll the state's name into the view
var label = jQuery('#link_state_'+feature.data.id);
label.css('font-weight','bold');
label.css('font-size','larger');
if (NBMap.list_autoscroll)
jQuery("#states_list").scrollTo(label);
var data_html = '<h2 style="margin:0">'+feature.data.name+"</h2>";
data_html += '<table style="margin:0;width:190px">';
data_html += "<tr><td><b>Population</b></td><td>"+feature.data.total_pop+"</td></tr>"
data_html += "<tr><td><b>Male pop.</b></td><td>"+feature.data.male+"</td></tr>"
data_html += "<tr><td><b>Female pop.</b></td><td>"+feature.data.female+"</td></tr>";
data_html += '<tr><td colspan="2"> </td></tr>';
data_html += "<tr><td><b>Violent crime rate</b></td><td>"+feature.data.violent_crime_rate+"</td></tr>"
data_html += '<tr><td colspan="2"> </td></tr>';
data_html += "<tr><td><b>Per-capita income</b></td><td>"+feature.data.per_capita_income+"</td></tr>"
data_html += '<tr><td colspan="2"> </td></tr>';
data_html += "<tr><td><b>Area</b></td><td>"+feature.attributes.area+"</td></tr>"
data_html += "<tr><td><b>Pop. density</b></td><td>"+feature.attributes.pop_density+" (per sq. mi.)</td></tr>"
data_html += "</table>";
jQuery('#states_data_pane').html(data_html);
},
onUnselect: function(feature) {
// When the mouse leaves the poly, unbold the name in list.
var label = jQuery('#link_state_'+feature.data.id);
label.css('font-weight','normal');
label.css('font-size','medium');
},
callbacks: {
'click': function(feature) {
// On click, destroy the map obj (to prevent browser memory
// leaks) and redirect to the page for the state.
var url = feature.data.url;
NBMap.map.destroy();
window.location.href = url;
return false;
}
}
});
NBMap.map.addControl(NBMap.hover_control);
NBMap.hover_control.activate();
// Magics to get the "reverse" hover working:
// Hover over the label and you get the *poly* highlighted.
jQuery.each(NBMap.shapes,function(i, obj){
var label = jQuery('#link_state_'+obj.data.id);
label.mouseover(function(){
// Disable the "scrollTo" hook because we don't want the list
// to scroll while we're mousing over the list!
NBMap.list_autoscroll = false;
// Externally calls the .overFeature in our hover_control handler (above)
NBMap.hover_control.overFeature(obj);
});
label.mouseout(function(){
// Same as above, except for the .outFeature method
NBMap.hover_control.outFeature(obj);
// Re-enable "scrollTo" hook so the list will autoscroll if
// user mouses over the map.
NBMap.list_autoscroll = true;
});
});
});
{% endjsmin %}
{% endsafecache %}
</script>
{% endblock %}
{% block body %}
<div style="width:830px;border:1px solid #999">
<div id="map_div" class="smallmap" style="float:left"></div>
<ul id="states_list" style="float:left;width:200px;height:400px;margin:0 0 0 5px;padding:0;overflow:auto;list-style-type:none;list-style-position:outside">
{% for state in states %}
<li style="margin:0"><a href="{{ state.get_absolute_url }}" id="link_state_{{state.id}}" onMouseOver="">{{ state }}</a></li>{% endfor %}
</ul>
<div id="states_data_pane" style="float:left;width:200px;height:400px;margin:0 0 0 10px;overflow:auto">
</div>
<br style="clear:both"/>
</div>
<p>Shaded by <span id="map_type_label">population size</span>.<br />
Shade by: <a href="#" class="map_to_state_pop">population size</a> • <a href="#" class="map_to_density">population density</a> • <a href="#" class="map_to_crime">crime rate</a> • <a href="#" class="map_to_per_capita">per-capita income</a></p>
<hr />
<h2>Demographics</h2>
<p>Max, mean, min, standard deviation, and variance calculated from the sample of {{ place.children.count }} states/territories.</p>
<table>
<tr>
<th>Demographic</th>
<th>Population</th>
<th style="text-align:center">%</th>
<th style="border-left:2px solid #999">Max</th>
<th>Mean</th>
<th>Min.</th>
<th>Std. Deviation</th>
<th>Variance</th>
</tr>
<tr><td><b>Total population</b></td><td style="text-align:right">{{ demographics.total|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.total %}</td>{% data_agg_columns place placepopulation total %}</tr>
<tr><td><b>Males</b></td><td style="text-align:right">{{ demographics.male|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.male %}</td>{% data_agg_columns place placepopulation male %}</tr>
<tr><td><b>Females</b></td><td style="text-align:right">{{ demographics.female|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.female %}</td>{% data_agg_columns place placepopulation female %}</tr>
{% comment %}
<tr><td><b>Urban population</b></td><td style="text-align:right">{{ demographics.urban|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.urban %}</td></tr>
<tr><td><b>Rural population</b></td><td style="text-align:right">{{ demographics.rural|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.rural %}</td></tr>
{% endcomment %}
<tr><td colspan="8"><hr /></td></tr>
<tr><td colspan="8">{% race_piechart place_type place.slug %}</td></tr>
<tr>
<th>Demographic</th>
<th>Population</th>
<th style="text-align:center">%</th>
<th style="border-left:2px solid #999">Max</th>
<th>Mean</th>
<th>Min.</th>
<th>Std. Deviation</th>
<th>Variance</th>
</tr>
<tr><td><b>Population of one race</b></td><td style="text-align:right">{{ demographics.onerace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace %}</td>{% data_agg_columns place placepopulation onerace %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(0, 0, 255);"> </div> <b>White only</b></td><td style="text-align:right">{{ demographics.onerace_white|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_white %}</td>{% data_agg_columns place placepopulation onerace_white %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(85, 85, 255);"> </div> <b>Black only</b></td><td style="text-align:right">{{ demographics.onerace_black|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_black %}</td>{% data_agg_columns place placepopulation onerace_black %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(153, 153, 17);"> </div> <b>Native American only</b></td><td style="text-align:right">{{ demographics.onerace_amerindian|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_amerindian %}</td>{% data_agg_columns place placepopulation onerace_amerindian %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(0, 255, 0);"> </div> <b>Asian only</b></td><td style="text-align:right">{{ demographics.onerace_asian|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_asian %}</td>{% data_agg_columns place placepopulation onerace_asian %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(255, 0, 255);"> </div> <b>Pacific Islander only</b></td><td style="text-align:right">{{ demographics.onerace_pacislander|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_pacislander %}</td>{% data_agg_columns place placepopulation onerace_pacislander %}</tr>
<tr class="clear"><td style="padding-left:2em"><div class="graph_label_icon" style="background-color: rgb(255, 255, 0);"> </div> <b>Other descent only</b></td><td style="text-align:right">{{ demographics.onerace_other|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.onerace_other %}</td>{% data_agg_columns place placepopulation onerace_other %}</tr>
<tr class="clear"><td><div class="graph_label_icon" style="background-color: rgb(136, 136, 136);"> </div> <b>… two-race descent</b></td><td style="text-align:right">{{ demographics.tworace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.tworace %}</td>{% data_agg_columns place placepopulation tworace %}</tr>
<tr class="clear"><td><div class="graph_label_icon" style="background-color: rgb(136, 136, 136);"> </div> <b>… three-race (or more) descent</b></td><td style="text-align:right">{{ demographics.threerace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.threerace %}</td>{% data_agg_columns place placepopulation threerace %}</tr>
{% comment %} ACS 2008 only goes up to 3
<tr><td><b>Population of four-race descent</b></td><td style="text-align:right">{{ demographics.fourrace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.fourrace %}</td></tr>
<tr><td><b>Population of five-race descent</b></td><td style="text-align:right">{{ demographics.fiverace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.fiverace %}</td></tr>
<tr><td><b>Population of six-race (or more) descent</b></td><td style="text-align:right">{{ demographics.sixrace|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.sixrace %}</td></tr>
<tr><td colspan="3"><b>Population of race (in any amount):</b></td></tr>
<tr><td style="padding-left:2em"><b>White</b></td><td style="text-align:right">{{ demographics.white|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.white %}</td></tr>
<tr><td style="padding-left:2em"><b>Black</b></td><td style="text-align:right">{{ demographics.black|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.black %}</td></tr>
<tr><td style="padding-left:2em"><b>Native American</b></td><td style="text-align:right">{{ demographics.amerindian|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.amerindian %}</td></tr>
<tr><td style="padding-left:2em"><b>Asian</b></td><td style="text-align:right">{{ demographics.asian|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.asian %}</td></tr>
<tr><td style="padding-left:2em"><b>Pacific Islander</b></td><td style="text-align:right">{{ demographics.pacislander|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.pacislander %}</td></tr>
<tr><td style="padding-left:2em"><b>Other descent</b></td><td style="text-align:right">{{ demographics.other|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.other %}</td></tr>
{% endcomment %}
<tr><td colspan="8"><hr /></td></tr>
{% age_barchart place_type place.slug %}
<tr>
<th>Demographic</th>
<th>Population</th>
<th style="text-align:center">%</th>
<th style="border-left:2px solid #999">Max</th>
<th>Mean</th>
<th>Min.</th>
<th>Std. Deviation</th>
<th>Variance</th>
</tr>
<tr class="clear"><td><b>Age 0-4</b></td><td style="text-align:right">{{ demographics.age_0_4|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_0_4 %}</td>{% data_agg_columns place placepopulation age_0_4 %}</tr>
<tr class="clear"><td><b>Age 5-9</b></td><td style="text-align:right">{{ demographics.age_5_9|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_5_9 %}</td>{% data_agg_columns place placepopulation age_5_9 %}</tr>
<tr class="clear"><td><b>Age 10-14</b></td><td style="text-align:right">{{ demographics.age_10_14|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_10_14 %}</td>{% data_agg_columns place placepopulation age_10_14 %}</tr>
<tr class="clear"><td><b>Age 15-19</b></td><td style="text-align:right">{{ place.population_demographics.age_15_19|intcomma }}</td><td style="text-align:right">{% population_percent place place.population_demographics.age_15_19 %}</td><td colspan="5" style="text-align:center;border-left:2px solid #999">not available</td></tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 15-17</b></td><td style="text-align:right">{{ demographics.age_15_17|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_15_17 %}</td>{% data_agg_columns place placepopulation age_15_17 %}</tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 15-17</b></td><td style="text-align:right">{{ demographics.age_18_19|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_18_19 %}</td>{% data_agg_columns place placepopulation age_18_19 %}</tr>
<tr class="clear"><td><b>Age 20-24</b></td><td style="text-align:right">{{ place.population_demographics.age_20_24|intcomma }}</td><td style="text-align:right">{% population_percent place place.population_demographics.age_20_24 %}</td><td colspan="5" style="text-align:center;border-left:2px solid #999">not available</td></tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 20</b></td><td style="text-align:right">{{ demographics.age_20|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_20 %}</td>{% data_agg_columns place placepopulation age_20 %}</tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 21</b></td><td style="text-align:right">{{ demographics.age_21|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_21 %}</td>{% data_agg_columns place placepopulation age_21 %}</tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 22_24</b></td><td style="text-align:right">{{ demographics.age_22_24|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_22_24 %}</td>{% data_agg_columns place placepopulation age_22_24 %}</tr>
<tr class="clear"><td><b>Age 25-29</b></td><td style="text-align:right">{{ demographics.age_25_29|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_25_29 %}</td>{% data_agg_columns place placepopulation age_25_29 %}</tr>
<tr class="clear"><td><b>Age 30-34</b></td><td style="text-align:right">{{ demographics.age_30_34|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_30_34 %}</td>{% data_agg_columns place placepopulation age_30_34 %}</tr>
<tr class="clear"><td><b>Age 35-39</b></td><td style="text-align:right">{{ demographics.age_35_39|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_35_39 %}</td>{% data_agg_columns place placepopulation age_35_39 %}</tr>
<tr class="clear"><td><b>Age 40-44</b></td><td style="text-align:right">{{ demographics.age_40_44|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_40_44 %}</td>{% data_agg_columns place placepopulation age_40_44 %}</tr>
<tr class="clear"><td><b>Age 45-49</b></td><td style="text-align:right">{{ demographics.age_45_49|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_45_49 %}</td>{% data_agg_columns place placepopulation age_45_49 %}</tr>
<tr class="clear"><td><b>Age 50-54</b></td><td style="text-align:right">{{ demographics.age_50_54|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_50_54 %}</td>{% data_agg_columns place placepopulation age_50_54 %}</tr>
<tr class="clear"><td><b>Age 55-59</b></td><td style="text-align:right">{{ demographics.age_55_59|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_55_59 %}</td>{% data_agg_columns place placepopulation age_55_59 %}</tr>
<tr class="clear"><td><b>Age 60-64</b></td><td style="text-align:right">{{ place.population_demographics.age_60_64|intcomma }}</td><td style="text-align:right">{% population_percent place place.population_demographics.age_60_64 %}</td><td colspan="5" style="text-align:center;border-left:2px solid #999">not available</td></tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 60-61</b></td><td style="text-align:right">{{ demographics.age_60_61|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_60_61 %}</td>{% data_agg_columns place placepopulation age_60_61 %}</tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 62-64</b></td><td style="text-align:right">{{ demographics.age_62_64|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_62_64 %}</td>{% data_agg_columns place placepopulation age_62_64 %}</tr>
<tr class="clear"><td><b>Age 65-69</b></td><td style="text-align:right">{{ place.population_demographics.age_65_69|intcomma }}</td><td style="text-align:right">{% population_percent place place.population_demographics.age_65_69 %}</td><td colspan="5" style="text-align:center;border-left:2px solid #999">not available</td></tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 65-66</b></td><td style="text-align:right">{{ demographics.age_65_66|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_65_66 %}</td>{% data_agg_columns place placepopulation age_65_66 %}</tr>
<tr class="clear"><td style="padding-left:2em"><b>Age 67-69</b></td><td style="text-align:right">{{ demographics.age_67_69|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_67_69 %}</td>{% data_agg_columns place placepopulation age_67_69 %}</tr>
<tr class="clear"><td><b>Age 70-74</b></td><td style="text-align:right">{{ demographics.age_70_74|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_70_74 %}</td>{% data_agg_columns place placepopulation age_70_74 %}</tr>
<tr class="clear"><td><b>Age 75-79</b></td><td style="text-align:right">{{ demographics.age_75_79|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_75_79 %}</td>{% data_agg_columns place placepopulation age_75_79 %}</tr>
<tr class="clear"><td><b>Age 80-84</b></td><td style="text-align:right">{{ demographics.age_80_84|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_80_84 %}</td>{% data_agg_columns place placepopulation age_80_84 %}</tr>
<tr class="clear"><td><b>Age 85+</b></td><td style="text-align:right">{{ demographics.age_85_plus|intcomma }}</td><td style="text-align:right">{% population_percent place demographics.age_85_plus %}</td>{% data_agg_columns place placepopulation age_85_plus %}</tr>
</table>
<br class="clear"/>
<p>Demographic data source: <a href="{{ place.population_demographics.source.url }}">{{ place.population_demographics.source }}</a></p>
{% if place.socioeco_data %}<hr />
<h2>Socio-economic data</h2>
<table><tr>
<th>Demographic</th>
<th>Population</th>
<th style="text-align:center">%</th>
<th style="border-left:2px solid #999">Max</th>
<th>Mean</th>
<th>Min.</th>
<th>Std. Deviation</th>
<th>Variance</th>
</tr>
<tr><td><b>Population (3+ yrs old) enrolled in school</b></td><td style="text-align:right">{{ socioeco_data.edu_in_school|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_in_school %}</td>{% data_agg_columns place socialcharacteristics edu_in_school %}</tr>
<tr><td style="padding-left:2em"><b>in preschool</b></td><td style="text-align:right">{{ socioeco_data.edu_preschool|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_preschool %}</td>{% data_agg_columns place socialcharacteristics edu_preschool %}</tr>
<tr><td style="padding-left:2em"><b>in kindergarten</b></td><td style="text-align:right">{{ socioeco_data.edu_kindergarten|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_kindergarten %}</td>{% data_agg_columns place socialcharacteristics edu_kindergarten %}</tr>
<tr><td style="padding-left:2em"><b>in grade 1-4</b></td><td style="text-align:right">{{ socioeco_data.edu_1_4|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_1_4 %}</td>{% data_agg_columns place socialcharacteristics edu_1_4 %}</tr>
<tr><td style="padding-left:2em"><b>in grade 5-8</b></td><td style="text-align:right">{{ socioeco_data.edu_5_8|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_5_8 %}</td>{% data_agg_columns place socialcharacteristics edu_5_8 %}</tr>
<tr><td style="padding-left:2em"><b>in grade 9-12</b></td><td style="text-align:right">{{ socioeco_data.edu_9_12|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_9_12 %}</td>{% data_agg_columns place socialcharacteristics edu_9_12 %}</tr>
<tr><td style="padding-left:2em"><b>in college (undergraduate)</b></td><td style="text-align:right">{{ socioeco_data.edu_undergrad|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_undergrad %}</td>{% data_agg_columns place socialcharacteristics edu_undergrad %}</tr>
<tr><td style="padding-left:2em"><b>in graduate or professional school</b></td><td style="text-align:right">{{ socioeco_data.edu_postgrad|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_postgrad %}</td>{% data_agg_columns place socialcharacteristics edu_postgrad %}</tr>
<tr><td><b>… <i>not</i> enrolled</b></td><td style="text-align:right">{{ socioeco_data.edu_not_in_school|intcomma }}</td><td style="text-align:right">{% population_percent place socioeco_data.edu_not_in_school %}</td>{% data_agg_columns place socialcharacteristics edu_not_in_school %}</tr>
</table>
<br />
<table><tr><th></th><th>Value</th></tr>
<tr><td><b>Aggregate income</b></td><td style="text-align:right">${{ socioeco_data.aggregate_income|intcomma }}</td></tr>
<tr><td><b>Per-capita income</b></td><td style="text-align:right">${{ socioeco_data.per_capita_income|intcomma }}</td></tr>
<tr><td><b>Median income</b></td><td style="text-align:right">${{ socioeco_data.median_income|intcomma }}</td></tr>
</table>
<p>Socio-economic data source: <a href="{{ place.socioeco_data.source.url }}">{{ place.socioeco_data.source }}</a></p>
{% endif %}
{% if place.crime_data %}<hr />
<h2>Crime data</h2>
<table><tr>
<th>Item</th>
<th>Value</th>
<th style="border-left:2px solid #999">Max</th>
<th>Mean</th>
<th>Min.</th>
<th>Std. Deviation</th>
<th>Variance</th>
</tr>
<tr><td><b>Violent crimes reported</b></td><td style="text-align:right">{{ crime_data.violent_crime|intcomma }}</td>{% data_agg_columns place crimedata violent_crime %}</tr>
<tr><td style="padding-left:2em"><b>murder and nonnegligent manslaughter</b></td><td style="text-align:right">{{ crime_data.murder|intcomma }}</td>{% data_agg_columns place crimedata murder %}</tr>
<tr><td style="padding-left:2em"><b>forcible rape</b></td><td style="text-align:right">{{ crime_data.rape|intcomma }}</td>{% data_agg_columns place crimedata rape %}</tr>
<tr><td style="padding-left:2em"><b>robber</b></td><td style="text-align:right">{{ crime_data.robbery|intcomma }}</td>{% data_agg_columns place crimedata robbery %}</tr>
<tr><td style="padding-left:2em"><b>aggravated assault</b></td><td style="text-align:right">{{ crime_data.assault|intcomma }}</td>{% data_agg_columns place crimedata assault %}</tr>
<tr><td colspan="7"><hr /></td></tr>
<tr><td><b>Property crimes reported</b></td><td style="text-align:right">{{ crime_data.property_crime|intcomma }}</td>{% data_agg_columns place crimedata property_crime %}</tr>
<tr><td style="padding-left:2em"><b>burglary</b></td><td style="text-align:right">{{ crime_data.burglary|intcomma }}</td>{% data_agg_columns place crimedata burglary %}</tr>
<tr><td style="padding-left:2em"><b>larceny-theft</b></td><td style="text-align:right">{{ crime_data.larceny_theft|intcomma }}</td>{% data_agg_columns place crimedata larceny_theft %}</tr>
<tr><td style="padding-left:2em"><b>motor vehicle theft</b></td><td style="text-align:right">{{ crime_data.auto_theft|intcomma }}</td>{% data_agg_columns place crimedata auto_theft %}</tr>
</table>
<p>Crime data source: <a href="{{ place.crime_data.source.url }}">{{ place.crime_data.source }}</a></p>
{% endif %}
{% endblock %}