mllam / weather-model-graphs

Tooling for creating, visualising and storing data-driven weather-model graphs
https://join.slack.com/t/ml-lam/shared_invite/zt-2t112zvm8-Vt6aBvhX7nYa6Kbj_LkCBQ
7 stars 8 forks source link

3D plots for graphs #20

Open sadamov opened 2 months ago

sadamov commented 2 months ago

Title: Add 3D Graph Plotting Functionality Using Plotly

Description: We should add functionality to visualize the graph structures in 3D using Plotly. This will help in better understanding the spatial relationships between nodes and edges in our graph-based neural weather prediction models.

Tasks:

  1. Implement a function to plot the graph structure in 3D using Plotly.
  2. The function should support both hierarchical and non-hierarchical graphs.
  3. Add options to save the plot as an interactive HTML file and to toggle axis visibility.
  4. Ensure that the function can handle different types of edges (e.g., M2G, G2M, M2M) with distinct colors and line widths.
  5. Integrate the function into the existing codebase, ensuring compatibility with the current graph data structures.

Example: https://github.com/mllam/neural-lam/blob/5b71be3c68d815e0e376ee651c14f09d801f86de/plot_graph.py

Challenges: The html files can easily be >100MB in size, crashing most browsers. We might need to implement some performance/size tricks to prevent this.

Surplus: 3D objects could be rendered for Blender, which supports a Python-like DSL as a backend. This would allows us to benefit from all the 3D modeling techniques (e.g. shaders) for even nicer looking graphs.

leifdenby commented 1 month ago

The html files can easily be >100MB in size, crashing most browsers. We might need to implement some performance/size tricks to prevent this.

Would this also be the case if using panel to create a python application within which the serialisation into the HTML to allow plotly to do the rendering is handle by panel? It might be that they have worked out some smart way of doing this :) I think they don't actually create a static rendering into html, but instead the webpage directly requests the data from the running python application which exposes a webserver. I.e. I am suggesting to not generate static html, but instead create a visualisation application which can be started with for example:

python -m weather_model_graphs.viz --interactive graph_file.pickle

obviously this require writing the graph to some serialised format which we can't currently do, but we could start by pickling the nx.Graph object. That might be an easy starting point? :)

joeloskarsson commented 1 month ago

A note about this challenge: The standard behavior in plotly, and used in the neural-lam script linked, is to set up a web server that serves an interactive plotting application. I do however not know if this just creates a static html somewhere and serves that or it is doing something smarter. I just know that I have never had any issues with opening these interactive plots in a browser, but perhaps that could be the case if you have a very large amount of nodes/edges. You can also save the whole thing to an html file, and those can indeed become very large.

sadamov commented 3 weeks ago

I wonder if this might be useful here: https://hvplot.holoviz.org/

joeloskarsson commented 1 week ago

It would be really nice to also actually add the earth (textured) to the 3d plot, rather than just a bunch of grid nodes. Going by this post https://community.plotly.com/t/applying-full-color-image-texture-to-create-an-interactive-earth-globe/60166 it looks fairly simple :smile: