-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
574 lines (565 loc) · 26.7 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<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=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Metal+Mania&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="scroller.css" />
<script src="https://unpkg.com/scrollama"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<title>Chrysomallon squamiferum</title>
</head>
<body>
<div id="title">
<h1>Chrysomallon squamiferum:</h1>
<h2>The scaly-foot snail</h2>
<div>
Final project for <i>Deep Sea Biology</i> (BIOL 4030), Prof. Heather
Olins, Summer 2024, Boston College
</div>
</div>
<section id="introduction">
<h2>Introduction</h2>
<p>
To my peer reviewers: please view this webpage in a separate tab, and
please take a look at the Google Doc writeup
<a
href="https://docs.google.com/document/d/1jmN9nGiNyrjOmKFIRt9zKTuZZVSkZ0t5nNfVVOIXvso/edit?usp=sharing"
>here</a
>.
</p>
<p>
<i>Chrysomallon squamiferum</i> or the scaly-foot snail is a gastropod
found at hydrothermal vents on the ocean floor. What makes it so unique
are the overlapping (“imbricating”) scales or <b>sclerites</b> on its
foot, which are novel structures evolutionarily unrelated to the
gastropod operculum or the superficially similar sclerites of chitons
(<a href="https://doi.org/10.1111/bij.12462">Chen et al. 2015</a>).
Moreover, the <i>C. squamiferum</i> sclerites are composed of iron
sulfides—greigite and pyrite (“fool’s gold”)—which makes the scaly-foot
snail the only known animal to carry out biomineralization using sulfur
instead of oxygen (<a href="https://doi.org/10.1073%2Fpnas.1908533116"
>Okada et al. 2019</a
>). This is one <span class="metal">METAL</span> snail.
</p>
<p>
The scaly foot snail is also notable in that it relies on a symbiotic
relationship with bacteria for nutrition. On the ocean bottom, there are
only a few sources of energy including scarce amounts of food that sinks
from above and hydrothermal vents around the mid-ocean ridges. The
scaly-foot snail hosts chemosynthetic bacteria—bacteria capable of
deriving energy from the toxic chemical soup from hydrothermal vents to
make organic molecules—within the cells lining its esophageal pouch,
with modifications to its anatomy to better deliver molecular
ingredients to its <b>endosymbionts</b>.
</p>
<p>
On this webpage, you’ll find some of the coolest details that I’ve found
this semester about the scaly-foot snail, delivered in a
“scrollytelling” format. Just scroll down to see the figures change!
</p>
</section>
<section id="anatomy" class="scrolly-section">
<div class="scroller">
<div class="sticky-container">
<h2>Anatomy</h2>
<p>
Keep scrolling to learn about some of the scaly-foot snail's amazing
anatomical features.
</p>
<div class="img-stack">
<img id="base" src="images/Csq_base.png" />
<img class="layer" id="scales" src="images/Csq_scales.png" />
<img class="layer" id="shell" src="images/Csq_shell.png" />
<img class="layer" id="nervous" src="images/Csq_nervous.png" />
<img
class="layer"
id="circulatory"
src="images/Csq_circulatory.png"
/>
</div>
</div>
<div class="steps">
<div class="step" data-step="anat_a">
<p>
This is a scaly-foot snail from the Kairei hydrothermal vent field
(<a
href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0032965"
>Nakamura et al. 2012</a
>) in the Indian Ocean. Though it's only about 4.5 cm (almost 2
inches) in length, it is gigantic for Peltospiridae, the family of
deep-sea snails to which it belongs—most Peltospirids reach only
about 1–1.5 cm in length. This represents a 10–50 fold increase in
body volume (<a href="https://doi.org/10.1186/s12862-017-0917-z"
>Chen et al. 2017</a
>)!
</p>
</div>
<div class="step" data-step="anat_b">
<p>
Perhaps the most distinctive feature of the scaly-foot snail is
the armor-like sclerites covering its foot. As mentioned, they are
composed of iron sulfides, making the scaly-foot snail the only
known organism to use sulfur instead of oxygen for
biomineralization. The sclerites are constructed by the controlled
extrusion of disulfide anions through microscopic channels in the
calcium carbonate underlayer of the sclerite—the disulfide anions
meet iron cations at the surface of the sclerite, and form an iron
sulfide layer (<a href="https://doi.org/10.1073%2Fpnas.1908533116"
>Okada et al. 2019</a
>).
</p>
</div>
<div class="step" data-step="anat_c">
<p>
The shell of the scaly-foot snail comes in a novel triple-layer
structure. It has a rigid aragonite inner layer and a
proteinaceous periostracum layer on top like most shelled
molluscs, but the periostracum is exceedingly thick and, like the
sclerites, covered by an iron sulfide outer layer. This
triple-layer construction gives the shell of the scaly-foot snail
a unique resilience, with the thick, elastic periostracum layer
stopping any stress fractures (e.g. from a crab) on the iron
sulfide layer from spreading to the inner aragonite layer (<a
href="https://doi.org/10.1073/pnas.0912988107"
>Yao et al. 2010</a
>).
</p>
</div>
<div class="step" data-step="anat_d">
<p>
The nervous system of the scaly-foot snail is large but reduced in
complexity in comparison to other gastropods in its order
(Neomphalida). It has no clear structure, with no brain or ganglia
(discrete units of neurons separated by regions without any
cells), nor eyes or any other obvious sensory nervous structures
on its head—the only notable sensory organ is the pair of
statocysts, or balance organs, embedded in its body (<a
href="https://doi.org/10.1186/s12983-015-0105-1"
>Chen et al. 2015</a
>). The scaly-foot snail is big, robust, but dumb, kind of like
the Hulk!
</p>
</div>
<div class="step" data-step="anat_e">
<p>
The scaly-foot snail has a gill (“ctenidium”) that covers much of
the space in its shell, and an enormous heart that would be
approximately the size of our heads in human scale—<a
href="https://doi.org/10.1186/s12983-015-0105-1"
>Chen et al. (2015)</a
>
likens it to the “heart of a dragon”! Combined with gigantism, an
increased circulatory capacity is commonly observed in
chemosymbiotic organisms at hydrothermal vents (<a
href="https://doi.org/10.1242/jeb.049023"
>Childress & Girguis 2011</a
>), and is likely an adaptation to keep the endosymbiont bacteria,
who ultimately sustain the snail, well-supplied with chemicals
from the vent.
</p>
</div>
<div class="step" data-step="anat_f">▽ ▽ ▽</div>
</div>
</div>
</section>
<section id="endosymbiosis">
<div class="scroller">
<div class="sticky-container">
<h2>Endosymbiosis</h2>
<div class="img-stack">
<img id="watercolumn" src="images/watercolumn.png" />
<img class="layer" id="zones" src="images/watercolumn_zones.png" />
<img
class="layer"
id="phyto"
src="images/watercolumn_phytoplankton.png"
/>
<img
class="layer"
id="carbon"
src="images/watercolumn_carbon.png"
/>
<img class="layer" id="snail" src="images/watercolumn_snail.png" />
</div>
</div>
<div class="steps">
<!--you don't need the "data-step" attr, but can be useful for storing instructions for JS -->
<div class="step" data-step="wc_a">
<p>
The water column in the ocean can be divided into zones based on
the available light levels. The top 200m of the water column is
the <b>euphotic zone</b>, in which there is enough sunlight for
photosynthesis to occur. From 200m to 1000m is the
<b>dysphotic zone</b>, in which there is not enough sunlight for
photosynthesis but just enough that some organisms, often with
large, modified eyes, can see. Below 1000m is the
<b>aphotic zone</b>, which no sunlight reaches at all.
</p>
</div>
<div class="step" data-step="wc_b">
<p>
All animals are <b>heterotrophs</b>, meaning they cannot simply
ingest inorganic carbon (CO<sub>2</sub>) and turn it into organic
molecules, like glucose, necessary for bodily functions. Instead,
they must rely on (i.e. eat) the carbon fixed by
<b>primary producers</b>, which are organisms that can convert
CO<sub>2</sub> into organic molecules.
</p>
<p>
The vast majority of the organic carbon in the ocean is fixed in
the euphotic zone by <b>photoautotrophs</b> like algae and
phytoplankton, and travels through the food web to the largest of
predators (including us humans, when we enjoy a shrimp cocktail or
a tuna sandwich).
</p>
</div>
<div class="step" data-step="wc_c">
<p>
As we dive deeper into the water column, the amount of available
organic carbon shrinks dramatically. Most of the organic carbon
fixed in the euphotic zone is consumed in the euphotic and
dysphotic zones, and, in fact, less than 1% of the total carbon
fixed in the euphotic zone actually reaches the ocean bottom! This
makes the <b>benthos</b>—the ocean floor—an extremely food-starved
habitat. So how does the scaly-foot snail make do on the benthos?
</p>
</div>
<div class="step" data-step="wc_d">
<p>
The answer is symbiosis with <b>chemoautotrophs</b>! The
scaly-foot snail hosts, within the cells of its esophagus,
bacteria which can fix CO<sub>2</sub> into organic molecules by
harnessing the energy from the oxidation of sulfur, abundant in
the plumes of hydrothermal vents, rather than sunlight in a
process called <b>chemosynthesis</b>.
</p>
<p>
In exchange for safety from grazers and a guaranteed supply of raw
materials in the comfort of the scaly-foot snail’s cells, the
bacteria provide sugars, amino acids, and vitamins that the
scaly-foot snail cannot produce on its own (<a
href="https://doi.org/10.1038/s41467-021-21450-7"
>Lan et al. 2021</a
>), in addition to the disulfide anion needed for the iron sulfide
layer of the snail’s shell and sclerites.
</p>
</div>
<div class="step" data-step="wc_e">▽ ▽ ▽</div>
</div>
</div>
</section>
<section id="discovering">
<div class="scroller">
<div class="sticky-container">
<h2>Where are scaly-foot snails found?</h2>
<div id="map"></div>
<div class="circle" id="kairei"></div>
<div class="circle" id="longqi"></div>
<div class="circle" id="solitaire"></div>
</div>
<div class="steps">
<!--you don't need the "data-step" attr, but can be useful for storing instructions for JS -->
<div class="step" data-step="map_a">
<p>
A <b>mid-ocean ridge</b> is a seafloor mountain system where magma
rises through a crack in the oceanic crust and hardens into dense
basalt. Over geologic time, the creation of new oceanic crust at
the mid-ocean ridge displaces existing oceanic crust, contributing
to plate tectonics.
</p>
<p>
The Indian Ocean, where the scaly-foot snail is found, is
criss-crossed with four mid-ocean ridges: the Carlsberg Ridge,
Central Indian Ridge, the South West Indian Ridge, and the South
East Indian Ridge.
</p>
</div>
<div class="step" data-step="map_b">
<p>
As seawater percolates into the rock at a mid-ocean ridge, it is
heated by the magma below, picks up dissolved minerals like iron,
copper, and sulfur, and is expelled in a thick black plume through
a hydrothermal vent. The mineral-rich vent plumes sustain
chemoautotrophs like the endosymbiotic bacteria of the scaly-foot
snail. The Indian Ocean hosts 13 confirmed hydrothermal vents (<a
href="https://doi.org/10.3389/fmars.2022.1067912"
>van der Most et al. 2021</a
>).
</p>
</div>
<div class="step" data-step="map_c">
<p>
Scaly-foot snails were first discovered in the Kairei vent field
at the Rodrigues Triple Junction in 2001 (<a
href="https://doi.org/10.1126/science.1064574"
>Van Dover et al. 2001</a
>). Another population was discovered farther north in 2009 at the
Solitaire vent field (<a
href="https://doi.org/10.1371%2Fjournal.pone.0032965"
>Nakamura et al. 2012</a
>), and to the southwest on the Longqi vent field in 2011 (<a
href="https://doi.org/10.1093/mollus/eyv013"
>Chen et al. 2015</a
>). This means that only three populations of the scaly-foot snail
are known.
</p>
</div>
<div class="step" data-step="map_d">
<p>
The Solitaire vent population is remarkable in that it does not
have the typical black iron sulfide armor found at the Kairei and
Longqi vents. The absence of an iron sulfide layer is likely due
to the fact that the iron concentration at the Solitaire vent
field is only 60μM—while it is still double the average iron
concentration of the sub-equatorial Indian Ocean (27μM;
<a href="https://doi.org/10.1016/j.marchem.2018.11.007"
>Chinni et al. 2019</a
>), it is still only 1/58th of the concentration at Kairei vent
field (<a href="https://doi.org/10.1073/pnas.1908533116"
>Okada et al. 2019</a
>)!
<img
class="step-img"
src="images/Chrysomallon_squamiferum_3.png"
/>
</p>
</div>
<div class="step" data-step="map_e">
<p>
Despite the significantly different appearance of the Solitaire
population, genetic studies show that the Kairei and Solitaire
populations are genetically indistinct from each other (<i>p</i> =
0.576) but significantly different (<i>p</i> < 0.001) from the
far-off Longqi population (<a
href="https://doi.org/10.1007/s13127-015-0224-8"
>Chen et al. 2015</a
>). This implies that the scaly-foot snail has a limited dispersal
range, further supported by evidence that the scaly-foot snail’s
eggs are negatively buoyant (<a
href="https://doi.org/10.1371/journal.pone.0081570"
>Beedessee 2013</a
>), preventing larva from floating long distances to colonize new
vents.
</p>
<p>
This is significant because China and Germany have been granted
exploratory licenses to investigate mining Longqi and Kairei vent
fields, respectively, for <b>massive sulfide deposits</b> by the
U.N. International Seabed Authority. If the Longqi vent population
were to be wiped out by the destruction of hydrothermal vents, it
is unlikely that larva from other populations could resettle the
vent field once the vent stacks recovered (if at all), and the
genetic differences may hamper their survival. And the eradication
of the Kairei vent population would effectively halve the eastern
range of the scaly foot snail. The scaly-foot snail was officially
registered as an Endangered Species in 2018 after a successful
lobbying effort by Julia Sigwart and Chong Chen, two scientists
studying the scaly-foot snail (<a
href="https://dx.doi.org/10.2305/IUCN.UK.2019-2.RLTS.T103636217A103636261.en"
>Sigwart & Chen 2018</a
>).
</p>
</div>
<div class="step" data-step="map_f">▽ ▽ ▽</div>
</div>
</div>
</section>
<section id="sclerite">
<div class="scroller">
<div class="sticky-container">
<h2>What don't we know?</h2>
<div class="img-stack">
<img id="sclerite_base" src="images/sclerite_base.png" />
<img
class="layer"
id="sclerite_sulfur"
src="images/sclerite_sulfur.png"
/>
<img
class="layer"
id="sclerite_bacteria"
src="images/sclerite_bacteria.png"
/>
<img
class="layer"
id="sclerite_iron"
src="images/sclerite_iron.png"
/>
<img
class="layer"
id="sclerite_delta"
src="images/sclerite_delta.png"
/>
<img
class="layer"
id="sclerite_compare"
src="images/sclerite_compare.png"
/>
<img
class="layer"
id="sclerite_final"
src="images/sclerite_final.png"
/>
</div>
</div>
<div class="steps">
<!--you don't need the "data-step" attr, but can be useful for storing instructions for JS -->
<div class="step" data-step="sclerite_a">
<p>
In the last two decades, much of the attention on the scaly-foot
snail has been focused on its unique biomineralization.
</p>
<p>
From studying its anatomy, we now know that it is the only known
animal to carry out biomineralization with sulfur, rather than
oxygen, and that it carries out such biomineralization by
extruding, through microscopic channels, streams of disulfide
anions to bind with iron cations to form a layer of iron sulfide
on the outside (<a href="https://doi.org/10.1073/pnas.1908533116"
>Okada et al. 2019</a
>).
</p>
</div>
<div class="step" data-step="sclerite_b">
<p>
From studying the ecology of the scaly-foot snail, we know that
the disulfide anions are produced as byproducts of chemosynthesis
from endosymbiotic bacteria (<a
href="https://doi.org/10.1038/s41467-021-21450-7"
>Lan et al. 2021</a
>).
</p>
</div>
<div class="step" data-step="sclerite_c">
<p>
Finally, from studying the populations of the scaly-foot snail, we
know that environmental concentrations of iron is important. In
iron-poor environments like the Solitaire vent field, the
scaly-foot snail will not create iron sulfides at all, while the
genetically indistinct Kairei population easily creates a layer
(<a href="Nakamura">Nakamura et al. 2009</a>).
</p>
</div>
<div class="step" data-step="sclerite_d">
<p>
What is still unknown is whether the iron cations come directly
from the diffuse flows around the hydrothermal vent, or if it is
biologically mediated.
<a href="https://doi.org/10.1128/AEM.70.5.3082-3090.2004"
>Goffredi et al. (2004)</a
>
suggest that, owing to the abundance of certain types of bacteria
on the surface of the sclerites that bacteria mediate the
provision of iron cations;
<a href="https://doi.org/10.1073/pnas.1908533116"
>Okada et al. (2019)</a
>
instead offer that the disulfide ions directly come in direct
contact with iron cations in the diffuse flow.
</p>
<p>
This is a small but important step in the synthesis of iron
sulfide because, currently, no cost-effective method of
synthesizing metal sulfide nanoparticles exists (<a
href="https://doi.org/10.1016/j.actbio.2023.03.005"
>Yamashita et al. 2023</a
>). A method allied with bacteria could potentially be the
solution to a cheaper manufacture of solar panels.
</p>
</div>
<div class="step" data-step="sclerite_e">
<p>
The question of whether iron cations are provided passively by the
vent plume or actively mediated by bacteria can be answered by
comparing <b>iron isotope fractionation patterns</b>—the
maintained ratio of iron isotopes—of the surface bacteria, the
vent plume, and the iron sulfide layer of the shell and sclerites.
</p>
<p>
Organisms, especially bacteria, tend to modulate the isotopic
ratios in its metabolites (e.g.
<a href="https://doi.org/10.1016/j.gca.2010.02.017"
>Kappler et al. 2010</a
>), and hydrothermal vents tend to vary in isotope composition
even within the same vent field (<a
href="https://doi.org/10.1016/j.chemgeo.2017.11.005"
>Nasemann et al. 2018</a
>). Therefore, if the iron isotope fractionation of the iron
sulfide layer agrees the bacterial iron isotope fractionation and
disagrees with the vent plume iron isotope fractionation, then we
have evidence to conclude that the introduction of iron cations
involves biological mediation in the form of bacteria. A detailed
experiment plan is available
<a
href="https://docs.google.com/document/d/1rqH6huRdX862_IoKUWe9oxn6zHSgYBmWnzWSi2KePnA/edit?usp=sharing"
>here</a
>.
</p>
</div>
<div class="step" data-step="sclerite_f">
<p>
Yet other unknowns exist, including what the complete life cycle
of the scaly-foot snail looks like—we do not know what its larval
stages look like, nor how it spread from vent to vent in the first
place, though we know that its range is quite limited following
genetic studies. Further, we do not know how sensitive it is to
temperature, given that it must stay within a narrow range of
plume water to feed its endosymbionts, and how environmental
toxins, like ones released by deep-sea mining, affect it, given
its prodigious circulatory system.
</p>
<p>
These open questions all require prolonged in situ observation,
collection, and documentation, which is made difficult by the fact
that HOV and ROV dives are time-limited and contingent on weather
conditions. All the more reason to protect the scaly-foot snail
until we can answer all these questions... then come up with even
more questions!
</p>
</div>
<div class="step" data-step="sclerite-g">▽ ▽ ▽</div>
</div>
</div>
</section>
<section>
<div class="scroller">
<h2>Notes</h2>
<p>
This page was made with
<a href="https://github.com/russellsamora/scrollama">Scrollama.js</a>
for the scrollytelling mechanism,
<a href="https://leafletjs.com/">Leaflet.js</a> for the dynamic map,
and <a href="https://www.gimp.org/">GIMP</a> for all graphics. I
relied on this excellent tutorial video [<a
href="https://www.youtube.com/watch?v=d7wTA9F-l8c"
>1</a
>] for Scrollama.
</p>
</div>
</section>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="script.js"></script>
</body>
</html>