-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
586 lines (515 loc) · 24 KB
/
index.html
File metadata and controls
586 lines (515 loc) · 24 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
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buffalo Bayou Geology</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<style>
/* Page-specific: Index uses narrower max-width */
.header-content {
max-width: 1200px;
}
main {
max-width: 1200px;
}
.hero {
text-align: center;
padding: 1rem 1rem;
margin-bottom: 0rem;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 0rem;
color: #a8d8ea;
}
.hero p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 800px;
margin: 0 auto 1rem;
line-height: 1.6;
}
.publication-box {
background: rgba(168, 216, 234, 0.15);
border: 1px solid rgba(168, 216, 234, 0.3);
border-radius: 12px;
padding: 1.5rem;
margin: 2rem auto;
max-width: 900px;
}
.publication-box h3 {
color: #a8d8ea;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.publication-box p {
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.publication-box a {
color: #a8d8ea;
}
.view-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.view-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.view-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.view-card h3 {
color: #a8d8ea;
font-size: 1.3rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.view-card p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1rem;
}
.view-card a.btn {
display: inline-block;
background: rgba(168, 216, 234, 0.3);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s ease;
}
.view-card a.btn:hover {
background: rgba(168, 216, 234, 0.5);
}
/* Index-specific section styles (slightly different) */
.section {
border-radius: 12px;
padding: 1.5rem;
}
.section h3 {
color: #a8d8ea;
font-size: 1.3rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.5rem;
}
.section p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.section a {
color: #a8d8ea;
}
.section ul {
list-style: none;
padding-left: 0;
}
.section ul li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: rgba(255, 255, 255, 0.8);
}
.section ul li::before {
content: "•";
color: #a8d8ea;
position: absolute;
left: 0;
}
.two-col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
}
footer {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem;
}
footer a {
color: #a8d8ea;
}
.gage-container {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.current-level {
text-align: center;
margin-bottom: 1rem;
}
.level-label {
display: block;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.level-value {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #a8d8ea;
}
.level-time {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.level-status {
text-align: center;
font-size: 1.1rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
}
#gageChart {
max-height: 250px;
}
.btn {
display: inline-block;
background: rgba(168, 216, 234, 0.3);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s ease;
}
.btn:hover {
background: rgba(168, 216, 234, 0.5);
}
@media (max-width: 768px) {
h1 {
font-size: 1.4rem;
}
.header-content {
flex-direction: column;
text-align: center;
}
nav {
flex-wrap: wrap;
justify-content: center;
}
.hero h2 {
font-size: 1.8rem;
}
.two-col {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>🦬 Buffalo Bayou Geology</h1>
<nav>
<a href="index.html" class="active">Home</a>
<a href="large-map.html">Large Map</a>
<a href="four-maps.html">Four Maps</a>
<a href="gallery.html">Gallery</a>
<a href="cross-sections.html">Cross Sections</a>
<a href="thin-sections.html">Thin Sections</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<h2>Rock Outcrops Along Buffalo Bayou</h2>
<p>
This site provides interactive visualizations of geologic field data collected along Buffalo Bayou in Houston, Texas.
While there are many geologists in Houston, there are few rock outcrops. This website details some of Houston's limited rock outcrops that appear during low water levels along Buffalo Bayou.</p>
</section>
<div class="publication-box">
<h3>📄 This website visualizes the data archive of a publication</h3>
<p>
The outcrop photos, thin-sections, and other data visualized on this website were collected or created by the authors of the publication:
<br><br>
Patterson, P., Kendall, J., Schwartz, A., Novello, J., Gaston, W., Lang, R., West, D., Gosses, J., & Wachtman, C. (2025).
<em>Sedimentology, Sequence Stratigraphy, Diagenesis, and Paleogeographic Reconstruction of the Beaumont Formation,
Late Pleistocene, Buffalo Bayou, Houston, Texas.</em> Houston Geological Society Bulletin, June 2025.
<a href="https://www.newhgs.org/documents/bulletin_archives/Final%20-6_2_25%20June%20Bulletin.pdf" target="_blank" rel="noopener">[PDF]</a>
</p>
<br>
<p>
Please refer to this website's <a href="https://github.com/JustinGOSSES/buffalo_bayou_geology" target="_blank" rel="noopener">GitHub repository's README.md</a> for information on how to download or work with this data.</a>
</p>
</div>
<h2 style="text-align: center; margin: 1rem 0 1rem; color: #a8d8ea;">Choose a View</h2>
<div class="view-cards">
<div class="view-card">
<h3>🗺️ Large Map View</h3>
<p>
A single large interactive map showing all data layers. Click on icons to see outcrop images,
bedding plane strike/dip measurements, and field notes as pop-ups.
</p>
<a href="large-map.html" class="btn">Open Large Map →</a>
</div>
<div class="view-card">
<h3>🔗 Four Linked Maps</h3>
<p>
Four synchronized maps (topo, geologic, street) that pan and zoom together.
Click anywhere to see the location across all maps and get geologic unit info from Macrostrat.
</p>
<a href="four-maps.html" class="btn">Open Four Maps →</a>
</div>
<div class="view-card">
<h3>📷 Photo Gallery</h3>
<p>
A scrollable gallery of all outcrop photos with descriptions and mini location maps.
Great for viewing photo details without needing to click through map popups.
</p>
<a href="gallery.html" class="btn">Open Gallery →</a>
</div>
<div class="view-card">
<h3>📊 Well Cross Sections</h3>
<p>
Regional dip and strike cross sections plus individual well log data from 14 well locations
across the Buffalo Bayou area. View detailed subsurface correlations.
</p>
<a href="cross-sections.html" class="btn">Open Cross Sections →</a>
</div>
<div class="view-card">
<h3>🔬 Thin Sections</h3>
<p>
Petrographic thin section analysis from Buffalo Bayou outcrop samples. View mineral composition,
texture, and fabric under polarized light microscopy.
</p>
<a href="thin-sections.html" class="btn">Open Thin Sections →</a>
</div>
</div>
<div class="two-col">
<div class="section">
<h3>About the Data</h3>
<p>
This repository serves as both a visualization tool and a data archive for geologic observations
along Buffalo Bayou collected by the Houston Geological Society working group.
</p>
<p><strong>Data includes:</strong></p>
<ul>
<li>Outcrop photos with location coordinates</li>
<li>Bedding plane strike and dip measurements</li>
<li>Lineament mapping from field observations and LIDAR</li>
<li>Regional fault traces (from subsurface seismic)</li>
<li>Nearby well locations</li>
</ul>
<br></br>
<p><strong>Note:</strong> Regional fault traces shown are mapped from subsurface seismic and are mostly not exposed at the surface.
Their geographic positions should be considered approximate.</p>
<strong>How to use data</strong>:
<p>
Please refer to the GitHub repository's README.md <a href="https://github.com/JustinGOSSES/buffalo_bayou_geology" target="_blank" rel="noopener"> for information on how to download or work with the data shown on this website.</a>
</p>
</div>
<div class="section">
<h3>Data Sources & Credits</h3>
<p><strong>Geologic Field Data:</strong>
<ul>
<li>
Photos, strike dips, and other field observations collected using the Midland Valley Clino app by Jerry Kendall and the HGS Buffalo Bayou working group.
</li>
<li>
Richard Lang created the well log cross-sections. Well log data was collected by Dorene B. West and
Richard Lang. Well logs were sourced from [Texas Commission on Environmental Quality](https://www.tceq.texas.gov/gis/waterwellview.html).
</li>
</ul>
<p><strong>Base Maps:</strong></p>
<ul>
<li><a href="https://macrostrat.org/" target="_blank" rel="noopener">Macrostrat</a> - Geologic map tiles and API. Citation: Peters, S.E., Husson, J.M., & Czaplewski, J. (2018). Macrostrat: A Platform for Geological Data Integration and Deep-Time Earth Crust Research. <em>Geochemistry, Geophysics, Geosystems</em>, 19(4), 1393-1409.</li>
<li><a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">OpenStreetMap</a></li>
<li><a href="https://opentopomap.org/" target="_blank" rel="noopener">OpenTopoMap</a> - Topographic maps from OpenStreetMap and SRTM data (CC-BY-SA 3.0)</li>
<li>ESRI <a href="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" target="_blank" rel="noopener">World Imagery</a> and <a href="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer" target="_blank" rel="noopener">National Geographic World Map</a></li>
<li><a href="https://developers.google.com/maps/documentation/streetview/overview" target="_blank" rel="noopener">Google Street View</a> for street-level imagery</li>
</ul>
</div>
</div>
<div class="section">
<h3>📊 Current Water Level - Buffalo Bayou at Houston (USGS Gage 08074000)</h3>
<p>
Check the current gage height before planning a field visit. Most outcrop photos were taken when
the water level was between 1-2 feet. Higher water levels will submerge the outcrops.
</p>
<div class="gage-container">
<div class="current-level">
<span class="level-label">Current Gage Height:</span>
<span class="level-value" id="currentLevel">Loading...</span>
<span class="level-time" id="levelTime"></span>
</div>
<div class="level-status" id="levelStatus"></div>
<canvas id="gageChart" height="200"></canvas>
</div>
<p style="text-align: center; margin-top: 1rem;">
<a href="https://waterdata.usgs.gov/monitoring-location/USGS-08074000/#period=P1Y&dataTypeId=daily-00065-0" target="_blank" rel="noopener" class="btn">
View Full USGS Gage Data →
</a>
</p>
<p style="font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 1rem;">
Data provided by <a href="https://www.usgs.gov/" target="_blank" rel="noopener">U.S. Geological Survey</a>.
Gage operated in cooperation with Harris County Flood Control District.
</p>
<h4>Field trip safety</h4>
<p>
Although outcrops along Buffalo Bayou may be of interest to the many geologists
in Houston due to the scarcity of outcrops along the Texas coastal plain, please remember
that these locations are only visible at low water levels
and can be dangerous to access. Always prioritize safety, be aware of weather conditions,
and obtain any necessary permissions before visiting field sites. Many of these sites
require a kayak or canoe to access which requires proper safety equipment and experience.
Access by foot is often not posssible and when possible involves traversing slippery slopes
next to water, which would require use of a PFD and may be too much of an atheltic
challenge for some individuals. Most photos were taken when the USGS guage at Shepard street
was slightly above 1 foot.
</p>
</div>
<div class="section">
<h3>Closely Related Resources Elsewhere (digital elevation models)</h3>
<p>
Somewhat separate from the question of the depositional environment of the bedrock exposed
in outcrops along Buffalo Bayou is the question of why Buffalo Bayou exists where
it is and flows east not south towards the coast. Although the information in the bedrock
exposed in Buffalo Bayou can help a little with that question, much of the answer can be
found in the topography and surficial geology of the region.
</p>
<p>
Originally, this repository held some Python code
for analyzing digital elevation models of the Houston area and
creating Relative Elevation Maps (REM) that make small changes in topography
more visible.
That work has since moved to a separate GitHub repository:
<a href="https://github.com/JustinGOSSES/buffalo_bayou_geology_REM" target="_blank" rel="noopener">buffalo_bayou_geology_REM</a>
</p>
<p>
It forms the basis of the blog post:
<a href="https://justingosses.com/blog/why-buffalo-bayou-does-not-drain-to-the-sea" target="_blank" rel="noopener">
"Houston has topography: Looking at why Buffalo Bayou does not drain to the sea, directly"
</a>
and may be of interest for answering the question of why Buffalo Bayou flows where it does
and how it differs from some of the larger regional fluvial systems.
</p>
<img src="screen_captures/buffaloBayouREM.png" alt="Relative Elevation Map with elevation profile" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// USGS Water Services API for Buffalo Bayou at Houston (Site 08074000)
const siteId = '08074000';
const parameterCode = '00065'; // Gage height in feet
// Calculate date range (last 14 days)
const endDate = new Date().toISOString().slice(0, 10);
const startDate = new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
const apiUrl = `https://waterservices.usgs.gov/nwis/iv/?format=json&sites=${siteId}¶meterCd=${parameterCode}&startDT=${startDate}&endDT=${endDate}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const timeSeries = data.value.timeSeries[0];
const values = timeSeries.values[0].value;
// Get current (most recent) value
const currentValue = values[values.length - 1];
const currentHeight = parseFloat(currentValue.value);
const currentTime = new Date(currentValue.dateTime);
// Update current level display
document.getElementById('currentLevel').textContent = `${currentHeight.toFixed(2)} ft`;
document.getElementById('levelTime').textContent = `as of ${currentTime.toLocaleString()}`;
// Set status based on level
const statusEl = document.getElementById('levelStatus');
if (currentHeight <= 1.5) {
statusEl.textContent = '✅ Outcrops likely visible if below this level';
statusEl.style.color = '#90EE90';
} else if (currentHeight <= 2.0) {
statusEl.textContent = '⚠️ Some outcrops may be submerged while others visible';
statusEl.style.color = '#ffc107';
} else if (currentHeight <= 2.2) {
statusEl.textContent = '⚠️ Most outcrops may be submerged';
statusEl.style.color = '#ffc107';
} else {
statusEl.textContent = '🚫 Outcrops likely submerged';
statusEl.style.color = '#ff6b6b';
}
// Prepare chart data (sample every 6 hours for cleaner chart)
const chartData = [];
const chartLabels = [];
for (let i = 0; i < values.length; i += 6) {
const val = values[i];
chartLabels.push(new Date(val.dateTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
chartData.push(parseFloat(val.value));
}
// Create chart
const ctx = document.getElementById('gageChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: chartLabels,
datasets: [{
label: 'Gage Height (ft)',
data: chartData,
borderColor: '#a8d8ea',
backgroundColor: 'rgba(168, 216, 234, 0.1)',
fill: true,
tension: 0.3,
pointRadius: 0
}, {
label: 'Optimal for viewing (<1.5 ft)',
data: Array(chartLabels.length).fill(1.5),
borderColor: '#90EE90',
borderDash: [5, 5],
pointRadius: 0,
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: { color: 'rgba(255,255,255,0.8)' }
}
},
scales: {
x: {
ticks: { color: 'rgba(255,255,255,0.6)' },
grid: { color: 'rgba(255,255,255,0.1)' }
},
y: {
ticks: { color: 'rgba(255,255,255,0.6)' },
grid: { color: 'rgba(255,255,255,0.1)' },
title: {
display: true,
text: 'Gage Height (ft)',
color: 'rgba(255,255,255,0.8)'
}
}
}
}
});
})
.catch(error => {
console.error('Error fetching USGS data:', error);
document.getElementById('currentLevel').textContent = 'Unable to load';
document.getElementById('levelStatus').textContent = 'Visit USGS website for current data';
});
</script>
<footer>
<p>Created by Justin Gosses for the Houston Geological Society working group on Buffalo Bayou</p>
<p>Code repository: <a href="https://github.com/JustinGOSSES/buffalo_bayou_geology" target="_blank" rel="noopener">GitHub</a></p>
</footer>
</body>
</html>