-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
204 lines (184 loc) · 12.6 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
<!DOCTYPE html>
<html>
<title>Angelica Kim Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="images/self.JPG" style="width:70%;" class="w3-round"><br><br>
<h4><b>Angelica Kim</b></h4>
<p class="w3-text-grey">PORTFOLIO</p>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal"><i class="fa fa-th-large fa-fw w3-margin-right"></i>GALLERY</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i>ABOUT</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>CONTACT</a>
</div>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<header id="portfolio">
<a href="#"><img src="/w3images/avatar_g2.jpg" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-container">
<h1><b>Selected Works Gallery</b></h1>
<hr class="hr">
</div>
</header>
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/IllegalEvictions.png" alt="IllegalEvictions" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://angelicakim28.github.io/PhillyRentals/rentals3.html';">
<div class="w3-container w3-white">
<p><b>Illegal Rentals in Philadelphia</b></p>
<p>Illegal rentals lead to illegal evictions, which contribute to homelessness. This machine learning algorithm predicts the likelihood of illegal rentals in Philadelphia, so the city can more efficiently allocate their limited resources for housing inspections. Other cities faced with the same challenge can refer to this <a href="https://angelicakim28.github.io/PhillyRentals/MarkdownFinalDraft.html">Markdown</a> document to replicate the code and adjust to their needs.<br><b>Software used:</b> R, ArcGIS, JavaScript, HTML, CSS</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<IMG SRC="images/taxi_pickups2.gif" style="width:50%" class="w3-hover-opacity" onclick="location.href = 'https://angelicakim28.github.io/NYCPicks/nycpicks.html';"><IMG SRC="images/uber_pickups2.gif" style="width:50%" class="w3-hover-opacity" onclick="location.href = 'https://angelicakim28.github.io/NYCPicks/nycpicks.html';">
<div class="w3-container w3-white">
<p><b>NYC Picks: Taxi vs Uber</b></p>
<p>Increased usage of rideshare apps in recent years has raised discussion on their competition against the taxicab industry. This analysis compares and contrasts the popularity of Taxi and Uber in 2014 in terms of passenger pickups. It further studies the implications of the patterns in the data, based on monthly, hourly and geospatial trends.<br><a href="link_files/NYCPicks.html;">Jupyter Notebook Code</a></br><br><b>Software used:</b> Python, HTML</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/evictions.jpg" alt="EvictionsViolations" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'link_files/EvictionsViolations.html';">
<div class="w3-container w3-white">
<p><b>Spatial Trends of Evictions</b></p>
<p>Study of spatial correlations between eviction cases and code violations in Philadelphia, with the intention to offer some insight into the idea that evictions occur as a retaliation against renters for reporting code violations<br><b>Software used:</b> Python (Libraries: (geo)pandas, numpy, matplotlib, cartopy.crs, hvplot, holoviews, carto.sql, seaborn, altair)</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/SanFrancisco.png" alt="SanFrancisco" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://angelicakim28.github.io/cpln692-Midterm/HyoSungKim-SanFranciscoMap/story.html';">
<div class="w3-container w3-white">
<p><b>Exploring San Francisco</b></p>
<p>Story map application of San Francisco's neighborhoods, Michelin Star restaurants and Privately-Owned-Public-Spaces (POPOS). Thorough application of coding functions, requesting ajax calls, styling web pages and incorporating user interactivity. Visual representations of processed json datasets displayed on a series of slides primarily using the Leaflet library.<br><b>Software used:</b> HTML, CSS, JavaScript</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/Nashville.png" alt="Nashville" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'link_files/NashvilleHomePrices.html';">
<div class="w3-container w3-white">
<p><b>Nashville Home Price Predictions</b></p>
<p>Predictive model of home price predictions in Nashville using data from Zillow, intended to help planners appropriately accommodate the growing population with affordable home prices. Used Mean Absolute Error (MAE) and Mean Absolute Percentage Error (MAPE) diagnostics for cross-validated training and in-sample tests.<br><b>Software used:</b> R</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/urbangrowth.png" alt="urbangrowth" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://github.com/angelicakim28/angelicakim28.github.io/blob/master/pdf_files/UrbanGrowthDevelopmentSuitability.pdf';">
<div class="w3-container w3-white">
<p><b>Urban Growth vs Development Suitability</b></p>
<p>Evaluation of threat and opportunity areas with respect to future urbanization - where are areas “sensitive” to development but where development may be infringing upon in the coming years?; where are areas not environmentally sensitive to development where development will likely be encouraged in future years?<br><b>Software used:</b> ESRI ArcGIS</p>
</div>
</div>
</div>
<!-- Third Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container">
<img src="images/Seattle.png" alt="Seattle" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'link_files/SeattleParking.html';">
<div class="w3-container w3-white">
<p><b>Seattle Street Parking Demand</b></p>
<p>Predictive model of street parking demand in Seattle, with the intent to help planners understand how planning decisions - such as a neighborhood zoning code change - affect street parking demand in the city. Study of observed and predicted spatial and temporal demands for street parking.<br><b>Software used:</b> R, ESRI ArcGIS</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="images/willingnesstopay.png" alt="willingnesstopay" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://github.com/angelicakim28/angelicakim28.github.io/blob/master/pdf_files/HedonicRegressionTransitInPhiladelphia.pdf';">
<div class="w3-container w3-white">
<p><b>Willingness to Pay for Transit</b></p>
<p>Study of home prices in relation to Transit Oriented Development (TOD) in Philadelphia. A "kitchen-sink" model tries to identify the transit price premium by controlling for neighborhood factors and the second part develops a quasi-experimental design attempts to better identify the willingness to pay.<br><b>Software used:</b> R</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/remotesensing.jpg" alt="remotesensing" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://github.com/angelicakim28/angelicakim28.github.io/blob/master/pdf_files/RemoteSensingLandUseEfficiency.pdf';">
<div class="w3-container w3-white">
<p><b>Remote Sensing & Land Use Efficiency</b></p>
<p>Study of how the city of Sao Paulo, Brazil has sprawled over time relative to its population growth. LANDSAT imagery used to create a normalized difference vegetation index (NDVI) and supervised classification further implemented to classify land cover types. Change over time calculated using a land use efficiency ratio.<br><b>Software used:</b> ESRI ArcGIS</p>
</div>
</div>
</div>
<!-- Fourth Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="images/wildfires.png" alt="wildfires" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'https://code.earthengine.google.com/8f002ec51c0265c69e6142c681cd61c2';">
<div class="w3-container w3-white">
<p><b>California Wildfires Risk Zone Analysis</b></p>
<p>Processed satellite imagery of annual wildfires in California. Using geographic features like vegetation, drought, humidity, elevation and wind speeds, sensitivity and risk maps were created, which serves to suggest first responders the areas of greater priority in the event of a wildfire.<br><b>Software used:</b> JavaScript, Google Earth Engine</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="images/shootings.png" alt="shootings" style="width:100%" class="w3-hover-opacity" onclick="location.href = 'link_files/ShootingsData.html';">
<div class="w3-container w3-white">
<p><b>Shootings in Philadelphia</b></p>
<p>Data manipulation using shootings data in Philadelphia. Creation of static and interactive visualizations to explore the distribution and trends from the dataset.<br><b>Software used:</b> Python ((Geo)Pandas, Numpy, Matplotlib, Seaborn, Json, Altair) </p>
</div>
</div>
</div>
<!-- About Me -->
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About Me</b></h4>
<br>
<h5><b>Education</b></h5>
<p><b>University of Pennsylvania</b> | May 2019<br>
<BLOCKQUOTE>M.S. Urban Spatial Analytics</BLOCKQUOTE></p>
<p><b>University of California, Berkeley</b> | May 2018<br>
<BLOCKQUOTE>B.A. Sustainable Environmental Design<br>
Minor Geospatial Information Science and Technology</BLOCKQUOTE></p>
<hr>
<h5><b>Technical Skills</b></h5>
<!-- Progress bars / Skills -->
<p>Programming</p>
<ul>
<li>Python, SQL, JavaScript, R, HTML, CSS, jQuery</li>
</ul>
<p>Libraries</p>
<ul>
<li>(Geo)Pandas, NumPy, CartoPy, Hvplot, Carto.sql, Matplotlib, Altair, Seaborn, Json, Leaflet</li>
</ul>
<p>Cartography</p>
<ul>
<li>ESRI ArcGIS, QGIS, CARTO, Social Explorer, Google Earth Engine</li>
</ul>
<p>Design</p>
<ul>
<li>Adobe Photoshop, Adobe InDesign, Adobe Illustrator, SketchUp, Drupal</li>
</ul>
<p>Languages</p>
<ul>
<li>Native speaker of Portuguese and Korean</li>
</ul>
<hr>
<!-- Contact Section -->
<div class="w3-container w3-padding-large w3-grey">
<h4 id="contact"><b>Contact Me</b></h4>
<div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
<div class="w3-third w3-dark-grey" style="margin:0 50px">
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>[email protected]</p>
</div>
<div class="w3-third w3-teal" style="margin:0 50px">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>San Jose, CA <br> </p>
</div>
</div>
<hr class="w3-opacity">
</div>
<!-- End page content -->
</div>
<script src="portfolio.js"></script>
</body>
</html>