Beautiful quiver/streamline map

[blazer....@gmail.com]

Hi everyone,

My colleague and I are working on a predictive model to measure the vulnerability of a productive drain. We built a calibrated model with FloPy (Modflow 6 - DISV grid) and a predictive model based on Modpath 7 to calculated vulnerability indicators (like mixing ratio with rivers). We are now created a little web application (based on Dash/Plotly libraries) to allow the manager to explore the resultats of the study: vulnerapp.

Now we would like to add on this application a summary of flow directions in the study area. We want to plot a beautiful animated GIS streamline/quiverplot like this.

How we can create and integrate this kind of animation on our web page?

We used the 'SPDIS' data available in the CBC file to fetch the required data. FloPy already have a plot_vector() fonction for that (image below) but it is not such interactive and dynamic.

 

We also tried to do it with plotly or matplotlib but they only support regular grid data (not DISV like).
Please, feel free to suggest us API, libraries or any other relevant methods to solve our problem.

Thank you in advance.

Regards,

Pierre

[Angelo Breda]

Hello Pierre!

I first have to tell you that I do not have the answer to your questions, but I thought of some things that I would try...

1) Animations with Dash

    I guess there are 3 alternatives here. (i) Create a callback that triggers like every half second to replace a static png map with another one containing the results in the next time-step. (ii) There is a way to create animated gifs with matplotlib (but they are not interactable) or you can create all the images (for each time step) and use *conv* (Linux/MacOS) or *imagemagick* (Windows) to create the gif file from pngs; (iii) Use the dash-leaflet library to insert an animation over a map (check videoOverlay in https://dash-leaflet.herokuapp.com/)

2) DISV to regular grid

    If you can take the values (long, lat, value, angle) or (long, lat, u-component, v-component) from the DISV grid, you can re-interpolate the results to regular grid data. I thought on logic like this:

   a) Create a regular mesh grid over the simulated area

   b) Use an inverse of the square of the distance weighted average to calculate the u-component of the vector in the regular point from the u-component of the surrounding DISV gridpoints. I would use the numpy.where function to find the DISV points within a certain distance of the regular grid point.

   c) Do the same for the v-component.

   d) Mask the grid to remove regular points outside the simulated domain

   e) Plot the quiver map (with matplotlib for png images or maybe you can do it directly with plotly for an interactive one)

Hope have aided with something!

Cheers,

Angelo.