19
$\begingroup$

I probably spent half a day figuring out how to make each of the GIFs shown below. It was gratifying as is all of my procrastinatory behavior here in Stack Exchange, but the reason it was done like this is because we have no way to embed 3D objects in SE posts in a way that viewers can rotate them interactively.

What are ways that we could come at least close?

Are there viewers were we could put 3D objects by uploading files or scripts and link to here that would be internet friendly for viewers, e.g. not require downloading software or gigabit per second connections?

The more options the better, I'm hoping for multiple answers!

GIFs (not viewable if you have animation blockers turned on in your browser)

animation of the Voyagers trajectories in 3D

above: from How well can Voyager 1 separate Earth signals from Solar noise these days?

below: from Kathleen Howell's classic paper Three-Dimensional, Periodic 'Halo' Orbits Celestial Mechanics 32 (1984) 53-71) cited in How to best think of the State Transition Matrix, and how to use it to find periodic Halo orbits?

in which I think I have have L1 and L2 incorrectly labeled but am unwilling to fix them because of the lengthy, arduous and hackish way I'd made the GIF.

some halo orbits

How to keep axis labels from flip-flopping as azimuth scans past an axis direction (matplotlib)? (currently unanswered)

$\endgroup$
4
  • 3
    $\begingroup$ Such a GIF has an advantage over a 3D viewer or a full-blown mathematica or jupyter notebook: the author needn't depend on the reader's interaction to get a message across. "From what angle should I be looking at this?" "Did I zoom in too far?" $\endgroup$
    – Camille Goudeseune
    Commented Dec 2, 2020 at 22:24
  • $\begingroup$ @CamilleGoudeseune that's a very good point. It's true that I stop and thunk about it and chose the way I thought best for illustrating the key points. Disadvantage is that these took a long time to script because I was working in the dark so to speak; I don't make animations regularly so I had to start from scratch. Most people wouldn't spend a day just to make a plot for a Stack Exchange answer, so readily available tools (even if a Python matplotlib to GIF animator) would increase the number of questions and answers which included these. $\endgroup$
    – uhoh
    Commented Dec 2, 2020 at 22:50
  • 1
    $\begingroup$ with some questions, one only has to read the title and first sentence and one immediately knows who the author is ;-) SciChart looks pretty cool. And is VRML still around? It seems to have turned into "X3D"... $\endgroup$
    – Aaron F
    Commented Dec 2, 2020 at 23:24
  • 2
    $\begingroup$ @AaronF moi? :-) $\endgroup$
    – uhoh
    Commented Dec 2, 2020 at 23:49

3 Answers 3

Reset to default
6
$\begingroup$

My go-to plotting method is Plotly, which generates amazing, interactive* figures in 3D and 2D. The resulting figures are either hosted on Plotly's web page, or in the form of an HTML file on your computer which you can open in any browser**.

When you upload a plot to chart studio, you can easily share a link to that figure. They also provide you with embed links (an iframe or an html div), but neither of those are supported on Stack Overflow. If you go the HTML file route instead of hosting online, you can you could upload that file and share a download link, but that's kind of annoying as you have to find a way to host it and everyone else needs to be comfortable downloading a file from you...

So, I don't know. In the past I've shared a static image of my plotly figures, then provided a link to the Plotly website where it is hosted, which is a decent compromise. A downside of this, though, is that the Plotly free tier only allows X amount of views per day, so it's certainly possible that viewers cannot access your link***. Alternatively, you can host your plotly figure on your own website... but then you need to host a website.

Example of my approach. Here's a figure. enter image description here

And here's a link to Plotly where's it's hosted.
https://chart-studio.plotly.com/~mbolliger/13

* These are interactive in the sense that you can get information through customizable plot elements on hover, add dropdown menus menus and sliders, toggle trace visibility, zoom, orbit, and pan in 3D/2D space, all through the browser. The simplest version of these plots does NOT allow callback functions like matplotlib, though the functionality is possible.

** You can also view the figs in an interactive python window like Jupyter if you don't want to save a figure.

