Interactive hydrological modelling and simulation on client-side web systems: an educational case study

Computational hydrological models and simulations are fundamental pieces of the workflow of contemporary hydroscience research, education, and professional engineering activities. In support of hydrological modelling efforts, web-enabled tools for data processing, storage, computation, and visualization have proliferated. Most of these efforts rely on server resources for computation and data tasks and client-side resources for visualization. However, continued advancements of in-browser, client-side compute performance present an opportunity to further leverage client-side resources. Towards this end, we present an operational rainfall-runoff model and simulation engine running entirely on the client side using the JavaScript programming language. To demonstrate potential uses, we also present an easy-to-use in-browser interface designed for hydroscience education. Although the use case presented here is self-contained, the core technologies can extend to leverage multi-core processing on single machines and parallelization capabilities of multiple clients or JavaScript-enabled servers. These possibilities suggest that client-side hydrological simulation can play a central role in a dynamic, interconnected ecosystem of web-ready hydrological tools. HIGHLIGHTS We present the Hillslope Link Model (HLM)-Web, a simulation engine for rainfall-runoff modelling in JavaScript.; The simulation engine runs full-scale, physically based rainfall-runoff models.; All computations are performed on the client side within the browser.; HLM-Web is demonstrated with a use case for hydroscience education.; The use case facilitates hydrological education and research ‘sandboxing’.;