forked from DCActionforChildren/dcaction
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (244 loc) · 16.1 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
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Data Tools 2.0 | DC Action for Children</title>
<link href='//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="navbar navbar-default">
<div class="col-lg-12 col-sm-12 test">
<a class="navbar-brand" href="http://www.dcactionforchildren.org/"><img src="assets/kidscount.jpg" alt="DC Action for Children Kids Count initiative"></a>
<button class="btn btn-danger pull-right hidden-xs" data-toggle="modal" data-target="#myModal">
How to use Data Tools 2.0
</button>
<h1 style="font-size: 30px !important">Where resources and well-being vary in DC</h1>
<p class="intro" style="font-size:1em !important;">DC Action for Children designed the interactive maps to bring to life our data on the well-being of children and families, neighborhood by neighborhood. The indicators and measures reflect DC KIDS COUNT’s neighborhood-centered analytical frame. Nearly all DC KIDS COUNT indicators and measures are calculated at the neighborhood level, which allows us to evaluate the assets and needs of neighborhoods where DC’s children live, play and learn. We invite you to use them to learn what you want to know about the health, safety and future success of children, families and neighborhoods in DC.</p>
<div class="social-media pull-right">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="See how children fare in your neighborhood with Data Tools 2.0" data-via="ActforDChildren">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdatatools.dcactionforchildren.org&width=85&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>
</div>
<button class="btn btn-danger pull-right visible-xs" data-toggle="modal" data-target="#myModal">
How to use Data Tools 2.0
</button>
<!--<h4><strong>Four key policy insights from DC Action for Children are:</strong></h4>-->
</div>
</div>
<!--<div id="narrative-row" class="row">
<div class="col-md-12">
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<button data-filter="children_in_poverty_perc" type="button" class="btn btn-default btn-block one" data-rel="one">
<img class="hidden-xs" src="assets/button-poverty.jpg"/>
<h4>Children in Poverty</h4>
<span class="subhead visible-sm">Among 25% of the poorest neighborhoods, more than 1 in 2 children live in poverty.</span>
</button>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<button data-filter="single_mother_families_perc" type="button" class="btn btn-default btn-block two" data-rel="two">
<img class="hidden-xs" src="assets/button-singlemother.jpg"/>
<h4>Children in Single Mother Families</h4>
<span class="subhead visible-sm">Approximately 48% (almost 1 in 2) DC children live in families headed by single mothers.</span>
</button>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<button data-filter="reading_perc" type="button" class="btn btn-default btn-block three" data-rel="three">
<img class="hidden-xs" src="assets/button-reading.jpg"/>
<h4>Students Proficient in Reading</h4>
<span class="subhead visible-sm">40% of DC neighborhoods have less than half of their students scoring proficient in reading.</span>
</button>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<button data-filter="math_perc" type="button" class="btn btn-default btn-block four" data-rel="four">
<img class="hidden-xs" src="assets/button-math.jpg"/>
<h4>Students Proficient in Math</h4>
<span class="subhead visible-sm">Half of all DC neighborhoods have less than 55% of their students proficient in math.</span>
</button>
</div>
</div>
</div>-->
<div class="posrel" style="width: 100%; overflow-x: hidden;">
<div id="nav-panel" class="posabs">
<ul class="nav nav-pills nav-stacked layer-toggle-menu">
<li><a id="no_neighborhood_data" href="#"><button type="button" class="btn btn-danger btn-sm" style="width:100%"><span class="glyphicon glyphicon-trash"></span> Clear selection</button></a></li>
</ul>
<h4 class="hidden-xs">School data</h4>
<ul class="nav nav-pills nav-stacked schools-menu points-menu hidden-xs"></ul>
<h4 class="hidden-xs">Points of interest</h4>
<ul class="nav nav-pills nav-stacked poi-menu points-menu hidden-xs"></ul>
<h4>Neighborhood data</h4>
<ul class="nav nav-pills nav-stacked layer-toggle-menu neighborhood-menu"></ul>
</div><!--/#nav-panel -->
<div id="narrative" class="panel panel-default">
<a class="close-box" href="#"><img src="assets/close.png" /></a>
<div id="one" class="panel-body">
<h4 class="lead">Percentage of Children in Poverty</h4>
<p>The overall percentage of children in poverty in DC is approximately 30%, which equals about 30,000 children. Poverty is also concentrated in certain neighborhoods: Approximately 25% of the poorest neighborhoods have more than 1 in 2 children in poverty and 60% of all DC children who live in poverty. More than 35% of all DC children in poverty live in four neighborhoods: (1) Congress Heights, Bellevue, Washington Highlands; (2) Douglas, Shipley Terrace;(3) Columbia Heights, Mt. Pleasant, Pleasant Plains, Park View; and (4) Deanwood, Burrville, Grant Park, Lincoln Heights, Fairmont Heights. Many of these high poverty neighborhoods are overwhelmingly (more than 90%) black.</p>
</div>
<div id="two" class="panel-body">
<h4 class="lead">Percentage of Children in Single Mother Families</h4>
<p>Approximately 48% (almost 1 in 2) DC children live in families headed by single mothers. Approximately 30% of DC neighborhoods have more than 2 in 3 children living in households headed by single mothers and account for more than half of all children living in single mother households. Six Clusters with the highest number and more than 3 in 4 children living in single mother headed households are: Mayfair, Hillbrook, Mahaning Heights (92%), Historic Anacostia (86%), Douglas, Shipley Terrace (83%), Woodland/Fort Stanton, Garfield Heights, Knox Hill (81%), Congress Heights, Bellevue, Washington Highlands (80%), and Sheridan, Barry Farm, Buena Vista (78%).</p>
</div>
<div id="three" class="panel-body">
<h4 class="lead">Percentage of Students Proficient in Reading</h4>
<p>The 2013 DC CAS results in reading for neighborhoods by student’s residence indicates that 40% of DC neighborhoods have less than half of their students scoring proficient in reading. Half of all DC neighborhoods have less than 53% of their students proficient in reading. The highest performing three neighborhoods, which are clustered in Northwest DC, have 90% or more of their students proficient in reading. Friendship Heights, American University Park, Tenleytown neighborhood in NW DC has 94% of its students scoring proficient in reading while Historic Anacostia neighborhood in SE DC has 35% of its students scoring proficient in reading.</p>
<p>Additionally, a simplistic correlational analysis revealed that on average the higher the child poverty rate in the neighborhood, the lower the percentage of students proficient in reading. The median poverty rate was 52% for the ten neighborhoods with the lowest percentage of students proficient in reading in DC.</p>
</div>
<div id="four" class="panel-body">
<h4 class="lead">Percentage of Students Proficient in Math</h4>
<p>The 2013 DC CAS results in math for neighborhoods by student’s residence indicates that in 1 of 3 DC neighborhoods, less than half of the students are proficient in math. Overall, half of all DC neighborhoods have less than 55% of their students proficient in math. The highest performing four neighborhoods, which are clustered in Northwest DC have 90% or more of their students scoring proficient in Math. Friendship Heights, American University Park, Tenleytown neighborhood in NW DC has 94% of its students scoring proficient in math while Historic Anacostia neighborhood in SE DC has 40% of its students scoring proficient in math.</p>
<p>Additionally, a simplistic correlational analysis revealed that on average the higher the child poverty rate in the neighborhood, the lower the percentage of proficient students in math. The median poverty rate was 52% for the ten neighborhoods with the lowest percentage of students proficient in math in DC.</p>
</div>
</div> <!-- narrative cards here -->
<div id="main-container" class="posabs" style="position:relative;">
<div class="menu-toggle posabs btn-danger">
<strong class="closed">Choose a dataset</strong>
<strong class="open">Hide menu</strong>
</div>
<div id="content-wrapper" class="col-lg-12 col-md-12 col-sm-12">
<div id="content"></div> <!-- d3 viz written in here -->
<div class="panel panel-default" id="legend-panel">
<div id="legend-container" class="panel-body">
</div>
</div>
<div id="source">
<h3 id="sources" class="panel-title">Sources</h3>
<a id="source-title"></a>
</div>
<div id="zoom-toggle">
<input id="zoom-box" type="checkbox" checked></input> <label for="zoom-box">Enable Zoom</label>
</div>
</div>
</div><!-- /#main-container -->
<div id="details" class="panel panel-default">
<div class="panel-body">
<p class="lead">
<span id="visualized-metric">Total population</span><br />
<span id="visualized-measure">605,759</span>
</p>
<h4 class="neighborhood">Washington, DC</h4>
<table id="pop-info" class="table table-hover">
<tr data-type="population_total_val">
<td>Population (total)</td>
<td class="count align-right"></td>
</tr>
<tr data-type="population_under_18_val">
<td>Population (under 18)</td>
<td class="count align-right"></td>
</tr>
<tr data-type="single_mother_families_perc">
<td>Single mother families</td>
<td class="count align-right"></td>
</tr>
<tr data-type="children_in_poverty_perc">
<td>Children in poverty</td>
<td class="count align-right"></td>
</tr>
</table>
<h4 class="chart">Demographic Breakdown</h4>
<div class="chart"></div>
</div>
</div> <!-- narrative cards here -->
<div id="schools_panel" class="panel panel-default hide">
<button class="btn-danger btn-xs btn-panel-close" id="btnPanelClose">X Close</button>
<div class="panel-body">
<div class="hide" id="school_data">
<h4 class="school-name"></h4>
<table class="table table-hover">
<tbody>
<tr>
<td>Enrollment</td>
<td class="school-enrollment">getDisplayValue(school.enroll_val, 'enroll_val')</td>
</tr>
<tr>
<td>TANF/SNAP eligible</td>
<td class="school-tanfsnap">getDisplayValue(school.tanfsnap_perc, 'tanfsnap_perc')</td>
</tr>
<tr>
<td>In-Seat attendance</td>
<td class="school-attendance">getDisplayValue(school.isa_perc, 'isa_perc')</td>
</tr>
<tr>
<td>Percent proficient at math</td>
<td class="school-math">getDisplayValue(school.math_perc, 'math_perc')</td>
</tr>
<tr>
<td>Percent proficient at reading</td>
<td class="school-reading">getDisplayValue(school.reading_perc, 'reading_perc')</td>
</tr>
<tr>
<td>Graduation rate</td>
<td class="school-grad">getDisplayValue(school.grad_perc, 'grad_perc')</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="footer" style="position:relative;top:10px;">
<small class="col-md-10 col-lg-10 col-sm-10 col-md-offset-1 col-lg-offset-1 col-sm-offset-1" style="text-align:center;clear:both;">
<a href="http://www.dcactionforchildren.org/dc-kids-count-data-tools-acknowledgements">Credits & acknowledgements</a> | <a href="http://www.dcactionforchildren.org/dc-kids-count-data-tools-methodology" target="_blank">Data & Methodology</a> | <a href="http://www.dcactionforchildren.org/dc-kids-count-data-tools" target="_blank">Revisit version 2012</a>
</small>
<div class="clearfix"></div>
<div style="text-align:center;margin:20px 0;clear:both;"><iframe src="http://ghbtns.com/github-btn.html?user=DCActionforChildren&repo=dcaction&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">How to use Data Tools 2.0</h2>
</div>
<div id="how-to" class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="one" style="position:relative;">
<h3>Click menu, select data layer</h3>
</div>
</div>
<div class="col-lg-12">
<div class="two" style="position:relative;">
<h3>Select school points for data</h3>
</div>
</div>
<div class="col-lg-12">
<div class="three" style="position:relative;">
<h3>Click neighborhood to freeze data</h3>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Libraries needed -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="js/d3.geo.projection.v0.min.js" type="text/javascript"></script>
<script src="js/topojson.v1.min.js" type="text/javascript"></script>
<script src="js/queue.v1.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/underscore-min.js" type="text/javascript"></script>
<script src="js/simple_statistics.js" type="text/javascript"></script>
<script src="js/labeler.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<!-- Project scripts -->
<script src="js/circle_packer_movers.js" type="text/javascript"></script>
<script src="js/visualization.js" type="text/javascript"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51240527-1', 'dcactionforchildren.org');
ga('send', 'pageview');
</script>
</body>
</html>