*** Another potential drawback: when you plot stuff in plotly, the underlying data exists in the div and/or HTML file (I don't really understand HTML). Usually this isn't a problem, but if for some reason you don't want people to access the actual data, you should avoid this approach.

$\endgroup$
3
  • $\begingroup$ Excellent, thanks for your post! In matplotlib I like to use widgets like sliders and radio buttons so I can recalculate a plot. Imagine if for example if $\mu$ could be assigned a slider and the variation of the orbits with mass ratio could be explored. That might be a little computation heavy in this case of course but is that the kind of thing you are referring to when you mentioned callbacks? $\endgroup$
    – uhoh
    Commented Nov 30, 2020 at 21:48
  • 1
    $\begingroup$ @uhoh Yep, that's exactly what I mean. Plotly does have sliders and dropdowns, so you could do exactly what you're talking about with the mu value changing. But you would have to do all the computation ahead of time for a predetermined set of mu values, and then plotting is mostly a matter of toggling the appropriate elements on or off via the slider or other buttons. Still useful, but not "interactive" in the strictest sense. But, like I mentioned, that more advanced functionality does exist in Plotly. Though I think it requires Jupyter: plotly.com/python/#jupyter-widgets $\endgroup$
    – Matt B
    Commented Dec 3, 2020 at 16:24
  • $\begingroup$ Okay I see what you meant, the whole thing must contain all its plottable data, not just methods that can produce it. I will take a look, $\endgroup$
    – uhoh
    Commented Dec 3, 2020 at 23:41
4
$\begingroup$

Cesium.js is a Javascript library designed for visualizing dynamic geospatial data in 3D. It was developped by the same team that developped AGI's STK software. The library is free to use and is very rich in content.

Sandcastle is Cesium's IDE-in-a-webpage where people can test their code and visualize the results.

One of the recommended ways to use the library is to feed in czml files. A czml file is a json-like file (i.e. using key value notation) that can store any type of geospatial information, as wel as attributes to set some of the visualization settings.

To share those czml files and some simple Javascript code to consume it, those files would normally need to be served through a webpage, because Sandcastle is fully web-based and will not accept static import of files.

However, we can take advantage of a good feature in Cesium that allows to "drag-and-drop" czml files in Sandcastle, by first pasting some very basic sample code. I will try to give a quick list of instructions below, to visualize orbits around the Earth. Note that Cesium is best and most quickly used to view any data in 3D under, on, in, and above the Earth. I think it would not be a good candidate for Halo orbits, Earth-Moon orbits, or even Heliosynchronous orbits.

  1. Visit the Sandcastle page
  2. In the empty section titled "Javascript code", please paste the small code snippet below. This will allow the "drag-and-drop" functionality. Then, click the Run button towards the top left. The page will refresh, but no other noticeable changes will take place. The code however will be running at the background, waiting for a file to be dropped.
// Add basic drag and drop support and pop up an alert window on error.
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerDragDropMixin);
viewer.dropError.addEventListener(function(viewerArg, source, error) {
    window.alert('Error processing ' + source + ':' + error);
});
  1. Now let's get a sample czml file. Please go to this Github webpage of Cesium and download (copy/paste) the contents of the showed file on your computer and name it with a .czml extension. The file can be opened then with any text editor.
  2. Drag and drop the file that you downloaded on the Sandcastle window that shows the globe. The "viewer" of Cesium will consume the data in the file and will show you three satellites and their visibility access times visualized with line-of-sight lines.

enter image description here

I could provide more information if you would like more details. The problem of visualization is then pushed to learning the czml notation, and also how to share the czml. Sharing through github could be an option. Learning of Cesium is worth the time and effort if visualizations is a common task for you. There are many other Javascript libraries like Leaflet, Plotly, HighCharts, and so much more. I find that Cesium might offer the ease of use for sharability, with minimal knowledge for coding, to get started. It can eventually get really complex, for more complex visualizations.

I hope this is helpful! Manny

$\endgroup$
0
2
$\begingroup$

Since you can code in Python, I suggest taking a look at SageMath which is built on top of Python, and can do various 2D plotting (via matplotlib) & interactive 3D plotting. It's not perfect, but it does have an interesting feature: small Sage scripts can be encoded into a URL that runs on a SageMathCell server, so they don't have to be hosted anywhere.

$\endgroup$
5
  • $\begingroup$ Here's a brief example from the docs that I just modified slightly. It seems to work ok on my Android phone. Two linked tori $\endgroup$
    – PM 2Ring
    Commented Dec 8, 2020 at 19:51
  • 1
    $\begingroup$ Yes, thank you very much! I know we talked about this a few weeks ago(?) but I could not figure out where/when nor how to search old comment conversations to find it. I really want to try this soon. (Note to self, try this asap!) $\endgroup$
    – uhoh
    Commented Dec 9, 2020 at 0:19
  • 1
    $\begingroup$ No worries. I've recently posted SageMathCell links (and graphs produced using them) in my answers on Astronomy (eg, that question about the direction of sunrise) & Physics. $\endgroup$
    – PM 2Ring
    Commented Dec 9, 2020 at 0:27
  • $\begingroup$ I work very hard to hide this fact but my brain is homologous to scrambled eggs; can you help me find those? $\endgroup$
    – uhoh
    Commented Dec 9, 2020 at 0:34
  • 2
    $\begingroup$ :) astronomy.stackexchange.com/a/39685/16685 & astronomy.stackexchange.com/a/40243/16685 & physics.stackexchange.com/a/595175/123208 & physics.stackexchange.com/a/595082/123208 The Sage docs are a little chaotic, but there are various caches of example scripts that turn up in Google searches. $\endgroup$
    – PM 2Ring
    Commented Dec 9, 2020 at 0:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .