-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
250 lines (242 loc) · 16 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
250
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css" rel="stylesheet" />
<title>Project 2 Post-Mortem</title>
</head>
<body>
<div class="mt-44 container mx-auto">
<div class="grid justify-items-left grid-cols-1s grid-rows-1 ">
<div class="w-auto">
<div class="row-span-1 pl-2 pb-2">Lede Project 2 (Post-Mortem)</div>
<h1 class="font-serif text-6xl font-semibold tracking-wide text-gray-800"> The Cost of Sunlight</h1>
<div class="row-span-1 pt-10 pl-2 pb-2">
<h3> By: Ligea Alexander</h3>
</div>
</div>
<!-- <div class=" w-1/2 p-5 border-4 border-sky-500">02 lksdfnslkdfmklsdfm</div> -->
<!-- <div class="w-1/4 p-5 border-4 border-sky-500">03 indlkdsnfksld</div> -->
</div>
</div>
<!-- FIRST SECTION -->
<!-- <div class="container mx-auto border-4 border-purple-400"> </div> Boarders used to keep track of layout -->
<div class="container mx-auto">
<div class="flex flex-col ">
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-10 text-left">For project 2 we were
instructed to “stretch our skills
a little bit more”. For each project we're allowed only 2
weeks to complete. In these past 2 weeks we've learned scraping, ai2html, a little D3 on top of pandas,
Altair,
elements of visual design and storytelling.
Unfortunately, <strong>I was not able </strong>to turn my project around by the two week deadline. Though
I definitely did
improve
from the <a href="https://lei10003.github.io/cellar-defenders/"
class="text-blue-600 visited:text-purple-600">previous project</a>- which I completed in 3 days.
Despite being more prepared
I faced
several roadblocks. Ai2html wouldn't work, the svg I used as a base to work off from took a little
longer to
re-illustrate, and I forgot I didn't <i> actually</i> know CSS that would help bring the story to life
(for Project 1 I used
a
combination of borrowing from previous students and ChatGPT).
So instead, here's this painstaking review -a postmortem- of my process (including when I hit a wall) of
Project 2.
</p>
<h2 class="font-sans text-2xl font-medium pl-1 pt-10 text-slate-800"> The Idea
</div>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left">With only 2 weeks, determined not
to spend too much time in the data
collection phase but knowing I wanted to specifically put my scraping skills to the test, I resolved that
scraping data from Zillow would be challenging enough. The discussion about rent in NYC is a topic of
importance to me. But I wanted to do something a little different than what's been discussed ad nauseam
(include link about high rent in NYC). I thought about what's important to me when it comes to looking for a
place to live but is usually inaccessible or would put me in a rental bracket that's higher than I can
afford. Alas, sunlight. If you scroll through Facebook groups and craigslist posts for the apartment hopper,
posts almost always (though not always the case) start with “Bright”, “North-facing” (to imply gets a lot of
sunlight) or “Sunny”. </p>
<!-- <p class="pl-1 pt-2 text-base text-left"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<p class="float-right box-border w-1/4 p-4 pl-4 pt-10 border-2 border-rose-300"> Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptate id unde magni veniam.
Accusantium nesciunt, reiciendis saepe nostrum quasi iste cupiditate! Laborum, possimus. Provident
maxime iste
dolor
quis nemo deleniti.
</p> -->
<!-- Provident ea illo maiores voluptate ullam eos!
Veritatis, corrupti officia voluptates, voluptatibus officiis nihil possimus eaque deserunt amet, at soluta
libero veniam.
</p> -->
</div>
<!-- SECOND SECTION -->
<!-- <div class="container mx-auto border-4 border-sky-500"> -->
<div class="container mx-auto ">
<div class="flex flex-row">
<h2 class="pl-1 pt-10 font-sans text-2xl font-medium text-slate-800"> Getting the Data and Narrowing the
Scope
</div>
<div class="grid grid-cols-2 gap-10">
<div>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left">With a rough idea in
mind, I took to researching how exactly
one could calculate or guesstimate how much sunlight an apartment would get. To my luck, the real
estate company <a
href="https://www.localize.city/blog/sun-drenched-or-sun-starved-now-you-can-know-how-much-light-a-building-gets/"
class="text-blue-600 visited:text-purple-600">Localize.city</a> had just what I needed. Data
scientists working with the company just
as aware of the value of apartment sun exposure as I was, using a combination of GIS, 3D analysis and a
python library called <a href="https://pysolar.readthedocs.io/en/latest/"
class="text-blue-600 visited:text-purple-600">PySolar</a> developed an algorithm which allows them to advertise the degree of
sun exposure apartments
listed on their website get. </p>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left"> I attended mentorship
with Kai Teoh with what I'd found, with
the intention to scrape Localize.city's webpage. However, the site has rate blocking which quickly
detects if someone (like a student practicing scraping) is scraping their website. Kai had a
solution. He gave me an introduction to accessing undocumented api's using cUrl and sent me off to
test it. While I was a little disappointed that I would not get to put my new scraping skills to use
I was relieved I could rely on my API skills gained 2 weeks prior and get ahead in my data
processing.</p>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left">But I was unsuccessful
and after a second check-in with Kai, we
realized we definitely could not make calls to the api. Instead I would have to copy the XHR api
feed for each search result page into a text file (I used Sublime) and save it as a json.</p>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left">With only 1 ½ week left
and determined not to relive Project
1's experience, I started cutting, no, slashing the fat.</p>
<ul class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left list-disc">
<li>Instead of all of NYC -> Brookyln</li>
<li>Instead of all of Brooklyn -> Prospect Park (an area quadrangled by contrasting wealth groups).
</li>
<li>Instead of all apartment types -> only those of a certain size</li>
</ul>
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left">The resulting 13 pages
weren't ideal but were hopefully enough
to tell a story or delivery insights
about the relationship between sun exposure and rental prices.</p>
</div>
<div>
<img class="pt-20 w-auto md:w-32 lg:w-auto" src="data_collection_process.gif" alt="">
</div>
</div>
</div>
<!-- THIRD SECTION -->
<!-- <div class="container mx-auto border-4 border-purple-600"></div> -->
<div class="container h-96 mb-20 mx-auto">
<div class="flex">
<h2 class="flex-initial w-64 pl-1 pt-10 font-sans text-2xl font-medium text-slate-800"> Analysis </h2>
</div>
<div class="container mx-auto">
<div class="flex flex-col ">
<p class="font-sans font-normal leading-relaxed text-base pl-1 pt-2 text-left"> Lorem ipsum dolor sit
amet consectetur, adipisicing elit. Vitae dolore, quas veritatis error nesciunt consectetur
temporibus reiciendis repudiandae debitis incidunt rerum corporis, atque ab fugiat voluptate odit
culpa ipsa et!</p>
</div>
</div>
<div class="container mx-auto ">
<div class="grid justify-items-center grid-cols-1s grid-rows-1">
<div id="controls-carousel" class="pt-20 h-fit relative w-3/4" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative overflow-hidden rounded-lg md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item="active">
<img src="carbon_boxplot.png"
class="p-20 absolute block h-auto w-3/4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="boxplot_sunlight.svg"
class="p-20 absolute block h-auto w-3/4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="carbon_by_zipcode.svg"
class="p-20 absolute block h-auto w-3/4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="dotplot_zipcode.svg"
class="p-20 absolute block h-auto w-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="carbon_sun_floor.svg"
class="p-20 absolute block h-auto w-3/4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
<!-- Item 6 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="sun_exposure_floor.svg"
class="p-20 absolute block h-auto w-3/4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
<button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"
data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"
data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"
data-carousel-slide-to="2"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"
data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5"
data-carousel-slide-to="4"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 6"
data-carousel-slide-to="4"></button>
</div>
<!-- Slider controls -->
<button type="button"
class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
data-carousel-prev>
<span
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button"
class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
data-carousel-next>
<span
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
<div class="container mx-auto">
<div class="flex flex-row pt-10"></div>
</div>
</div>
</div>
</div>
<div class="container pt-80 mx-auto">
<div class="grid justify-items-center grid-cols-1s grid-rows-1 ">
<a href="https://github.com/lei10003/the-cost-of-sunlight"><img class="h-24 max-w-full"
src="github-mark.png" alt="link to github repo"></a>
</div>
</div>
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
<script type="text/javascript" src="../node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"></script>
</body>
</html>