https://github.com/cambecc/earth
a project to visualize global weather conditions
https://github.com/cambecc/earth
Last synced: about 2 months ago
JSON representation
a project to visualize global weather conditions
- Host: GitHub
- URL: https://github.com/cambecc/earth
- Owner: cambecc
- License: mit
- Created: 2013-11-04T10:40:52.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2022-10-01T12:53:57.000Z (over 3 years ago)
- Last Synced: 2024-07-31T19:19:35.891Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://earth.nullschool.net
- Size: 51.3 MB
- Stars: 5,927
- Watchers: 278
- Forks: 1,160
- Open Issues: 94
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - cambecc/earth - a project to visualize global weather conditions (others)
- Awesome - Earth - a project to visualize global weather conditions. [earth.nullschool.net](https://earth.nullschool.net) (Productivity Tools / Weather)
- awesome-atmos - earth wind map
README
earth
=====
**NOTE: the location of `dev-server.js` has changed from `{repository}/server/` to `{repository}/`**
"earth" is a project to visualize global weather conditions.
A customized instance of "earth" is available at http://earth.nullschool.net.
"earth" is a personal project I've used to learn javascript and browser programming, and is based on the earlier
[Tokyo Wind Map](https://github.com/cambecc/air) project. Feedback and contributions are welcome! ...especially
those that clarify accepted best practices.
building and launching
----------------------
After installing node.js and npm, clone "earth" and install dependencies:
git clone https://github.com/cambecc/earth
cd earth
npm install
Next, launch the development web server:
node dev-server.js 8080
Finally, point your browser to:
http://localhost:8080
The server acts as a stand-in for static S3 bucket hosting and so contains almost no server-side logic. It
serves all files located in the `earth/public` directory. See `public/index.html` and `public/libs/earth/*.js`
for the main entry points. Data files are located in the `public/data` directory, and there is one sample
weather layer located at `data/weather/current`.
*For Ubuntu, Mint, and elementary OS, use `nodejs` instead of `node` instead due to a [naming conflict](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager#ubuntu-mint-elementary-os).
getting map data
----------------
Map data is provided by [Natural Earth](http://www.naturalearthdata.com) but must be converted to
[TopoJSON](https://github.com/mbostock/topojson/wiki) format. We make use of a couple different map scales: a
simplified, larger scale for animation and a more detailed, smaller scale for static display. After installing
[GDAL](http://www.gdal.org/) and TopoJSON (see [here](http://bost.ocks.org/mike/map/#installing-tools)), the
following commands build these files:
curl "http://www.nacis.org/naturalearth/50m/physical/ne_50m_coastline.zip" -o ne_50m_coastline.zip
curl "http://www.nacis.org/naturalearth/50m/physical/ne_50m_lakes.zip" -o ne_50m_lakes.zip
curl "http://www.nacis.org/naturalearth/110m/physical/ne_110m_coastline.zip" -o ne_110m_coastline.zip
curl "http://www.nacis.org/naturalearth/110m/physical/ne_110m_lakes.zip" -o ne_110m_lakes.zip
unzip -o ne_\*.zip
ogr2ogr -f GeoJSON coastline_50m.json ne_50m_coastline.shp
ogr2ogr -f GeoJSON coastline_110m.json ne_110m_coastline.shp
ogr2ogr -f GeoJSON -where "scalerank < 4" lakes_50m.json ne_50m_lakes.shp
ogr2ogr -f GeoJSON -where "scalerank < 2 AND admin='admin-0'" lakes_110m.json ne_110m_lakes.shp
ogr2ogr -f GeoJSON -simplify 1 coastline_tiny.json ne_110m_coastline.shp
ogr2ogr -f GeoJSON -simplify 1 -where "scalerank < 2 AND admin='admin-0'" lakes_tiny.json ne_110m_lakes.shp
topojson -o earth-topo.json coastline_50m.json coastline_110m.json lakes_50m.json lakes_110m.json
topojson -o earth-topo-mobile.json coastline_110m.json coastline_tiny.json lakes_110m.json lakes_tiny.json
cp earth-topo*.json /public/data/
getting weather data
--------------------
Weather data is produced by the [Global Forecast System](http://en.wikipedia.org/wiki/Global_Forecast_System) (GFS),
operated by the US National Weather Service. Forecasts are produced four times daily and made available for
download from [NOMADS](http://nomads.ncep.noaa.gov/). The files are in [GRIB2](http://en.wikipedia.org/wiki/GRIB)
format and contain over [300 records](http://www.nco.ncep.noaa.gov/pmb/products/gfs/gfs.t00z.pgrbf00.grib2.shtml).
We need only a few of these records to visualize wind data at a particular isobar. The following commands download
the 1000 hPa wind vectors and convert them to JSON format using the [grib2json](https://github.com/cambecc/grib2json)
utility:
font subsetting
---------------
This project uses [M+ FONTS](http://mplus-fonts.sourceforge.jp/). 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](http://mplus.font-face.jp/), and
the resulting font is placed in `earth/public/styles`.
[Mono Social Icons Font](http://drinchev.github.io/monosocialiconsfont/) is used for scalable, social networking
icons. This can be subsetted using [Font Squirrel's WebFont Generator](http://www.fontsquirrel.com/tools/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](http://en.wikipedia.org/wiki/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](http://gis.stackexchange.com/a/5075/23451)
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](http://backbonejs.org/#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](http://backbonejs.org/#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?
inspiration
-----------
The awesome [hint.fm wind map](http://hint.fm/wind/) and [D3.js visualization library](http://d3js.org) provided
the main inspiration for this project.