Spaces:
Running
Running
File size: 5,271 Bytes
48cb32a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 |
# Meet The Tornado {.unnumbered}
<div id="loader_Initial" class="cl_Loader">
</div>
<div id="content_Load" style="display:none;">
<!-- 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>
/* ========================================================================== */
/* ============================ show_Lotti_Riksha =========================== */
/* ========================================================================== */
function show_Lotti_Riksha(){
console.log("I am about to show th riksha");
const player = document.querySelector('dotlottie-player');
player.load('./Data/7_Animation/Riksha.lottie');
}
/* ========================================================================== */
/* ======================== hideLoaderAndShowContent ======================== */
/* ========================================================================== */
function hideLoaderAndShowContent() {
const loader = document.getElementById("loader_Initial");
const content = document.getElementById("content_Load");
loader.style.display = "none";
content.style.display = "block";
// Load and display the riksha animation
show_Lotti_Riksha();
}
// This code defines a waitForScriptExecution function that sets up a MutationObserver to watch for changes in the div element with the class plotly-graph-div. When a change is detected, it logs a message, disconnects the observer, and hides the loader while showing the content.
function waitForScriptExecution() {
// the plotly figure has the id tornado_main
const tornadoMain = document.getElementById("tornado_main");
if (tornadoMain) {
// get the first element that is found by this class name
const targetDiv = tornadoMain.querySelector(".plotly-graph-div"); // Replace with the correct class name
if (targetDiv) {
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
console.log("Script has been executed and the div content has changed.");
observer.disconnect();
hideLoaderAndShowContent();
break;
}
}
});
observer.observe(targetDiv, { childList: true });
}
}
}
// wait until the whole page has loaded once
window.addEventListener("load", function() {
// show_Lotti_Riksha()
// when the tornada plotly plot is shown let the riksha disappear
waitForScriptExecution();
});
</script>
|