-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
307 lines (282 loc) · 14.9 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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>Devin Bartley Map Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<style>
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
background: whitesmoke;
font-family: 'Ubuntu', sans-serif;
}
header {
width: 100%;
min-width: 800px;
margin: 0 auto;
background: #c0dfd9;
padding: 15px 0 20px;
-webkit-animation: fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
footer {
width: 100%;
min-width: 800px;
margin: 0 auto;
background: #c0dfd9;
padding: 10px 0 10px;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #375671;
width: 80%;
margin: 0 auto;
color: #312c32;
}
h2 {
font-family: 'Ubuntu', sans-serif;
color: #375671;
width: 80%;
margin: 0 auto;
color: #312c32;
}
h3 {
font-family: 'Ubuntu', sans-serif;
color: #312c32
}
f1 {
font-family: 'Ubuntu', sans-serif;
color: #312c32;
font-size: 0.8em;
margin-left: 150px;
}
p {
font-size: 0.9em;
color: #3b3a36;
font-family: 'Ubuntu', sans-serif;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 50px;
margin-left: 0px;
}
ul {
list-style-type: none;
font-size: .9em;
color: #375671;
line-height: 1.0em;
padding: 0px;
}
a,
a:visited {
color: #312c32;
}
section > div {
overflow-y: auto;
}
.project {
width: 80%;
min-width: 800px;
height: 100%;
margin: 35px auto;
}
.project:after {
content: "";
display: table;
clear: both;
}
.project-image {
width: 388px;
height: 240px;
background: white;
float: left;
margin-right: 20px;
margin-top: 10px;
border: 2px solid #dddddd;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.project-image:hover {
opacity: 0.5;
}
.project-image-portrait {
width: 230px;
height: 348px;
background: white;
float: left;
margin-right: 95px;
margin-left: 85px;
border: 2px solid #dddddd;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.project-image-portrait:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<header>
<h1>Web Cartography Portfolio</h1>
<h2>by Devin Bartley</h2>
</header>
<section class="Project">
<a href="http://devinleebartley.github.io/MyRoadtripDiary/"><img src="images/Thumbs/Roadtrip_Thumb.jpg" alt="Road Trip Map" class="project-image" /></a>
<div>
<h3><a target = "_blank" href="http://devinleebartley.github.io/MyRoadtripDiary/">My Roadtrip Diary Map</a></h3>
<p>This map is a spatial diary of various routes over land that I have travelled by car and bus. These road trips provide a good glimpse into my personal background and experiences that have shaped me over the course of my life.
The map was created using LeafletJS and allows for the user to isolate particular periods of time using a time slider. Additional information about particular trips is shown when the user moves their mouse over a particular trip.
To collect the data, I compiled all the trips into a spreadsheet and then modified a script created by <a target = "_blank" href = "http://winstonhearn.com/gmaps-to-geojson/"> Winston Hearn<a/> that parsed the trip information into a NodeJS script that sent the origin and destination info to the <a target = "_blank" href = "https://developers.google.com/maps/documentation/directions/"> Google Directions API</a>. The data was then decoded into from the Google Directions API output format to GeoJson for display on the map. </a></p>
<ul>
<li> Created In: <a href="https://leafletjs.com/" target="_blank">LeafletJS</a> <a href="https://javascript.com/" target="_blank">Javascript</a> <a href="http://en.wikipedia.org/wiki/HTML" target="_blank"> <a href="https://nodejs.org/" target="_blank">NodeJS</a> <a href="http://en.wikipedia.org/wiki/HTML" target="_blank"> HTML</a> <a href="http://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a> <a href="http://brackets.io/" target="_blank">Brackets</a></li>
<br>
<li>See the Map: <a target="_blank" href="http://devinleebartley.github.io/MyRoadtripDiary/" /> My Roadtrip Diary</a>
</li>
<li>See the Data Conversion Script: <a href="https://github.com/DevinLeeBartley/roadtripData" />Road Trip Data</a>
</li>
</ul>
</div>
</section>
<section class="Project">
<a href="http://devinleebartley.github.io/Kentucky-Unemployment/"><img src="images/Thumbs/Kentucky_Thumb.jpg" alt="Kentucky Unemployment Map" class="project-image" /></a>
<div>
<h3><a target = "_blank" href="http://devinleebartley.github.io/Kentucky-Unemployment/">Map of Unemployment Rates in Kentucky</a></h3>
<p>This is a LeafletJS based web map showing unemployment rates in Kentucky between 2000-2013. It incorporates a number of dynamic interactions that were created in JavaScript and allow for the user to explore the data by county as well as at a state level by time period. By dragging the time slider the user is able to see how unemployment rates have changed over time.
<br><br><br></a></p>
<ul>
<li> Created In: <a href="https://leafletjs.com/" target="_blank">LeafletJS</a> <a href="https://javascript.com/" target="_blank">Javascript</a> <a href="http://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a> <a href="http://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a> <a href="http://brackets.io/" target="_blank">Brackets</a></li>
<br>
<br>
<li>See the Map: <a target="_blank" href="http://devinleebartley.github.io/Kentucky-Unemployment/" /> Kentucky Unemployment Rates</a>
</li>
<!-- <li>Data Source: <a href="http://www.eia.gov/electricity/data/eia923/" />US Energy Information Administration</a>-->
</li>
<br>
<br>
</ul>
</div>
</section>
<section class="Project">
<a href="http://devinleebartley.github.io/Zero-Emission-Power/"><img src="images/Thumbs/PowerPlants_Thumb3.png" alt="Power Plant Map" class="project-image" /></a>
<div>
<h3><a target = "_blank" href="http://devinleebartley.github.io/Zero-Emission-Power/">Map of Zero Emission Power Plants in the United States</a></h3>
<p>This is a LeafletJS based web map with interactive features created in JavaScript. The map was created by converting the spreadsheet of power generation capacity values to proportional symbols. In JavaScript I then created a spotlight filter with a 500 km radius that appears when the user clicks on the map. The filter also summarizes information about total power generation capacities visible within the spotlight extent. Additional interactive features created using Javascript include the legend that allows for layers to be turned on and off, and the ability to click on any power plant and get more information about it. The code I used to create this map is viewable in this <a href="https://github.com/DevinLeeBartley/Zero-Emission-Power" /> GitHub repository</a>.</p>
<ul>
<li> Created In: <a href="https://leafletjs.com/" target="_blank">LeafletJS</a> <a href="https://javascript.com/" target="_blank">Javascript</a> <a href="http://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a> <a href="http://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a> <a href="http://brackets.io/" target="_blank">Brackets</a></li>
<br>
<li>See the Map: <a target="_blank" href="http://devinleebartley.github.io/Zero-Emission-Power/" /> Zero Emission Power Plants in the United States</a>
</li>
<li>Data Source: <a href="http://www.eia.gov/electricity/data/eia923/" />US Energy Information Administration</a>
</li>
<br>
<br>
</ul>
</div>
</section>
<section class="Project">
<a href="Maps/BreweriesMap_v3.pdf"><img src="images/Thumbs/Brewery_thumb2.png" alt="Brewery Map" class="project-image" /></a>
<div>
<h3><a target="_blank" href="Maps/BreweriesMap_v3.pdf"> Map of Breweries in North America</a></h3>
<p>This map started with a spreadsheet of XY locations for breweries downloaded from the <a target="_blank" href="http://www.poi-factory.com/" />POI Factory</a>. The data is displayed as a hexbin heat map created in QGIS by using a spatial join method. This is a great demonstration of how hexbins can create a visually appealing heat map highlighting phenomenon such as brewing industry hotspots around the country.
</p>
<ul>
<li> Created In: <a href="http://www.qgis.org/en/site/" target="_blank">QGIS</a>
<br>
<br>
<li>See the Map: <a target="_blank" href="Maps/BreweriesMap_v3.pdf" />Breweries in North America</a>
</li>
<li>Data Source: <a target="_blank" href="http://www.poi-factory.com/" />POI Factory</a>
</li>
</ul>
<br>
<br>
<br>
<br>
</div>
</section>
<section class="Project">
<a href="https://dbartley.cartodb.com/viz/186f226c-96d0-11e5-99ec-0e674067d321/public_map"><img src="images/Thumbs/Cancer_Thumb4.jpg" alt="Cancer Rate Map" class="project-image" /></a>
<div>
<h3><a target="_blank" href="https://dbartley.cartodb.com/viz/186f226c-96d0-11e5-99ec-0e674067d321/public_map">Map of Cancer Rates by County in the United States</a></h3>
<p>This web map was created in CartoDB by joining cancer profiles tables to US Census Bureau Tiger line work. The map showcases custom labels and color schemes created using CSS and HTML within the CartoDB framework. The map interactivity allows the user to investigate cancer rates for all counties in the country, and the counties with the highest and lowest rates are clearly labelled. Using SQL, I reprojected the map to the Albers Equal Area projection to escape the ubiquitous Web Mercator projection.</p>
<ul>
<li> Created In: <a href="http://cartodb.com" target="_blank">CartoDB</a> <a href="https://en.wikipedia.org/wiki/SQL" target="_blank">SQL</a> <a href="http://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a> <a href="http://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a> </li>
<br>
<br>
<li>See the Map: <a target="_blank" href="https://dbartley.cartodb.com/viz/186f226c-96d0-11e5-99ec-0e674067d321/public_map" />Cancer Rates by County in the United States</a>
</li>
<li>Data Source: <a target="_blank" href="http://www.statecancerprofiles.cancer.gov" />State Cancer Profiles</a>
</li>
</ul>
<br>
<br>
</div>
</section>
<section class="Project">
<a href="Maps/PCTmap_DevinBartley_v02.pdf"><img src="images/Thumbs/PCT_Thumb2.jpg" alt="PCT Map" class="project-image-portrait"></a>
<div>
<h3><a target="_blank" href="Maps/PCTmap_DevinBartley_v02.pdf">Map of The Pacific Crest Trail - Displayed on Landforms of the United States by Erwin Raisz</a></h3>
<p>This map was created by georeferencing the iconic <u>Landforms of the United States</u> by Erwin Raisz in QGIS, and then overlaying Pacific Crest Trail Linework from the US Forest Service on top. I used <a target="_blank" href="https://en.wikipedia.org/wiki/Didot_(typeface)" />Didot</a> typeface for the map and highlighted the states that the trail passes through in a shade of green that matches the official Pacific Crest Trail logo.</p>
<ul>
<li> Created In: <a href="http://www.qgis.org/en/site/" target="_blank">QGIS</a> </li>
<br>
<li>See the Map: <a target="_blank" href="maps/PCTmap_DevinBartley_v02.pdf" />Pacific Crest Trail on Landforms of the United States </a>
</li>
<li>Data Source: <a target="_blank" href="http://www.fs.usda.gov/pct/" />US Forest Service </a>
</li>
</ul>
</div>
</section>
</section>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
<f1>This page was created by Devin Bartley using HTML, CSS, and Javascript on March 22nd, 2016</f1>
</footer>
</body>
</html>