-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
423 lines (352 loc) · 24.4 KB
/
Copy pathindex.html
File metadata and controls
423 lines (352 loc) · 24.4 KB
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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How Bright are the Bike Lanes?</title>
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollama/3.0.4/scrollama.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Edu+VIC+WA+NT+Beginner&family=Oswald:wght@200;300;400;500;600;700&display=swap'); </style>
</head>
<body>
<link rel="prefetch" href="ai2html-output/Map1@2x.png" as="image">
<link rel="prefetch" href="ai2html-output/Asset 43.svg" as="image">
<link rel="prefetch" href="ai2html-output/Asset 42.svg" as="image">
<link rel="prefetch" href="ai2html-output/Asset 41.svg" as="image">
<link rel="prefetch" href="ai2html-output/Asset 46.svg" as="image">
<link rel="prefetch" href="ai2html-output/Asset 47.svg" as="image">
<div class="intro">
<p class="big">Fear and <span style="color: #fceebe; text-shadow: 5px 3px 20px #fceebe;"> Luminescence </span> on a New York Bike Trail </p>
<br/>
<p class="subheader"><i>Navigating through New York's most popular bike trail at night</i></p>
<p class="byline">By Aisvarya Chandrasekar</p>
</div>
<div>
<p class="intro-para">
My commute to campus along the <b>Hudson Waterfront Greenway</b> has been my favorite part of my weekdays this summer. I bike through pockets of serenity - flower gardens and riverfronts, tunnels and bridges, tai-chi classes and tango lessons, dog walkers, and power walkers. The rides that I look forward to in the mornings are starkly different riding experiences at night. While the views of the cityscapes from the waterfront are breathtaking, as a woman riding alone at night, the experience is marked by caution and sometimes fear of what is cloaked by the darkness. I documented my experience on the Hudson Greenway Trail on one such night ride.
</p>
</div>
<!-- <h1>An ai2html template for scrollytelling with scrollama</h1> -->
<section id="scrolly">
<div class="sticky-thing">
<div class= "ai2html-container">
<!-- Generated by ai2html v0.111.0 - 2022-08-03 00:42 -->
<!-- ai file: map1.ai -->
<style media="screen,print">
#g-map1-box ,
#g-map1-box .g-artboard {
margin:0 auto;
}
#g-map1-box p {
margin:0;
}
#g-map1-box .g-aiAbs {
position:absolute;
}
#g-map1-box .g-aiImg {
position:absolute;
top:0;
display:block;
width:100% !important;
}
#g-map1-box .g-aiSymbol {
position: absolute;
box-sizing: border-box;
}
#g-map1-box .g-aiPointText p { white-space: nowrap; }
#g-map1-Artboard_1 {
position:relative;
overflow:hidden;
}
</style>
<div id="g-map1-box" class="ai2html ai2html-responsive">
<!-- Artboard: Artboard_1 -->
<div id="g-map1-Artboard_1" class="g-artboard" style="max-width: 2832px;max-height: 2133px" data-aspect-ratio="1.328" data-min-width="0">
<div style="padding: 0 0 75.3281% 0;"></div>
<img id="g-map1-Artboard_1-img" class="g-map1-Artboard_1-img g-aiImg" alt="" src="ai2html-output\Asset 40.svg"/>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="g-map1-Artboard_1-interactions-img g-aiImg" version="1.2" baseProfile="tiny" id="g-map1-Artboard_1-interactions-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 2832 2133.292" overflow="visible" xml:space="preserve">
<g>
</g>
<style>
#g-map1-Artboard_1-interactions-img rect, #g-map1-Artboard_1-interactions-img circle, #g-map1-Artboard_1-interactions-img path, #g-map1-Artboard_1-interactions-img line, #g-map1-Artboard_1-interactions-img polyline, #g-map1-Artboard_1-interactions-img polygon { vector-effect: non-scaling-stroke; }
</style>
</svg>
</div>
</div>
<script type="text/javascript">
(function (containerId, opts) {
var nameSpace = opts.namespace || '';
var containers = findContainers(containerId);
containers.forEach(resize);
function resize(container) {
var onResize = throttle(update, 200);
var waiting = !!window.IntersectionObserver;
var observer;
update();
document.addEventListener('DOMContentLoaded', update);
window.addEventListener('resize', onResize);
// NYT Scoop-specific code
if (opts.setup) {
opts.setup(container).on('cleanup', cleanup);
}
function cleanup() {
document.removeEventListener('DOMContentLoaded', update);
window.removeEventListener('resize', onResize);
if (observer) observer.disconnect();
}
function update() {
var artboards = selectChildren('.' + nameSpace + 'artboard[data-min-width]', container),
width = Math.round(container.getBoundingClientRect().width);
// Set artboard visibility based on container width
artboards.forEach(function (el) {
var minwidth = el.getAttribute('data-min-width'),
maxwidth = el.getAttribute('data-max-width');
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
if (!waiting) {
selectChildren('.' + nameSpace + 'aiImg', el).forEach(updateImgSrc);
}
el.style.display = 'block';
} else {
el.style.display = 'none';
}
});
// Initialize lazy loading on first call
if (waiting && !observer) {
if (elementInView(container)) {
waiting = false;
update();
} else {
observer = new IntersectionObserver(onIntersectionChange, {});
observer.observe(container);
}
}
}
function onIntersectionChange(entries) {
// There may be multiple entries relating to the same container
// (captured at different times)
var isIntersecting = entries.reduce(function (memo, entry) {
return memo || entry.isIntersecting;
}, false);
if (isIntersecting) {
waiting = false;
// update: don't remove -- we need the observer to trigger an update
// when a hidden map becomes visible after user interaction
// (e.g. when an accordion menu or tab opens)
// observer.disconnect();
// observer = null;
update();
}
}
}
function findContainers(id) {
// support duplicate ids on the page
return selectChildren('.ai2html-responsive', document).filter(function (el) {
if (el.getAttribute('id') != id) return false;
if (el.classList.contains('ai2html-resizer')) return false;
el.classList.add('ai2html-resizer');
return true;
});
}
// Replace blank placeholder image with actual image
function updateImgSrc(img) {
var src = img.getAttribute('data-src');
if (src && img.getAttribute('src') != src) {
img.setAttribute('src', src);
}
}
function elementInView(el) {
var bounds = el.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
function selectChildren(selector, parent) {
return parent ? Array.prototype.slice.call(parent.querySelectorAll(selector)) : [];
}
// based on underscore.js
function throttle(func, wait) {
var timeout = null, previous = 0;
function run() {
previous = Date.now();
timeout = null;
func();
}
return function () {
var remaining = wait - (Date.now() - previous);
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
run();
} else if (!timeout) {
timeout = setTimeout(run, remaining);
}
};
}
})("g-map1-box", {namespace: "g-", setup: window.setupInteractive || window.getComponent});
</script>
<!-- End ai2html - 2022-08-03 00:42 -->
</div>
</div>
<div class="scrolly-overlay">
<div class="step" id="step-zero">
<h3>The Trail </h3>
<p>The commute back home starts from Morningside Heights, near the university. I enter the trail through Riverside Park, ride along Hudson Greenway down to Vesey St after which I divert from the trail, enter the WTC and take the PATH back home.</p>
<p class="sub-text">The data for the path illustrated was collected via Strava and plotted on Mapbox. I rode the bike at 10:16pm, and it took me 46 minutes to complete the commute.</p>
</div>
<div class="step" id="step-one">
<!-- <h3>Sections of the Night Ride </h3> -->
<p>The trail weaves in and out of Riverside Park, under the bridge (Piers 88-99) and into the bike path adjecent to the main roads and is sectioned from oncoming car traffic by a concrete wall. The trail near the main roads are well populated by cyclists, e-bikers, motorcyclists, roller-skaters and runners at all times of the day. On the other hand, I have many times been the only cyclist riding through the park at night.</p>
</div>
<div class="step" id="step-two">
<!-- <h3>The Legend</h3> -->
<p>The lights from the streets and buildings provide adequate lighting for the main routes, however the path through Riverside Park has very poor visibility. The first third of the ride home has my heart racing the fastest because the park is notorious for being <a href = "https://www.city-data.com/forum/new-york-city/3364584-safety-riverside-park-after-dark.html">"sketchy as eff at night"</a> and has the seventh highest criminal incidences out of all the parks in New York City.</p>
<img class= "image" src = ".\ai2html-output\Asset 43.svg"/>
<p class="sub-text"><b>Method:</b>To create this map, I video-taped my night ride and used the brightness in different sections of the video to collect fuzzy luminance data. </p>
</div>
<div class="step" id="step-three">
<!-- <h3>Riverside Park </h3> -->
<p>The trail inside Riverside Park is a mudpath surrounded by trees, with twigs and roots that protrude from the ground, requiring cyclists to swerve or slow down. Although there are lights in the park, the placement of the lights still create dark spots. The narrow path is used as a two way lane shared by incoming and outgoing cyclists and sometimes daring pedestrians. There are signs navigating cyclists through the detour but these messages are not visible at night. </p>
<iframe width="400" height="250" src="./twitter_ride.mp4" frameborder="0" allowfullscreen></iframe>
<!-- <video class = "image" src = ""></video> -->
<p> The perils of this route are best seen through a video a cyclist <a href = "https://twitter.com/bikenewyork/status/1191733207969996800?s=20&t=ZfVD2DO8JIEd0YaCLzan3w"> posted on Twitter </a>as he rides through the dark stretch of the trail near 79th Street. </p>
</div>
<div class="step" id="step-four">
<h3>The Detour</h3>
<p>This route though the park and 79th street is a detour from what was initially a well lit and paved promenade overlooking the waterfront shared by both bicyclists and pedestrians. The municipality installed illumination along this path in 2013 <a href = "https://www.westsiderag.com/2013/04/14/on-riverside-park-bike-path-new-lights-and-late-night-tickets"></a>at the behest of cyclists who wanted to enjoy the view at night without fearing for their safety.</p>
<img class = "image" src = ".\2x\Asset 37@2x.png">
<p> But due to pedestrian-cyclist crashes, a new bike detour was installed in Riverside Park in 2019 but this rather hasty solution with its lack of lighting, steep hills, unpaved paths, and sharp turns near construction sites, is detrimental to the safety the detour intended to provide.</p>
</div>
<!-- <div class="step" id="step-five">
<h3>The Piers</h3>
<p>The majority of the riding trail is located between piers and the main road. All of these sections of the path provide enough ambient lighting, but some of the larger piers, such as Chelsea and Midtown, give something that smaller ones do not: crowds. With pedestrians, vehicles, buses, and bicycles, I never have to worry about riding alone at night, but the traffic with reduced visibility makes these routes more prone to accidents. </p>
</div> -->
<!-- <div class="step" id="step-five">
<p><br/> </p>
</div> -->
</div>
</section>
<div>
<p class="intro-para">Based on my own riding experience on this trail, I believe that more lighting along the bike trails, especially at the dark area near 79th, would make me feel safer. While I can see the necessity to separate bicycles and pedestrians to reduce accidents, the current detour via Riverside is not the answer to that issue. Similar to the Promenade, we need a well-lit, well-paved path that takes cyclists' requirements into account and encourages more bikers to use the route at night, making the path safer for everyone. </p>
</div>
<script>
/* Scrollytelling code goes under here */
d3.select("#step-one").on('stepin', function(e){
console.log("got to step two")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 42.svg")
d3.select("#step-two").on('stepin', function(e){
console.log("got to step three")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 41.svg")
d3.select("#step-three").on('stepin', function(e){
console.log("got to step four")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 46.svg")
d3.select("#step-four").on('stepin', function(e){
console.log("got to step two")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 47.svg")
// d3.select("#step-five").on('stepin', function(e){
// console.log("got to step two")
// d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 38@2x.png")
d3.select("#step-zero").on('stepin', function(e){
console.log("got to step two")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 40.svg")
d3.select("#step-zero").on('stepin', function(e){
console.log("got to step two")
d3.select(".ai2html-container img").attr("src", "ai2html-output/Asset 40.svg")
})
})
})
})
})
})
</script>
<script>
const scroller = scrollama();
scroller
.setup({
step: "#scrolly .scrolly-overlay .step",
offset: 0.5,
debug: false
})
.onStepEnter(function({ element, index, direction}) {
const event = new CustomEvent('stepin', { detail: { direction: direction } })
element.dispatchEvent(event);
})
.onStepExit(function({ element, index, direction }) {
const event = new CustomEvent('stepout', { detail: { direction: direction } })
element.dispatchEvent(event);
});
window.addEventListener("resize", scroller.resize);
</script>
<script type="text/javascript">
(function() {
// only want one resizer on the page
if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return;
document.documentElement.className += " g-resizer-v3-init";
// require IE9+
if (!("querySelector" in document)) return;
function resizer() {
var elements = Array.prototype.slice.call(document.querySelectorAll(".g-artboard[data-min-width]")),
widthById = {};
elements.forEach(function(el) {
var parent = el.parentNode,
width = widthById[parent.id] || parent.getBoundingClientRect().width,
minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
widthById[parent.id] = width;
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
try {
if (window.parent && window.parent.$) {
window.parent.$("body").trigger("resizedcontent", [window]);
}
if (window.require) {
require(['foundation/main'], function() {
require(['shared/interactive/instances/app-communicator'], function(AppCommunicator) {
AppCommunicator.triggerResize();
});
});
}
} catch(e) { console.log(e); }
}
document.addEventListener('DOMContentLoaded', resizer);
// feel free to replace throttle with _.throttle, if available
window.addEventListener('resize', throttle(resizer, 200));
function throttle(func, wait) {
// from underscore.js
var _now = Date.now || function() { return new Date().getTime(); },
context, args, result, timeout = null, previous = 0;
var later = function() {
previous = _now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = a
rgs = null;
};
return function() {
var now = _now(), remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
})();
</script>
</body>
</html>