-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcross-sections.html
More file actions
472 lines (426 loc) · 17.8 KB
/
cross-sections.html
File metadata and controls
472 lines (426 loc) · 17.8 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
<!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 - Well Cross Sections</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: Use wider layout like map pages */
.header-content {
max-width: 1800px;
}
.notice {
max-width: 1800px;
}
.info-banner {
max-width: 1800px;
}
main {
max-width: 1800px;
}
.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;
}
.pdf-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 1rem;
}
.pdf-item {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 1rem;
}
.pdf-item h4 {
color: #a8d8ea;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.pdf-item iframe {
width: 100%;
height: 500px;
border: none;
border-radius: 4px;
background: #fff;
}
.pdf-item .pdf-link {
display: inline-block;
margin-top: 0.5rem;
color: #a8d8ea;
text-decoration: none;
font-size: 0.9rem;
}
.pdf-item .pdf-link:hover {
text-decoration: underline;
}
.well-selector {
margin-bottom: 1rem;
}
.well-selector label {
display: block;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
}
.well-selector select {
padding: 0.75rem 1rem;
font-size: 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.3);
color: #fff;
min-width: 300px;
cursor: pointer;
font-family: "Roboto Condensed", sans-serif;
}
.well-selector select:focus {
outline: none;
border-color: #a8d8ea;
}
.well-selector select option {
background: #1a1a2e;
color: #fff;
}
.well-image-container {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 1rem;
min-height: 90vh;
}
.well-image-container h4 {
color: #a8d8ea;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.well-image-container iframe {
width: 100%;
height: 85vh;
border: none;
border-radius: 4px;
background: #fff;
}
.well-info {
margin-top: 1rem;
padding: 1rem;
background: rgba(168, 216, 234, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.9);
}
.well-info p {
margin-bottom: 0.5rem;
}
.well-info strong {
color: #a8d8ea;
}
.no-selection {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
color: rgba(255, 255, 255, 0.5);
font-size: 1.1rem;
}
.image-note {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
margin-top: 0.5rem;
font-style: italic;
}
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;
}
@media (max-width: 768px) {
.pdf-item iframe {
height: 400px;
}
.well-selector select {
width: 100%;
min-width: unset;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>🦬 Buffalo Bayou Geology - Well Cross-Sections</h1>
<nav>
<a href="index.html">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" class="active">Cross Sections</a>
<a href="thin-sections.html">Thin Sections</a>
</nav>
</div>
</header>
<main>
<div class="page-title">
<h2>Well Cross Sections</h2>
<p>Water well log cross-sections equivalent and below outcrops</p>
</div>
<div class="info-banner">
📁 <strong>Data Access:</strong> All cross section files can be downloaded from the <a href="https://github.com/JustinGOSSES/buffalo_bayou_geology/tree/main/data/well_cross_sections" target="_blank" rel="noopener">GitHub repository</a>.
</div>
<div class="section" id="intro">
<h3>About Well Logs</h3>
<div style="margin-bottom: 1rem;">
<h4 style="color: #a8d8ea; margin-bottom: 0.5rem;">What are well logs?</h4>
<p>
Well logs are created by lowering measurement instruments into a borehole to obtain different types of measurements that tell us something about the physical properties of the rocks and fluids present in the subsurface.
These measurements are recorded continuously as a function of depth. These shallow water wells provide valuable insights into the near subsurface geology equivalent and below what is exposed in the Buffalo Bayou outcrops.
</p>
</div>
<div style="margin-bottom: 1rem;">
<h4 style="color: #a8d8ea; margin-bottom: 0.5rem;">Who created these?</h4>
<p>
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. Please see <a href="https://www.tceq.texas.gov/gis/waterwellview.html">https://www.tceq.texas.gov/gis/waterwellview.html</a> for original data.
</p>
</div>
<div>
<h4 style="color: #a8d8ea; margin-bottom: 0.5rem;">Detailed interpretations</h4>
<p>
For a detailed explanation of how these water well logs relate to the outcrops along Buffalo Bayou,
see the associated publication:
<a href="https://github.com/JustinGOSSES/buffalo_bayou_geology/tree/main/associatedPapers">
Patterson, P., Kendall, J., Schwartz, A., Novello, J., Gaston, W., Lang, R., West, D., Gosses, J., & Wachtman, C. (2025). Sedimentology, Sequence Stratigraphy, Diagenesis, and Paleogeographic Reconstruction of the Beaumont Formation, Late Pleistocene, Buffalo Bayou, Houston, Texas. Houston Geological Society Bulletin, June 2025.
</a>
</p>
</div>
</div>
<!-- Well Log Signature of Outcrops -->
<div class="section">
<h3>Well Log Signature of Outcrops</h3
<p>
Diagrams 19 and 20 from the associated publication show approximately
what part of Well Log G the Buffalo Bayou outcrops are equivalent to,
providing a useful reference for correlating surface exposures with subsurface stratigraphy.
</p>
<div class="pdf-container">
<div class="pdf-item">
<h4>Figure 19: Well Log Signature of Outcrops</h4>
<iframe src="associatedPapers/FiguresForHGSBulletin_May62025/Figure 19 Well Log signature of outcrops.pdf" title="Well Log Signature of Outcrops PDF"></iframe>
<a href="associatedPapers/FiguresForHGSBulletin_May62025/Figure 19 Well Log signature of outcrops.pdf" target="_blank" class="pdf-link">📄 Open in new tab</a>
</div>
<div class="pdf-item">
<h4>Figure 20: Well Log Cross Section</h4>
<iframe src="associatedPapers/FiguresForHGSBulletin_May62025/Figure 20 Well log cross section.pdf" title="Well Log Cross Section PDF"></iframe>
<a href="associatedPapers/FiguresForHGSBulletin_May62025/Figure 20 Well log cross section.pdf" target="_blank" class="pdf-link">📄 Open in new tab</a>
</div>
</div>
</div>
<!-- Regional Cross Sections -->
<div class="section">
<h3>Regional Cross Sections</h3>
<div class="pdf-container">
<div class="pdf-item">
<h4>Dip Section</h4>
<iframe src="data/well_cross_sections/Dip_Section.pdf" title="Dip Section PDF"></iframe>
<a href="data/well_cross_sections/Dip_Section.pdf" target="_blank" class="pdf-link">📄 Open in new tab</a>
</div>
<div class="pdf-item">
<h4>Strike Section</h4>
<iframe src="data/well_cross_sections/Strike_Section.pdf" title="Strike Section PDF"></iframe>
<a href="data/well_cross_sections/Strike_Section.pdf" target="_blank" class="pdf-link">📄 Open in new tab</a>
</div>
</div>
</div>
<!-- Individual Well Cross Sections -->
<div class="section">
<h3>Individual Well Cross Sections</h3>
<p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem;">
Select a well location to view its detailed cross section image. Each well is labeled A through N with its coordinates.
</p>
<div class="well-selector">
<label for="well-select">Select Well Location:</label>
<select id="well-select" onchange="updateWellImage()">
<option value="A" selected>A - West Harris MUD 4 (29.7128°N, 95.676578°W)</option>
<option value="B">B - Longhorn Town (29.77788°N, 95.686004°W)</option>
<option value="C">C - City of South Houston (29.664082°N, 95.219818°W)</option>
<option value="D">D - Air Products 2 (29.700519°N, 95.069389°W)</option>
<option value="E">E - City of West University (29.715931°N, 95.438271°W)</option>
<option value="F">F - City of Houston-Southwest 5 (29.724131°N, 95.492172°W)</option>
<option value="G">G - Southwest 3SB (29.724932°N, 95.479958°W)</option>
<option value="H">H - Wilcrest Improvement 1 (29.745001°N, 95.558609°W)</option>
<option value="I">I - Memorial MUD (29.753984°N, 95.7418°W)</option>
<option value="J">J - City of Bunker Hill 3 (29.759125°N, 95.537883°W)</option>
<option value="K">K - Memorial Village (29.763786°N, 95.518723°W)</option>
<option value="L">L - Green Trail MUD (29.766391°N, 95.713246°W)</option>
<option value="M">M - Ricewood MUD (29.822605°N, 95.718169°W)</option>
<option value="N">N - Horsepen Bayou MUD 1 (29.859046°N, 95.611829°W)</option>
</select>
</div>
<div class="well-image-container" id="well-image-container">
<div class="no-selection" id="no-selection">
Select a well from the dropdown above to view its cross section
</div>
<div id="well-content" style="display: none;">
<h4 id="well-title"></h4>
<iframe id="well-pdf" src="" title="Well cross section"></iframe>
<a id="well-pdf-link" href="" target="_blank" class="pdf-link">📄 Open PDF in new tab</a>
<div class="well-info" id="well-info"></div>
</div>
</div>
</div>
</main>
<footer>
<p>Buffalo Bayou Geology Project | <a href="https://github.com/JustinGOSSES/buffalo_bayou_geology" target="_blank">GitHub Repository</a></p>
</footer>
<script>
// Well data with paths and metadata
const wellData = {
'A': {
name: 'West Harris MUD 4',
folder: 'A_29.7128N95.676578W',
lat: 29.7128,
lon: -95.676578,
pdf: 'West Harris MUD 4.pdf'
},
'B': {
name: 'Longhorn Town',
folder: 'B_29.77788N95.686004W',
lat: 29.77788,
lon: -95.686004,
pdf: 'Longhorn Town.pdf'
},
'C': {
name: 'City of South Houston',
folder: 'C_29.664082N95.219818W',
lat: 29.664082,
lon: -95.219818,
pdf: 'City of South Houston.pdf'
},
'D': {
name: 'Air Products 2',
folder: 'D_29.700519N95.069389W',
lat: 29.700519,
lon: -95.069389,
pdf: 'Air Products 2.pdf'
},
'E': {
name: 'City of West University',
folder: 'E_29.715931N95.438271W',
lat: 29.715931,
lon: -95.438271,
pdf: 'City of West University.pdf'
},
'F': {
name: 'City of Houston-Southwest 5',
folder: 'F_29.724131N95.492172W',
lat: 29.724131,
lon: -95.492172,
pdf: 'City of Houston-Southwest 5.pdf'
},
'G': {
name: 'Southwest 3SB',
folder: 'G_29.724932N95.479958W',
lat: 29.724932,
lon: -95.479958,
pdf: 'Southwest 3SB.pdf'
},
'H': {
name: 'Wilcrest Improvement 1',
folder: 'H_29.745001N95.558609W',
lat: 29.745001,
lon: -95.558609,
pdf: 'Wilcrest Improvement 1.pdf'
},
'I': {
name: 'Memorial MUD',
folder: 'I_29.753984N95.7418W',
lat: 29.753984,
lon: -95.7418,
pdf: 'Memorial MUD.pdf'
},
'J': {
name: 'City of Bunker Hill 3',
folder: 'J_29.759125N95.537883W',
lat: 29.759125,
lon: -95.537883,
pdf: 'City of Bunker Hill_3.pdf'
},
'K': {
name: 'Memorial Village',
folder: 'K_29.763786N95.518723W',
lat: 29.763786,
lon: -95.518723,
pdf: 'Memorial Village.pdf'
},
'L': {
name: 'Green Trail MUD',
folder: 'L_29.766391N95.713246W',
lat: 29.766391,
lon: -95.713246,
pdf: 'Green Trail MUD.pdf'
},
'M': {
name: 'Ricewood MUD',
folder: 'M_29.822605N95.718169W',
lat: 29.822605,
lon: -95.718169,
pdf: 'Ricewood MUD.pdf'
},
'N': {
name: 'Horsepen Bayou MUD 1',
folder: 'N_29.859046N95.611829W',
lat: 29.859046,
lon: -95.611829,
pdf: 'Horsepen Bayou MUD 1.pdf'
}
};
function updateWellImage() {
const select = document.getElementById('well-select');
const selectedWell = select.value;
const noSelection = document.getElementById('no-selection');
const wellContent = document.getElementById('well-content');
const wellTitle = document.getElementById('well-title');
const wellPdf = document.getElementById('well-pdf');
const wellPdfLink = document.getElementById('well-pdf-link');
const wellInfo = document.getElementById('well-info');
if (!selectedWell) {
noSelection.style.display = 'flex';
wellContent.style.display = 'none';
return;
}
const well = wellData[selectedWell];
const basePath = `data/well_cross_sections/Water_Wells_Xsections_Lang/${well.folder}`;
const pdfPath = `${basePath}/${well.pdf}`;
noSelection.style.display = 'none';
wellContent.style.display = 'block';
wellTitle.textContent = `Well ${selectedWell}: ${well.name}`;
wellPdf.src = pdfPath;
wellPdfLink.href = pdfPath;
wellInfo.innerHTML = `
<p><strong>Well Name:</strong> ${well.name}</p>
<p><strong>Latitude:</strong> ${well.lat}°N</p>
<p><strong>Longitude:</strong> ${Math.abs(well.lon)}°W</p>
`;
}
// Load the first well on page load
document.addEventListener('DOMContentLoaded', function() {
updateWellImage();
});
</script>
</body>
</html>