index.qmd

# Meet The Tornado {.unnumbered}

<div id="loader_Initial" class="cl_Loader">
</div>
<div id="content_Load" style="display:none;">
  <!-- Your webpage content goes here


<!-- Code to generate the main image, i.e. the tornada -->
```{python}
# | echo: false
#| code-fold: true
#| label: tornado_main
#| 
import numpy as np
import plotly.io as pio
pio.renderers.default = "plotly_mimetype+notebook_connected"
import plotly.graph_objects as go # to combine figures

# load data from the numpy npz file
data = np.load('Data/6_Html_Data/0_Viz/plt_Dat_16.78.npz')

# extraxt the data - load it
x_Traj =  data["x"]
y_Traj =  data["y"]
z_Traj =  data["z"]
x_Cone = data["x_Cone"]
y_Cone = data["y_Cone"]
z_Cone = data["z_Cone"]
u_Cone = data["u_Cone"]
v_Cone = data["v_Cone"]
w_Cone = data["w_Cone"]

# The trajectory
fig = go.Figure(data=[go.Scatter3d(
                        x= x_Traj,
                        y= y_Traj,
                        z= z_Traj,
                        name = "Trajectory",
                        showlegend = False,
                    )])


fig.update_traces(marker_size = 2,
                  mode = "lines",
                  marker_color ="green")


# Cones
fig_Cones = go.Figure(data=go.Cone(  x = x_Cone ,
                                y = y_Cone ,
                                z = z_Cone ,
                                u = u_Cone ,
                                v = v_Cone ,
                                w = w_Cone ,
                                name = "Direction",
                                showlegend = False,

                                )
                    )


# hiding color-bar
fig_Cones.update_traces(showscale=False)

# combine cone and trajectory
fig.add_traces(data = fig_Cones.data)


# style the figure
fig.update_layout(
    # plotlyexpress 3d axes:
    scene = dict(
        xaxis = dict(
            showbackground = False,
            showticklabels  = False,
            title='',
            showgrid = False,
            zeroline = False,),
        yaxis = dict(
            showbackground = False,
            showticklabels  = False,
            title='',
            showgrid = False,
            zeroline = False,),
        zaxis = dict(
            showbackground = False,
            showticklabels  = False,
            title='',
            showgrid = False,
            zeroline = False,
        ),
            ),
    # template= 'plotly_dark'
    # template= 'plotly'
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)',
    modebar = dict(bgcolor='rgba(0, 0, 0, 0)'),
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0,
        pad=0
                ),

    scene_camera_eye=dict(x=0, 
                          y=1,
                          z=0),
)

fig.show(div_id="here_Comes")
``` 
</div>


<script>

function hideLoaderAndShowContent() {
    const loader = document.getElementById("loader_Initial");
    const content = document.getElementById("content_Load");

    loader.style.display = "none";
    content.style.display = "block";
}

function checkForPlotlyPlot() {
    console.log("everything is loaded")

    const plotElement = document.querySelector(".plotly-graph-div");

    if (plotElement) {
        console.log("Plotly plot is loaded.");
        clearInterval(intervalId);
        hideLoaderAndShowContent();
    } else {
        console.log("Plotly plot is not loaded.");
    }
}


function checkIfElementLoaded(elementId) {
    const element = document.getElementById(elementId);
    if (element) {
        console.log("Element with ID:", elementId, "is loaded.");
    } else {
        console.log("Element with ID:", elementId, "is not loaded.");
    }
}

function onPageLoad() {
    // Replace 'yourElementId' with the ID of the element you want to check
    checkIfElementLoaded("tornado_main");
}

// java script defined fcn to reeatedly execute a function
const intervalId = setInterval(checkForPlotlyPlot, 1000); // Checks every 1000ms (1 second)

// window.addEventListener("load", onPageLoad);
// window.addEventListener("load", checkForPlotlyPlot);


</script>