-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
476 lines (417 loc) · 18.7 KB
/
Copy pathindex.html
File metadata and controls
476 lines (417 loc) · 18.7 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
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Analysis Datathon Project</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #3b82f6;
--primary-dark: #2563eb;
--secondary: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--bg-dark: #0f172a;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--border: #334155;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 100%);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.6;
}
/* Header */
.header {
background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
padding: 3rem 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.header p {
font-size: 1.3rem;
opacity: 0.95;
max-width: 800px;
margin: 0 auto;
}
/* Main content */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 3rem 2rem;
}
/* Project Cards */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.project-card {
background: var(--bg-card);
border-radius: 1.5rem;
padding: 2.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.project-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.project-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);
}
.project-card h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.75rem;
}
.project-card h3 {
font-size: 1.3rem;
margin: 1.5rem 0 0.75rem;
color: var(--secondary);
}
.project-card p {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.8;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.stat-item {
background: var(--bg-card-hover);
border-radius: 0.75rem;
padding: 1rem;
text-align: center;
border: 1px solid var(--border);
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.25rem;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.85rem;
}
/* Button */
.dashboard-btn {
display: inline-block;
margin-top: 1.5rem;
padding: 1rem 2rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
color: white;
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.dashboard-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
/* Comparison Section */
.comparison-section {
background: var(--bg-card);
border-radius: 1.5rem;
padding: 2.5rem;
margin-top: 3rem;
border: 1px solid var(--border);
}
.comparison-section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--primary);
text-align: center;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}
.comparison-table th,
.comparison-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.comparison-table th {
background: var(--bg-card-hover);
color: var(--primary);
font-weight: 600;
font-size: 1.1rem;
}
.comparison-table tr:hover {
background: var(--bg-card-hover);
}
/* Features List */
.features-list {
list-style: none;
margin: 1rem 0;
}
.features-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--text-secondary);
}
.features-list li::before {
content: '•';
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
/* Quick Links */
.quick-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.quick-link {
padding: 0.75rem 1.5rem;
background: var(--bg-card-hover);
border: 1px solid var(--border);
border-radius: 0.5rem;
color: var(--text-primary);
text-decoration: none;
transition: all 0.3s ease;
}
.quick-link:hover {
background: var(--primary);
border-color: var(--primary);
transform: translateY(-2px);
}
/* Footer */
.footer {
text-align: center;
padding: 2rem;
color: var(--text-secondary);
margin-top: 3rem;
}
/* Responsive */
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
.project-card {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<header class="header">
<h1>Accessibility Analysis Datathon Project</h1>
<p>Two complementary machine learning approaches to analyzing and predicting accessibility barriers in urban environments</p>
</header>
<main class="container">
<!-- Project Cards -->
<div class="projects-grid">
<!-- GNN Project Card -->
<div class="project-card">
<h2>GNN Hotspot Detection</h2>
<p><strong>Research Question:</strong> Identify high-risk accessibility hotspots using clustering and/or spatial modeling.</p>
<h3>Approach</h3>
<p>Hybrid Graph Neural Network (GAT) that combines:</p>
<ul class="features-list">
<li><strong>Spatial Modeling:</strong> KNN-based graph construction, spatial autocorrelation analysis</li>
<li><strong>Clustering:</strong> DBSCAN on learned embeddings with multi-factor risk scoring</li>
<li><strong>Graph-Based Learning:</strong> Contrastive learning to capture spatial-contextual patterns</li>
</ul>
<h3>Key Results</h3>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">255</div>
<div class="stat-label">Hotspots</div>
</div>
<div class="stat-item">
<div class="stat-value">100%</div>
<div class="stat-label">Coverage</div>
</div>
<div class="stat-item">
<div class="stat-value">0.24</div>
<div class="stat-label">Moran's I</div>
</div>
<div class="stat-item">
<div class="stat-value">3.74%</div>
<div class="stat-label">Spatial Units</div>
</div>
</div>
<p style="margin-top: 1rem; color: var(--text-primary);">
<strong>Rationale for Graph Structure:</strong> Accessibility barriers exhibit spatial dependencies. Nearby issues may share common causes (infrastructure age, neighborhood planning). Graph structure explicitly models these relationships, allowing the GNN to learn spatial-contextual patterns that point-based methods may miss. However, this requires careful graph construction (KNN k=15) and comes with computational overhead.
</p>
<a href="GNN/dashboard.html" class="dashboard-btn">View GNN Dashboard →</a>
</div>
<!-- Temporal Project Card -->
<div class="project-card">
<h2>Temporal Forecasting</h2>
<p><strong>Research Question:</strong> Predict future neighborhood accessibility scores based on historical barrier patterns.</p>
<h3>Approach</h3>
<p>Transformer-based sequence-to-sequence model for multi-step forecasting:</p>
<ul class="features-list">
<li><strong>Architecture:</strong> Transformer encoder with positional encoding</li>
<li><strong>Features:</strong> Temporal lags, rolling statistics, cyclical time encoding</li>
<li><strong>Training:</strong> Multi-step prediction (3 steps ahead) with Huber loss</li>
</ul>
<h3>Key Results</h3>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">0.84</div>
<div class="stat-label">R² Score</div>
</div>
<div class="stat-item">
<div class="stat-value">16.01</div>
<div class="stat-label">MAE</div>
</div>
<div class="stat-item">
<div class="stat-value">55.6%</div>
<div class="stat-label">Threshold Acc</div>
</div>
<div class="stat-item">
<div class="stat-value">3</div>
<div class="stat-label">Steps Ahead</div>
</div>
</div>
<p style="margin-top: 1rem; color: var(--text-primary);">
<strong>Model Comparison:</strong> Transformer achieves higher R² (0.8372) than LSTM (0.7893) and XGBoost (0.1008) on test set. The improvement over LSTM is modest (~6% relative). XGBoost's poor performance suggests it struggles with temporal structure. <strong>Limitation:</strong> Predictions use synthetic time bins (derived from attribute_id ordering), not true temporal data.
</p>
<a href="temporal_calc/dashboard.html" class="dashboard-btn">View Temporal Dashboard →</a>
</div>
</div>
<!-- How Projects Complement Each Other -->
<div class="comparison-section">
<h2>How the Projects Complement Each Other</h2>
<p style="text-align: center; margin-bottom: 2rem; color: var(--text-secondary);">
Together, they provide spatial and temporal analysis for urban planning
</p>
<table class="comparison-table">
<thead>
<tr>
<th>Aspect</th>
<th>GNN Hotspot Detection</th>
<th>Temporal Forecasting</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Goal</strong></td>
<td>Identify <strong>where</strong> high-risk areas are now</td>
<td>Predict <strong>how</strong> accessibility will change</td>
</tr>
<tr>
<td><strong>Time Horizon</strong></td>
<td>Current state analysis</td>
<td>Future trend prediction</td>
</tr>
<tr>
<td><strong>Output</strong></td>
<td>Spatial hotspot map (255 regions)</td>
<td>Neighborhood risk forecasts</td>
</tr>
<tr>
<td><strong>Use Case</strong></td>
<td>Prioritize infrastructure investment</td>
<td>Plan long-term interventions</td>
</tr>
<tr>
<td><strong>Method</strong></td>
<td>Graph-based spatial clustering</td>
<td>Sequence-to-sequence forecasting</td>
</tr>
</tbody>
</table>
<div style="margin-top: 2rem; padding: 1.5rem; background: var(--bg-card-hover); border-radius: 0.75rem; border-left: 4px solid var(--secondary);">
<p style="margin: 0; color: var(--text-primary);">
<strong>Together, they provide:</strong><br>
1. <strong>Spatial Analysis:</strong> Current spatial distribution of high-risk areas (GNN)<br>
2. <strong>Temporal Projections:</strong> Forecasted accessibility trends (Temporal), with caveats about synthetic time bins<br>
3. <strong>Complementary Information:</strong> Combining current hotspots with predicted trends may inform resource allocation, though both models have limitations (GNN: parameter sensitivity, Temporal: synthetic time proxy) that should be considered
</p>
</div>
</div>
<!-- Quick Links -->
<div class="comparison-section" style="margin-top: 2rem;">
<h2>Documentation & Resources</h2>
<div class="quick-links">
<a href="GNN/dashboard.html" class="quick-link">GNN Dashboard</a>
<a href="temporal_calc/dashboard.html" class="quick-link">Temporal Dashboard</a>
<a href="https://github.com/Navneethd8/datathon26/blob/main/GNN/RESULTS_SUMMARY.md" class="quick-link">GNN Results</a>
<a href="https://github.com/Navneethd8/datathon26/blob/main/GNN/GNN-README.md" class="quick-link">GNN Documentation</a>
<a href="https://github.com/Navneethd8/datathon26/blob/main/temporal_calc/transformer_README.md" class="quick-link">Temporal Documentation</a>
<a href="https://github.com/Navneethd8/datathon26/blob/main/README.md" class="quick-link">Full README</a>
</div>
</div>
<!-- Key Findings Summary -->
<div class="comparison-section" style="margin-top: 2rem;">
<h2>Key Findings Summary</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem;">
<div>
<h3 style="color: var(--primary); margin-bottom: 1rem;">GNN Hotspot Detection</h3>
<ul class="features-list">
<li><strong>Detection Coverage:</strong> 255 hotspots on test set (3.3x more than best baseline) with 100% coverage of high-severity issues</li>
<li><strong>Pattern Divergence:</strong> Low Jaccard similarity (0.01-0.05) with baselines indicates GNN identifies different spatial patterns, though this may reflect parameter sensitivity</li>
<li><strong>Spatial Coherence Tradeoff:</strong> Moderate spatial coherence (Moran's I = 0.2376) suggests meaningful clustering without being overly conservative like Getis-Ord Gi* (0.75 coherence, 17 hotspots)</li>
<li><strong>Graph Structure Justification:</strong> Graph structure enables modeling spatial dependencies that point-based methods miss, though this requires careful graph construction and comes with computational cost</li>
</ul>
</div>
<div>
<h3 style="color: var(--secondary); margin-bottom: 1rem;">Temporal Forecasting</h3>
<ul class="features-list">
<li><strong>Model Performance:</strong> R² = 0.8372 on test set, higher than LSTM (0.7893) and XGBoost (0.1008). Improvement over LSTM is modest (~6% relative)</li>
<li><strong>Multi-step Forecasting:</strong> Forecasts 3 steps ahead with 55.56% threshold accuracy (±15 points), indicating trend-level rather than point-prediction accuracy</li>
<li><strong>Feature Engineering:</strong> Temporal lags, rolling statistics, and cyclical encoding provide historical context, though feature importance analysis was not conducted within 24-hour constraint</li>
<li><strong>Limitations:</strong> Predictions based on synthetic time bins (not true temporal data). Crowdsourced data may have reporting biases affecting generalizability</li>
</ul>
</div>
</div>
</div>
</main>
<footer class="footer">
<p>Accessibility Analysis Datathon Project | Analyzing ~82K accessibility barriers across Seattle neighborhoods</p>
<p style="margin-top: 0.5rem; font-size: 0.9rem;">Both projects analyze the <strong>Access to Everyday Life Dataset</strong> to support urban planning and infrastructure improvement decisions.</p>
</footer>
</body>
</html>