-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpromise-zone-builder.html
68 lines (67 loc) · 3.64 KB
/
promise-zone-builder.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
---
layout: default
title: Promise Zone Builder
useD3: true
useTopoJSON: true
useGoogleFonts: false
useColorBrewer: true
pageJs: builder
---
<div id="container">
<div id="buttons">
<button id="zoom_in" class="zoom">+</button>
<button id="zoom_out" class="zoom">-</button>
<button id="pan_left" class="pan">←</button>
<button id="pan_up" class="pan">↑</button>
<button id="pan_down" class="pan">↓</button>
<button id="pan_right" class="pan">→</button>
<button id="neediest-neighbor" disabled="disabled">Neediest Neighbor</button>
<button id="reset">Reset</button>
</div> <!-- buttons -->
<div id="svg-map-container"><svg id="map"></svg></div>
<div id="left-column">
<div id="pz-info">
<h2>Promise Zone Builder</h2>
<table id="pz-table" class="hidden">
<tr>
<td>Counties</td>
<td id="totalcounties">0</td>
</tr>
<tr>
<td>Population</td>
<td id="totalpop">0</td>
</tr>
<tr>
<td>Poverty Rate</td>
<td id="totalpvr">0</td>
</tr>
<tr>
<td>Unemployment Rate</td>
<td id="totaluer">0</td>
</tr>
</table>
</div> <!-- pz-info -->
<div id="pz-detail" class="hidden">
</div> <!-- pz-detail -->
</div> <!-- right-column -->
</div> <!-- container -->
<div style="clear:both;"></div>
<div id="content">
<h2>Build Your Own</h2>
<p>Start building a Promise Zone by selecting any one county on the map. From there, you will be able to select geographically contiguous counties. Click the Neediest Neighbor button to select the neighboring county with the highest rate of poverty.</p>
<p>The dark blue counties on the map are areas where poverty rates are high.</p>
<p>The red counties are those that you have selected to be part of your Promise Zone. The summarized and detailed statistics for all of the Promise Zone counties are shown on the left. The enabled counties surrounding the Promise Zone are those that are eligible to be added.</p>
<h2>Data Sources</h2>
<ul>
<li><a href="https://brigades.opendatanetwork.com/dataset/layer_0/7m6b-dxmh">Promise Zone data set</a> which is a transformed dataset from the source <a href = "http://egis.hud.opendata.arcgis.com/datasets/a10cbd9187a34bd2a28574a3cfe12e64_0"> from Housing and Urban Development Department</a>
<li><a href="http://data.bls.gov/map/MapToolServlet?survey=la">Local Area Unemployment Rates</a> from the U.S. Bureau of Labor Statistics</li>
<li><a href="https://odn.data.socrata.com/dataset/US-Occupations/t8be-b2rm">Occupational and Census Data</a> from the Census 2013 American Community Survey (via Socrata)</li>
<li><a href="https://stuagano.cartodb.com/viz/423d15d0-2a8d-11e6-8898-0e5db1731f59/public_map">Geographical data</a> CartoDB</li>
</ul>
<p>We wrangled all this data into one GeoJSON file and converted that into <a href="https://github.com/mbostock/topojson/wiki/Command-Line-Reference">TopoJSON</a>, which is what this page reads in.</p>
<h2>Attributions</h2>
<ul>
<li>This page leverages all kinds of help from Mike Bostock, the Godfather of D3.js, who has code samples for everything. For example: <a href="http://bl.ocks.org/mbostock/2374239">Zoomable Geography</a>, <a href="https://bl.ocks.org/mbostock/eec4a6cda2f573574a11">Map & Pan</a>, and <a href="https://bl.ocks.org/mbostock/1345853">Transform Transitions</a>.</li>
<li>Other sources: <a href="http://bl.ocks.org/linssen/7352810">Smooth Zooming</a>, <a href="http://stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmatically-in-d3">Invoke click event programmatically in D3.js</a>, <a href="http://stackoverflow.com/questions/8648892/convert-url-parameters-to-a-javascript-object">Convert URL parameters to JS script object</a></li>
</ul>
</div>