forked from martinburch/RichBlocksPoorBlocks_TEST
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (156 loc) · 9.35 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Income and rent maps of every neighborhood in the U.S. See what poverty and apartments are like in cities like New York, Los Angeles, Chicago, Philadelphia, San Francisco, Miami, and more.">
<link rel="image_src" href="./images/us_income_map.PNG" />
<title>Rich Blocks, Poor Blocks | Neighborhood income and rent maps of U.S. cities</title>
<link href="./css/style.css?v=2.0" rel="stylesheet"> <!-- CSS Stylesheet -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps API -->
<script type="text/javascript" src="./js/accounting.min.js"></script> <!-- Formats Floats into money-numbers -->
<script type="text/javascript" src="./js/main.js?v=2.0.3"></script> <!-- The main script for the site -->
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36887508-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- /Google Analytics -->
</head>
<body>
<!-- Facebook -->
<script>
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));
</script>
<div id="fb-root"></div>
<!-- /Facebook -->
<!-- ABOVE MAP -->
<div id="above-map">
<header id="hed-and-dek">
<h1>Rich Blocks, Poor Blocks</h1>
<h2>A map of income and rent in every neighborhood in every city in America</h2>
</header>
<div id="address-form-container">
<span id="form-pretext"> Enter a city name or address and pick a state -- or just a pick a state from the dropdown.</span>
(<input type="checkbox" name="colorblind" value="colorblind"><span id="colorblind">I'm colorblind</span>)<br>
<input id="address" type="text">,
<select id="state-select">
<option value="default">PICK A STATE</option>
</select>,
<select id="map-type-select">
<option value="default">PICK MAP TYPE</option>
</select>
<input id="button-search" type="button" value="Search" />
<input id="button-mapsize" type="button" value="Change Map Size" />
<br>
<span id="note">(NOTE: Loading taking long? Zoom in or out. No map? Reload, or choose another browser. <b>And if you want more economic details, click any part of the map after you click "Search."</b>)</span>
</div>
</div>
<!-- /ABOVE MAP -->
<!-- MAP -->
<div id="map-canvas"></div>
<!-- /MAP -->
<!-- BELOW MAP -->
<div id="below-map">
<p class="italics" id="source-note">
<b>Source on all data</b>: 2007-2011 <a href="http://www.census.gov/acs/www/" target="_blank" rel="nofollow">American Community Survey</a>. For more info, see the ACS' definitions for <a href="http://www.socialexplorer.com/pub/reportdata/DocBrowser.aspx?survey=ACS2011_5yr&sec=ae0bced1-c0ae-4888-97b2-5985363db54d&header=True#392eee26-6036-45c1-bb32-0137ed8a63b7" target="_blank" rel="nofollow">income</a> and <a href="http://www.socialexplorer.com/pub/reportdata/DocBrowser.aspx?survey=ACS2011_5yr&sec=ae0bced1-c0ae-4888-97b2-5985363db54d&header=True#efcf002e-5de3-4cac-8a40-2fe66974b07e" target="_blank">rent</a>. All map boundaries are <a href="http://www.census.gov/geo/www/cen_tract.html" target="_blank" rel="nofollow">Census Tracts</a>.
</p>
<ul id="social-media">
<li>
<!-- StumbledUpon -->
<!-- Place this tag where you want the su badge to render -->
<span id="stumbledupon">
<su:badge layout="2"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script></span>
</li>
<li>
<!-- LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="www.RichBlocksPoorBlocks.com" data-counter="right"></script>
</li>
<li>
<!-- Twitter -->
<span id="twitter-container"><span id="twitter-tweet"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.richblockspoorblocks.com" data-text="Want to see how much money your neighbors make and how much their rent is?" data-via="RichBlocksPoorB" data-hashtags="income,rent">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span>
<span id="twitter-follow"><a href="https://twitter.com/RichBlocksPoorB" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @RichBlocksPoorB</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span></span>
</li>
<li id="embed-wrap">
<!-- Custom embed -->
<input id="embed" type="button" value="Embed map on your site" />
<input id="embed-textbox" type="text" onClick="this.select();" />
</li>
<li>
<!-- Facebook -->
<div class="fb-like" data-href="http://www.richblockspoorblocks.com" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true" data-action="recommend"></div>
</li>
<li>
<!-- Google+ -->
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script>
</li>
<li>
<!-- Reddit -->
<span id="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script></span>
</li>
</ul>
<div id="clear"></div>
<div id="expandable-menu">
<hr class="big-hr">
<div class="expand-container">
<img class="click-expand shop-arrows" src="./images/glyphicons_200_download.png" />
<h2>More maps</h2>
<img class="click-expand shop-arrows" src="./images/glyphicons_200_download.png" />
<p id="shop-embed" class="hidden-element">
<iframe src="http://richblockspoorblocks.goodsie.com/embed?extkey=21f2b7ea-7a19-4dc1-a1bd-2134f9f6a386" width="940" height="627" style="border:none;"></iframe>
</p>
</div>
<hr class="big-hr">
<div class="expand-container">
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<h2>Custom maps</h2>
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<p id="custom-order-graf" class="hidden-element">
Do you want to purchase a tailor-made map of socioeconomic data? If so, send your order <a href="mailto:[email protected]">[email protected]</a>. Be sure to include specific information on what area(s) you want covered and what data you want displayed.
</p>
</div>
<hr class="big-hr">
<div class="expand-container">
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<h2>In the media</h2>
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<dl id="articles-list" class="hidden-element"></dl>
</div>
<hr class="big-hr">
<div class="expand-container">
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<h2>About/Credits</h2>
<img class="click-expand" src="./images/glyphicons_200_download.png" />
<p id="about-graf" class="hidden-element">
Website made by <a href="http://www.twitter.com/ChrisMPersaud" target="_blank" rel="nofollow">Chris Persaud</a>. If you have a question, complaint, or suggestion, please email <a href="mailto:[email protected]">[email protected]</a>. Think you can improve this site? Fork it on <a href="https://github.com/myprogprojects/RichBlocksPoorBlocks/tree/develop" target="_blank" rel="nofollow">GitHub</a>.
</p>
<p id="acknowledgements" class="hidden-element">
Big thanks to <a href="http://www.MartinBurch.com" target="_blank" rel="nofollow">Martin Burch</a> for making the "embed" button.
</p>
</div>
<hr class="big-hr">
</div>
</div>
<!-- /BELOW MAP -->
</body>
</html>