An demo animation of wind on a Canvas layer in the JSAPI
JavaScript HTML CSS
Latest commit c5ce7b4 Jul 27, 2016 @fuzhenn fuzhenn committed with jgravois fix global var (#21)


Wind JS

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks.

How it works

The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity that is dictated by the interpolated surface.

The Demo

The Data

For more information about GFS data visit: GFS Data.

Before GFS data can be used with this code it has to be converted into JSON. To do this we used another awesome project by @cambecc here That tool converts data in the GRIB2 file format into a JSON structure with the grid represented as an array. An example result of that tool can be seen in the gfs.json file.



Find a bug or want to request a new feature? Please let us know by submitting an issue.


Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.


All the credit for this work goes to: for creating the repo: The majority of this code is directly taken from there, since it's utterly awesome.


This project inherits the MIT license from it's original code base from which 95% of this code was "cp'd"

A copy of the license is available in the repository's license.txt file.