-
Notifications
You must be signed in to change notification settings - Fork 66
/
index2.html
183 lines (179 loc) · 13 KB
/
index2.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
<!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 id="narrative-row" class="row">
<div class="col-md-12">
<!-- <div class="row"> -->
<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>
<div class="posrel">
<div id="nav-panel" class="posabs">
<ul class="nav nav-pills nav-stacked neighborhood-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>School data</h4>
<ul class="nav nav-pills nav-stacked school-type-menu">
<li><a id="public" href="#">DC Public Schools</a></li>
<li><a id="charter" href="#">DC Public Charter Schools</a></li>
</ul>
<h4>Neighborhood data</h4>
<ul class="nav nav-pills nav-stacked neighborhood-menu">
<li class="nav-header disabled"><a>Neighborhood Demographics</a></li>
<li><a id="population_total_val" href="#">Total Population</a></li>
<li><a id="population_under_18_val" href="#">Children (Under 18)</a></li>
<li><a id="population_under_5_val" href="#">Young Child Population (Under 5)</a></li>
<li><a id="total_neighborhood_poverty_perc" href="#">Neighborhood Poverty Rate</a></li>
<li><a id="children_in_poverty_perc" href="#">Percentage of Children in Poverty</a></li>
<li><a id="single_mother_families_perc" href="#">Percentage of Children in Single Mother Families</a></li>
<li><a id="youth_ready_to_work_perc" href="#">Youth Employment Rate (Ages 16 to 24)</a><li>
<li class="nav-header disabled"><a>Child Health & Wellbeing</a></li>
<li><a id="medicaid_enroll_val" href="#">Children Enrolled in Medicaid</a></li>
<li><a id="prev_med_visit_val" href="#">Preventative Medical Visits by Children Enrolled in Medicaid</a></li>
<li><a id="dental_visit_val" href="#">Dental Visits by Children Enrolled in Medicaid</a></li>
<li><a id="fs_client_2012_val" href="#">Number of SNAP Recipients (Children & Adults)</a></li>
<li class="nav-header disabled"><a>Child Success</a></li>
<li><a id="math_perc" href="#">Percentage of Students Meeting or Exceeding Expectations on PARCC (Math)</a></li>
<li><a id="reading_perc" href="#">Percentage of Students Meeting or Exceeding Expectations on PARCC (Reading)</a></li>
<li class="nav-header disabled"><a>Child Care</a></li>
<li><a id="cc_cap_val" href="#">Infant/Toddler Child Care Capacity</a></li>
<li><a id="cc_pop_ratio" href="#">Ratio of Infant/Toddler Child Care Capacity to Under 3 Population</a></li>
<li><a id="cc_child_pov_ratio" href="#">Ratio of Infant/Toddler Child Care Capacity to Under 5 Poverty</a></li>
<!-- <li><a id="cc_sub_13_cur" href="#">Infant/Toddler Child Care Subsidies</a></li> -->
<li class="nav-header disabled"><a>Neighborhood Assets</a></li>
<li><a id="homeownership_perc" href="#">Percentage of Housing Units Owner Occupied</a></li>
<li><a id="vacants_val" href="#">Number of Properties Vacant</a></li>
<li><a id="libraries_val" href="#">Number of Public Libraries</a></li>
<li><a id="grocery_val" href="#">Number of Grocery Stores</a></li>
<li><a id="rec_val" href="#">Number of Recreation Centers</a></li>
<!-- <li><a id="metro_val" href="#">Number of WMATA Rail Stations</a></li> -->
<li><a id="bus_stops_val" href="#">Number of WMATA Bus Stops</a></li>
<li class="nav-header disabled"><a>Neighborhood Violent Crime</a></li>
<li><a id="total_crime_val" href="#">Total Violent Crime Count</a></li>
<li><a id="total_crime_pc_ratio" href="#">Total Violent Crime per 1,000 Residents</a></li>
<li><a id="homicide_val" href="#">Total Homicide Count</a></li>
<li><a id="homicide_pc_ratio" href="#">Homicides per 1,000 Residents</a></li>
<li><a id="assault_val" href="#">Total Assault with Deadly Weapon Count</a></li>
<li><a id="assault_pc_ratio" href="#">Assault with Deadly Weapon per 1,000 Residents</a></li>
<li><a id="robbery_val" href="#">Total Robbery Count</a></li>
<li><a id="robbery_pc_ratio" href="#">Robbery per 1,000 Residents</a></li>
<li><a id="sex_abuse_val" href="#">Total Sex Abuse Count</a></li>
<li><a id="sex_abuse_pc_ratio" href="#">Sex Abuse per 1,000 Residents</a></li>
</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 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>
</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">647,484</td>
</tr>
<tr data-type="population_under_18_val">
<td>Population (under 18)</td>
<td class="count align-right">110,588</td>
</tr>
<tr data-type="single_mother_families_perc">
<td>Children in Single Mother Families</td>
<td class="count align-right">42%</td>
</tr>
<tr data-type="children_in_poverty_perc">
<td>Children in poverty</td>
<td class="count align-right">27%</td>
</tr>
</table>
<h4 class="chart">Demographic Breakdown</h4>
<div class="chart"></div>
</div>
</div> <!-- narrative cards here -->
</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>
</body>
</html>