Hi,
I’m totally new to Observable, and it is my first attempt to do something.
I’d like to display on the Earth globe of Versor Dragging the thermohaline ocean circulation (cf File:Thermohaline circulation.png - Wikiversity).
Could somebody tell me how to draw arcs that would move with the globe when it is dragged.
Jean
1 Like
Hi @jrichelle!
Will the focus of your notebook be to display the circulation, or to implement the dragging? If it’s the former, you may want to use mapbox-gl’s globe projection. Alternatively you could use three.js along with its OrbitControls plugin.
Happy to go into more detail if you have questions about either!
The easiest thing to do would probably be to use a 3D library with image texturing. Here’s one example that uses the image you refer to:
I’m sure mootari is right, though, that you could make something really nice with mapbox.
Hi @mootari ,
Thank you very much for your answer and suggestion.
The focus of my notebook is to display the circulation with dragging ability.
Could you please point me to some examples of using mapbox-gl (with globe projection, if possible)?
I have been playing with the X3Dom solution proposed by @mcmcclur, I could find my way to start adapting it.
I would like to find the best solution : efficient and portable ; I’ll probably explore mapbox and/or three.js.
Hi @mcmcclur,
Thank you very much for your answer and suggestion.
The “Textured globe” notebook gives a easy solution to my problem and I started to play with it.
Could you tell me what would be the advantage(s) of using mapbox ?
I faced two (small) problems with the X3Dom solution : 1. the globe never appears when I use Brave as browser (but it is OK with Firefox); 2. the globe remains black if the texturing image is located on a personal web server (the url I use for ImageTexture gives the image if I feed it to the browser).
1 Like
Advantages:
- Mapbox has a large community doing a lot of great things with it.
- It’s just beautiful: Create a rotating globe | Mapbox GL JS | Mapbox
Disadvantage:
- It would be a lot more work than the textured image approach.
- It’s not free, though you get 50000 a month before you need to pay for it.
- Are you sure you’re loading it from a web server? Or are you just opening the file directly from your web browser? The problem you describe sounds like the latter, in which case you’re running into a cross-origin file problem, which is easy to fix by running it on a local web server.
I have
<ImageTexture url=‘https://www.richelle-gama.org/antarctica/Thermohaline_Circulation_alt-v1.png’ /> ; woudn’t it be loading form the web server ?
It’s not just a question of where the image is stored but the relationship between the image location and the web page location. If you’re trying to access that image from code within Observable, then you’re probably going to get an error, unless your server is specifically set up to allow cross-origin access. There are a few ways around this issue, the easiest of which is probably to use a CORS proxy. I added a section to my Textured globe notebook to explain the options.
Thank you very much for your very clear explanation : by reading it I remembered having read about cross-origin access (when using the XMLHttpRequest).
I could implement your solution using a proxy.
I’m effectively planning to install everything together on a server. But for the moment it’s nice to have it working with some images in a different location.
I hope to use this module for a vulgarisation web site about research on antarctica ice, its role on the climate and what it tells about past climate. Thank you for your help.
1 Like
One more question : how did you get the values for the attributes “position” and “orientation” of <Viewpoint> ?
When the 3D scene is in focus, press the D key (which brings up debugging information) and then the V key (which prepends the viewpoint to the debugging information).
While it works OK, the notebook is not the ideal environment for this interaction. You might find it easier to get the viewpoint from the cell’s embed URL.
If you do continue to use this X3Dom, you might find it useful to check out the first few tutorials, which cover some other tips for interaction as well.
Looks like @mcmcclur got you covered! 
One thing that I might add to Mark’s example is that you’ll probably want to switch to <navigationinfo type=turntable> so that one axis always remains upright.
Edit: And you can double the mesh resolution (i.e., make the sphere less “blocky”) by adding the attribute subdivision="48,48" to <sphere>.
1 Like
Very nice, very helpful, very useful : thank you to both of you !
Another point : I downloaded the module into my web server (and it works pretty well).
Is it possible to avoid displaying the value of the variable defined by a cell (e.g. through a select button) ?
1 Like
Yes, definitely. I usually do so by using d3 to modify the displayed input. Do you have a specific notebook you’re trying to do this with?
I’m working on this notebook : Thermohaline circulation / Jean Richelle / Observable.