-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (107 loc) · 5.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Rent Poverty in East Boston</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/EastBoston_styles.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Custom Fonts -->
<style>
@font-face {
font-family: "GrifoL-Bold";
src: url(https://web.northeastern.edu/visualizingeastie/fonts/Grifo-L-Bold.otf);
}
body {font-family: "GrifoL-Bold","Georgia",serif}
@font-face {
font-family: "BentonSansCond-Bold";
src: url(https://web.northeastern.edu/visualizingeastie/fonts/BentonSansCond-Bold.otf);
}
body {font-family: "BentonSansCond-Bold","Helvetica",sans-serif}
</style>
<!-- Hamburger menu
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav role="navigation" class="EastBoston_nav" >
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
-->
<span></span>
<span></span>
<span></span>
<ul id="menu" >
<a href="https://web.northeastern.edu/visualizingeastie" ><li style="font-size: 3rem; line-height: 3rem">All stories</li></a>
<a href="https://web.northeastern.edu/visualizingeastie/the-people" ><li style="font-size: 3rem; line-height: 3rem">The people</li></a>
<a href="https://web.northeastern.edu/visualizingeastie/the-environment "><li style="font-size: 3rem; line-height: 3rem">The environment</li></a>
<a href="https://web.northeastern.edu/visualizingeastie/the-built-city"><li style="font-size: 3rem; line-height: 3rem">The built city</li></a>
<a href="https://web.northeastern.edu/visualizingeastie/the-institutions"><li style="font-size: 3rem; line-height: 3rem">The institutions</li></a>
</ul>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="column EastBoston">
<h1 class="EastBoston_head">Can East Boston residents afford their rent?</h1>
<h5 class="EastBoston_byline">By DAN SPECTOR, Northeastern University</h5>
<p>East Boston is a gentrifying neighborhood bordering Logan Airport.
Recent years have seen marked increases in rent prices, as residents priced out of downtown seek more affordable housing.
This has caused much disruption in what has traditionally been a low-income, immigrant community.
</p>
<h2 class="EastBoston_head">Rent Poverty in East Boston</h2>
<p style="color: #e45525; font-weight: bold;">Those who allocate more than 30 percent of their monthly household income to pay for housing are said to be living in rent poverty.</p>
<!-- <p>KEY Average rent for a <strong><span style="color:green">one-bedroom</span> </strong>and three-bedroom home Rent poverty line (30% of monthly household income)</p> -->
</div>
<div class="row svg_container" id="resize">
</div>
<br>
<br>
<h2 class="EastBoston_head">How Far Does a Salary Go?</h2>
<div class="EastBoston">
<p>The following map displays <span class="onebedroom">one bedroom</span> and
<span class="threebedroom">three bedroom</span> apartments. Select an annual salary to see which apartments
remain affordable according to the rent poverty rule. This data is from the year 2017.
</p>
</div>
<div class="row map_container" id="resize">
</div>
<br>
<br>
<div class="EastBoston">
<p>Data sourced from <a href="https://www.jefftk.com/apartment_prices/data-listing">Jeff Kaufman</a>, who scraped from PadMapper.</p>
</div>
</div>
</div>
<h6 class="EastBoston_footer"><span class="EastBoston_footer">Visualizing Eastie</span> is a project of the <a href="https://www.northeastern.edu/visualization/">Information Design and Visualization program</a> at Northeastern University. © 2018</h6>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider@0.2.0/build/d3-simple-slider.js"></script>
<script src="js/neighborhoods.js"></script>
<script src="js/main.js"></script>
<script src="js/map.js"></script>
</body>
</html>