{"id":13399377,"url":"https://github.com/cambecc/earth","last_synced_at":"2026-03-15T00:10:20.776Z","repository":{"id":11611735,"uuid":"14106955","full_name":"cambecc/earth","owner":"cambecc","description":"a project to visualize global weather conditions","archived":false,"fork":false,"pushed_at":"2022-10-01T12:53:57.000Z","size":53746,"stargazers_count":5927,"open_issues_count":94,"forks_count":1160,"subscribers_count":278,"default_branch":"master","last_synced_at":"2024-07-31T19:19:35.891Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://earth.nullschool.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cambecc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-04T10:40:52.000Z","updated_at":"2024-07-31T13:29:56.000Z","dependencies_parsed_at":"2022-07-14T02:20:33.845Z","dependency_job_id":null,"html_url":"https://github.com/cambecc/earth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cambecc%2Fearth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cambecc%2Fearth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cambecc%2Fearth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cambecc%2Fearth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cambecc","download_url":"https://codeload.github.com/cambecc/earth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243526825,"owners_count":20305108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:37.019Z","updated_at":"2025-12-17T10:30:29.816Z","avatar_url":"https://github.com/cambecc.png","language":"JavaScript","readme":"earth\n=====\n\n**NOTE: the location of `dev-server.js` has changed from `{repository}/server/` to `{repository}/`**\n\n\"earth\" is a project to visualize global weather conditions.\n\nA customized instance of \"earth\" is available at http://earth.nullschool.net.\n\n\"earth\" is a personal project I've used to learn javascript and browser programming, and is based on the earlier\n[Tokyo Wind Map](https://github.com/cambecc/air) project.  Feedback and contributions are welcome! ...especially\nthose that clarify accepted best practices.\n\nbuilding and launching\n----------------------\n\nAfter installing node.js and npm, clone \"earth\" and install dependencies:\n\n    git clone https://github.com/cambecc/earth\n    cd earth\n    npm install\n\nNext, launch the development web server:\n\n    node dev-server.js 8080\n\nFinally, point your browser to:\n\n    http://localhost:8080\n\nThe server acts as a stand-in for static S3 bucket hosting and so contains almost no server-side logic. It\nserves all files located in the `earth/public` directory. See `public/index.html` and `public/libs/earth/*.js`\nfor the main entry points. Data files are located in the `public/data` directory, and there is one sample\nweather layer located at `data/weather/current`.\n\n*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).\n\ngetting map data\n----------------\n\nMap data is provided by [Natural Earth](http://www.naturalearthdata.com) but must be converted to\n[TopoJSON](https://github.com/mbostock/topojson/wiki) format. We make use of a couple different map scales: a\nsimplified, larger scale for animation and a more detailed, smaller scale for static display. After installing\n[GDAL](http://www.gdal.org/) and TopoJSON (see [here](http://bost.ocks.org/mike/map/#installing-tools)), the\nfollowing commands build these files:\n\n    curl \"http://www.nacis.org/naturalearth/50m/physical/ne_50m_coastline.zip\" -o ne_50m_coastline.zip\n    curl \"http://www.nacis.org/naturalearth/50m/physical/ne_50m_lakes.zip\" -o ne_50m_lakes.zip\n    curl \"http://www.nacis.org/naturalearth/110m/physical/ne_110m_coastline.zip\" -o ne_110m_coastline.zip\n    curl \"http://www.nacis.org/naturalearth/110m/physical/ne_110m_lakes.zip\" -o ne_110m_lakes.zip\n    unzip -o ne_\\*.zip\n    ogr2ogr -f GeoJSON coastline_50m.json ne_50m_coastline.shp\n    ogr2ogr -f GeoJSON coastline_110m.json ne_110m_coastline.shp\n    ogr2ogr -f GeoJSON -where \"scalerank \u003c 4\" lakes_50m.json ne_50m_lakes.shp\n    ogr2ogr -f GeoJSON -where \"scalerank \u003c 2 AND admin='admin-0'\" lakes_110m.json ne_110m_lakes.shp\n    ogr2ogr -f GeoJSON -simplify 1 coastline_tiny.json ne_110m_coastline.shp\n    ogr2ogr -f GeoJSON -simplify 1 -where \"scalerank \u003c 2 AND admin='admin-0'\" lakes_tiny.json ne_110m_lakes.shp\n    topojson -o earth-topo.json coastline_50m.json coastline_110m.json lakes_50m.json lakes_110m.json\n    topojson -o earth-topo-mobile.json coastline_110m.json coastline_tiny.json lakes_110m.json lakes_tiny.json\n    cp earth-topo*.json \u003cearth-git-repository\u003e/public/data/\n\ngetting weather data\n--------------------\n\nWeather data is produced by the [Global Forecast System](http://en.wikipedia.org/wiki/Global_Forecast_System) (GFS),\noperated by the US National Weather Service. Forecasts are produced four times daily and made available for\ndownload from [NOMADS](http://nomads.ncep.noaa.gov/). The files are in [GRIB2](http://en.wikipedia.org/wiki/GRIB)\nformat and contain over [300 records](http://www.nco.ncep.noaa.gov/pmb/products/gfs/gfs.t00z.pgrbf00.grib2.shtml).\nWe need only a few of these records to visualize wind data at a particular isobar. The following commands download\nthe 1000 hPa wind vectors and convert them to JSON format using the [grib2json](https://github.com/cambecc/grib2json)\nutility:\n\n    YYYYMMDD=\u003ca date, for example: 20140101\u003e\n    curl \"http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs.pl?file=gfs.t00z.pgrb2.1p00.f000\u0026lev_10_m_above_ground=on\u0026var_UGRD=on\u0026var_VGRD=on\u0026dir=%2Fgfs.${YYYYMMDD}00\" -o gfs.t00z.pgrb2.1p00.f000\n    grib2json -d -n -o current-wind-surface-level-gfs-1.0.json gfs.t00z.pgrb2.1p00.f000\n    cp current-wind-surface-level-gfs-1.0.json \u003cearth-git-repository\u003e/public/data/weather/current\n\nfont subsetting\n---------------\n\nThis project uses [M+ FONTS](http://mplus-fonts.sourceforge.jp/). To reduce download size, a subset font is\nconstructed out of the unique characters utilized by the site. See the `earth/server/font/findChars.js` script\nfor details. Font subsetting is performed by the [M+Web FONTS Subsetter](http://mplus.font-face.jp/), and\nthe resulting font is placed in `earth/public/styles`.\n\n[Mono Social Icons Font](http://drinchev.github.io/monosocialiconsfont/) is used for scalable, social networking\nicons. This can be subsetted using [Font Squirrel's WebFont Generator](http://www.fontsquirrel.com/tools/webfont-generator).\n\nimplementation notes\n--------------------\n\nBuilding this project required solutions to some interesting problems. Here are a few:\n\n   * The GFS grid has a resolution of 1°. Intermediate points are interpolated in the browser using [bilinear\n     interpolation](http://en.wikipedia.org/wiki/Bilinear_interpolation). This operation is quite costly.\n   * Each type of projection warps and distorts the earth in a particular way, and the degree of distortion must\n     be calculated for each point (x, y) to ensure wind particle paths are rendered correctly. For example,\n     imagine looking at a globe where a wind particle is moving north from the equator. If the particle starts\n     from the center, it will trace a path straight up. However, if the particle starts from the globe's edge,\n     it will trace a path that curves toward the pole. [Finite difference approximations](http://gis.stackexchange.com/a/5075/23451)\n     are used to estimate this distortion during the interpolation process.\n   * The SVG map of the earth is overlaid with an HTML5 Canvas, where the animation is drawn. Another HTML5\n     Canvas sits on top and displays the colored overlay. Both canvases must know where the boundaries of the\n     globe are rendered by the SVG engine, but this pixel-for-pixel information is difficult to obtain directly\n     from the SVG elements. To workaround this problem, the globe's bounding sphere is re-rendered to a\n     detached Canvas element, and the Canvas' pixels operate as a mask to distinguish points that lie outside\n     and inside the globe's bounds.\n   * Most configuration options are persisted in the hash fragment to allow deep linking and back-button\n     navigation. I use a [backbone.js Model](http://backbonejs.org/#Model) to represent the configuration.\n     Changes to the model persist to the hash fragment (and vice versa) and trigger \"change\" events which flow to\n     other components.\n   * Components use [backbone.js Events](http://backbonejs.org/#Events) to trigger changes in other downstream\n     components. For example, downloading a new layer produces a new grid, which triggers reinterpolation, which\n     in turn triggers a new particle animator. Events flow through the page without much coordination,\n     sometimes causing visual artifacts that (usually) quickly disappear.\n   * There's gotta be a better way to do this. Any ideas?\n\ninspiration\n-----------\n\nThe awesome [hint.fm wind map](http://hint.fm/wind/) and [D3.js visualization library](http://d3js.org) provided\nthe main inspiration for this project.\n","funding_links":[],"categories":["JavaScript","others","Productivity Tools","Visualization","📦 Others (实用工具、媒体与其它)"],"sub_categories":["Weather"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcambecc%2Fearth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcambecc%2Fearth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcambecc%2Fearth/lists"}