Skip to content

Commit 9f67594

Browse files
danielpeterdanielpeter
committed
adds site files
1 parent ace90e8 commit 9f67594

33 files changed

+12536
-1
lines changed

‎README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Earth tomo viewer
2+
3+
![Earth tomo viewer](earth_tomo_viewer.jpg "Earth tomo viewer screenshot")
4+
5+
## Flow animation for tomographic seismic images
6+
7+
This site displays seismic images at a depth of 150 km from different global tomographic models. The flow animation follows the seismic velocity gradient to provide an intuitive visual of the model.
8+
9+
This project is still in a beta version with limited features and capabilities.
10+
The site reads in seismic models, that is tomographic depth slices of shear velocities, as grayscale JPEG-images.
11+
The images have been created so far using the excellent [SubMachine web tool](https://users.earth.ox.ac.uk/~smachine/cgi/index.php?page=tomo_depth)
12+
from Kasra Hosseini.
13+
14+
Once a tomographic depth slice is read in, this project will compute its seismic velocity gradients.
15+
This gradient represents the vector field for the particle animation. Assuming fast velocities (bright gray colors in the original JPEG-image) correspond
16+
to cold mantle material and slow velocities (dark gray) to hot material, the gradient might be similar to a temperature gradient.
17+
Thus, you can think of the particles as being mantle material moving from hot to cold places.
18+
19+
As additional option in the menu on the top right, you can add earthquake locations of all GCMT catalog events between 1976 to 2024 that occurred at a depth between 125 to 175 km. The data file was gathered using the [USGS FDSN event web service](https://earthquake.usgs.gov/fdsnws/event/1/).
20+
21+
The globe model also shows hotspot locations gathered from different sources, and plate boundaries (following Peter Bird's 2002 model) as orientation features.
22+
23+
Now, enjoy the meditation :)
24+
25+
26+
---
27+
28+
## Development
29+
30+
## Idea
31+
32+
This project is highly inspired by Cameron Beccario's [earth.nullschool.net](https://earth.nullschool.net) project.
33+
While his project deals with real-time atmospheric/ocean data, this one here is focussing on seismic models.
34+
Cameron's version is much more sophisticated though.
35+
36+
### Project history
37+
38+
While working together with Elodie Kendall on implementing SGLOBE-rani into SPECFEM3D_GLOBE some years ago, we thought about how to visualize that model in such a way that the seismic anisotropy could reveal itself. That's when I thought it would be cool to see how Cameron's visualization would work on seismic models.
39+
40+
So, I started this project to learn more about javascript and d3 rendering, after trying out other visualizations libraries like
41+
globe.gl and three.js. While globe.gl offered a simple and fast webGL rendering library, I struggled to get the particle animation
42+
running smoothly enough for more than 10,000 particles.
43+
44+
d3 seems to render particles pretty fast to a canvas element, but it's quite a learning curve to get there. What I missed most so far in d3 is a better texture and lightning rendering for the orthographic projection. Thus, the bump map and hillshade effect is calculated explicitly for each pixel - which seems overkill. The main help to render the particle trails was to use the canvas as a history buffer and add a blend composite effect to fade out the old pixels. After learning more about rendering techniques in this project, I might go
45+
back to globe.gl and revisit my code to see if I could further improve that.
46+
47+
## Code setup
48+
49+
For this project, I keep things as simple as possible. In particular, I tried to reduce the dependency on external scripts as much as possible, providing d3 and related scripts in the folder `js/lib`. The main scripts for processing and rendering the seismic images are all in the folder `js/`.
50+
51+
A lot of the model setup is still hard-coded, but in principle you would put your new tomo image into the `data/` folder,
52+
and modify mostly the `vectorField.js` script in the `js/` folder. When time permits, I'll try to make this more automated and recognize any new tomo file in the folder to setup the page correctly. Furthermore, it would be nice to add different depth slices and have a slider to change the depth display.
53+
54+
55+
## Rendering
56+
57+
The rendering is still shaky and there is lots to improve. In particular, the way I handle messaging and state changes in the renderer
58+
are not well thought out. The processing of the image data and texture mapping uses web workers.
59+
This adds multi-threading to this javascript environment, but will only work with newer web browsers.
60+
61+
Furthermore, the code structuring relies on ES6 module capabilities. Thus, it won't be supported on old browsers.
62+
My IIFE's are rudimentary, and most coding style is pretty simple. The rendering uses two canvas elements to separate the bump map and
63+
vector field texturing from the particle animation rendering. On top, I added an SVG element to interact with mouse-over events.
64+
That's just to add a bit of fun, displaying common hotspot locations when you find one :)
65+
66+
Enough blabla, if you have suggestions and/or want to contribute to this project, please feel free to do so - your contributions are very welcome!
67+
68+
-daniel, September 2024

‎data/earth_bumpmap_8192x4096.jpg

1.33 MB
Loading

‎data/geological_hotspots.geojson

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
{
2+
"type": "FeatureCollection",
3+
"features": [
4+
{
5+
"type": "Feature",
6+
"properties": {"name": "Afar"},
7+
"geometry": {"type": "Point", "coordinates": [42.0, 12.0]}
8+
},
9+
{
10+
"type": "Feature",
11+
"properties": {"name": "Yellowstone"},
12+
"geometry": {"type": "Point", "coordinates": [-110.7, 44.4]}
13+
},
14+
{
15+
"type": "Feature",
16+
"properties": {"name": "Azores"},
17+
"_comment": "or [-28.0, 38.7]",
18+
"geometry": {"type": "Point", "coordinates": [-28.0, 38.5]}
19+
},
20+
{
21+
"type": "Feature",
22+
"properties": {"name": "Canary Islands"},
23+
"_comment": "or [-16.6, 28.0]",
24+
"geometry": {"type": "Point", "coordinates": [-16.0, 28.5]}
25+
},
26+
{
27+
"type": "Feature",
28+
"properties": {"name": "Cape Verde"},
29+
"_comment": "or [-24.0, 15.0]",
30+
"geometry": {"type": "Point", "coordinates": [-23.5, 15.0]}
31+
},
32+
{
33+
"type": "Feature",
34+
"properties": {"name": "Bermuda"},
35+
"_comment": "or [-64.75, 32.3]",
36+
"geometry": {"type": "Point", "coordinates": [-64.8, 32.3]}
37+
},
38+
{
39+
"type": "Feature",
40+
"properties": {"name": "Madeira"},
41+
"geometry": {"type": "Point", "coordinates": [-17.0, 32.8]}
42+
},
43+
{
44+
"type": "Feature",
45+
"properties": {"name": "Iceland"},
46+
"_comment": "or [-17.3, 64.4]",
47+
"geometry": {"type": "Point", "coordinates": [-21.9, 64.1]}
48+
},
49+
{
50+
"type": "Feature",
51+
"properties": {"name": "St. Helena"},
52+
"geometry": {"type": "Point", "coordinates": [-5.7, -15.9]}
53+
},
54+
{
55+
"type": "Feature",
56+
"properties": {"name": "Ascension Island"},
57+
"geometry": {"type": "Point", "coordinates": [-14.4, -7.9]}
58+
},
59+
{
60+
"type": "Feature",
61+
"properties": {"name": "Tristan da Cunha"},
62+
"geometry": {"type": "Point", "coordinates": [-12.3, -37.1]}
63+
},
64+
{
65+
"type": "Feature",
66+
"properties": {"name": "Galapagos"},
67+
"geometry": {"type": "Point", "coordinates": [-91.0, -0.5]}
68+
},
69+
{
70+
"type": "Feature",
71+
"properties": {"name": "Hawaii"},
72+
"_comment": "or [-154.6, 20.6]",
73+
"geometry": {"type": "Point", "coordinates": [-155.5, 19.6]}
74+
},
75+
{
76+
"type": "Feature",
77+
"properties": {"name": "Reunion"},
78+
"geometry": {"type": "Point", "coordinates": [55.7, -21.1]}
79+
},
80+
{
81+
"type": "Feature",
82+
"properties": {"name": "Easter Island"},
83+
"_comment": "or [-108.6, -27.0]",
84+
"geometry": {"type": "Point", "coordinates": [-109.4, -27.1]}
85+
},
86+
{
87+
"type": "Feature",
88+
"properties": {"name": "Samoa"},
89+
"_comment": "or [-169.6, -14.0]",
90+
"geometry": {"type": "Point", "coordinates": [-172.1, -13.8]}
91+
},
92+
{
93+
"type": "Feature",
94+
"properties": {"name": "Louisville"},
95+
"_comment": "or [-139.3, -50.1]",
96+
"geometry": {"type": "Point", "coordinates": [-139.0, -50.0]}
97+
},
98+
{
99+
"type": "Feature",
100+
"properties": {"name": "Macdonald"},
101+
"_comment": "or [-140.4, -28.5]",
102+
"geometry": {"type": "Point", "coordinates": [-150.0, -29.0]}
103+
},
104+
{
105+
"type": "Feature",
106+
"properties": {"name": "Kerguelen"},
107+
"geometry": {"type": "Point", "coordinates": [69.5, -49.5]}
108+
},
109+
{
110+
"type": "Feature",
111+
"properties": {"name": "Caroline Islands"},
112+
"_comment": "or [164.0, 5.2]",
113+
"geometry": {"type": "Point", "coordinates": [151.0, 7.5]}
114+
},
115+
{
116+
"type": "Feature",
117+
"properties": {"name": "Bouvet"},
118+
"geometry": {"type": "Point", "coordinates": [1.0, -54.5]}
119+
},
120+
{
121+
"type": "Feature",
122+
"properties": {"name": "Bowie"},
123+
"geometry": {"type": "Point", "coordinates": [-135.6, 53.5]}
124+
},
125+
{
126+
"type": "Feature",
127+
"properties": {"name": "Cobb"},
128+
"geometry": {"type": "Point", "coordinates": [-130.0, 46.0]}
129+
},
130+
{
131+
"type": "Feature",
132+
"properties": {"name": "Guadalupe"},
133+
"geometry": {"type": "Point", "coordinates": [-117.3, 29.0]}
134+
},
135+
{
136+
"type": "Feature",
137+
"properties": {"name": "Pitcairn"},
138+
"geometry": {"type": "Point", "coordinates": [-128.4, -24.7]}
139+
},
140+
{
141+
"type": "Feature",
142+
"properties": {"name": "Socorro"},
143+
"geometry": {"type": "Point", "coordinates": [-111.0, 19.1]}
144+
},
145+
{
146+
"type": "Feature",
147+
"properties": {"name": "Tahiti"},
148+
"geometry": {"type": "Point", "coordinates": [-148.1, -17.7]}
149+
}
150+
]
151+
}

0 commit comments

Comments
 (0)