Static HTML Exports for Makie Proof of Concept

General Usage
, ,
1

@bjarthur and I were exploring the state of static export of some dynamic Makie plots that vary in time. With the help of some AI agents (Google Antigravity CLI with Gemini Flash 3.5) we eventually found a path. I’ve created a demonstration by creating some 3D random walk simulations here:

The main key was to use onjs to write some JavaScript to do the dynamic updates:

In particular, we (Ben, I, and Gemini Flash 3.5) had to parse through WGLMakie internals to find the name “positions_transformed_f32c” as a key name to update.

For now, please enjoy the plots. If you have any thoughts about how to generalize and upstream this approach, I would be interested in pursuing that.

2

Cool stuff! I’m also working on some WASM compilation for WGLMakie and improving the JS interface, for more standalone use cases!
So hopefully this will become much easier in the future :slight_smile:

3

Wow, that sounds amazing, thanks all!

4

completely standalone interactive figures is the one killer feature that i sorely miss from Gadfly

5

Gadfly.jl was (is) so elegant. I wish it will have some kind of a comeback now that AI based agents can assist with the development. Do you see it happen?

6

It’s funny, I was working on a very similar project, for the KM3NeT event display that was featured here some times ago by @tamasgal !

I ended up taking a different approach than @mkitti to rely more on the record_states and export_static from Bonito.jl (https://bonito.sh/stable/static.html).

Time is represented with a slider, and the main logic of the code relies in the following lines:

app = App() do session::Session
    step = 20 # ns
    time_slider = Slider(0:step:Δt, value=Δt, id="time_range")

   on(time_slider) do idx
        t = t_min + idx

        RA.apply_frame!(RA.global_rba(), t)
    end

    return Bonito.record_states(
        session,
        RA.global_scene()
    )
end

export_static("event_display_dynamic.html", app)

I just added some manual javascript to make the slider increase automatically, you can find the project here: https://codeberg.org/gvannoye/proto-html-export-raibowalga.jl

and the exported html file here: https://gvannoye.codeberg.page/proto-html-export-raibowalga.jl/event_display_dynamic.html

7

some years ago I created a bunch of demos, using record_states as well. Good for small things, not so much for heavy loaded data apps.

https://lazarusa.github.io/ClimateVisualisations/

code: GitHub - lazarusA/ClimateVisualisations: Climate visualisation apps · GitHub

Edit: all JSServe will now need to be Bonito :smiley: