earth for netCDF files of Paleo-climate simulations

"earth" is a project to visualize global weather conditions developed by Cameron Beccario to display weather data forecasts. A customized instance of "earth" is available at http://earth.nullschool.net.

Here, we have modified the application to allow users to upload their own netCDF files output from paleo-climate simulations. The application will internally convert the netCDF file to json using the netcdfjs library. This libary to date only accepts netCDF v3x files, so we modified the code server-side to convert v4x files to v3x using the nco command ncks -3 file_in.nc file_out.nc, spawned as a child process.

For now, the continent contours were derived offline from the netCDF file into a topojson file (see these steps). The topojson file is hard-coded in the application and currently corresponds to the plate tectonics of the Cretaceous period.

building and launching

After installing node.js and npm, clone "earth" and install dependencies:

git clone https://github.com/KatiRG/earth.git
cd earth
npm install

Install NCO if you're planning to use netCDF v4x files.

You will also need a few dependencies:

npm install express

npm install netcdfjs

npm install body-parser

Next, launch the development web server:

node dev-server.js 8080

Finally, point your browser to:

http://localhost:8080

For Ubuntu, Mint, and elementary OS, use nodejs instead of node instead due to a naming conflict.

font subsetting

This project uses M+ FONTS. To reduce download size, a subset font is constructed out of the unique characters utilized by the site. See the earth/server/font/findChars.js script for details. Font subsetting is performed by the M+Web FONTS Subsetter, and the resulting font is placed in earth/public/styles.

Mono Social Icons Font is used for scalable, social networking icons. This can be subsetted using Font Squirrel's WebFont Generator.

implementation notes

Building this project required solutions to some interesting problems. Here are a few:

• The GFS grid has a resolution of 1°. Intermediate points are interpolated in the browser using bilinear interpolation. This operation is quite costly.
• Each type of projection warps and distorts the earth in a particular way, and the degree of distortion must be calculated for each point (x, y) to ensure wind particle paths are rendered correctly. For example, imagine looking at a globe where a wind particle is moving north from the equator. If the particle starts from the center, it will trace a path straight up. However, if the particle starts from the globe's edge, it will trace a path that curves toward the pole. Finite difference approximations are used to estimate this distortion during the interpolation process.
• The SVG map of the earth is overlaid with an HTML5 Canvas, where the animation is drawn. Another HTML5 Canvas sits on top and displays the colored overlay. Both canvases must know where the boundaries of the globe are rendered by the SVG engine, but this pixel-for-pixel information is difficult to obtain directly from the SVG elements. To workaround this problem, the globe's bounding sphere is re-rendered to a detached Canvas element, and the Canvas' pixels operate as a mask to distinguish points that lie outside and inside the globe's bounds.
• Most configuration options are persisted in the hash fragment to allow deep linking and back-button navigation. I use a backbone.js Model to represent the configuration. Changes to the model persist to the hash fragment (and vice versa) and trigger "change" events which flow to other components.
• Components use backbone.js Events to trigger changes in other downstream components. For example, downloading a new layer produces a new grid, which triggers reinterpolation, which in turn triggers a new particle animator. Events flow through the page without much coordination, sometimes causing visual artifacts that (usually) quickly disappear.
• There's gotta be a better way to do this. Any ideas?

acknowledgements

Many thanks to Sophie Szopa and Pierre Sepulchre for supporting this project and providing scientific input, and to our summer intern Camille Beaugendre who made the first inroads into the application, modifying it to read json files made offline with python and adding new variables to the menu.

The additional features allowing netCDF files to be uploaded directly and converted to v3x was made possible by the netcdfjs library and the invaluable guidance of Arseny Kurnikov and Miika Pihjlaja, coders extraordinaire.