Bump to 1.1.13

Merge pull request #23 from christiannaths/master
Fixes incorrect dependency notation
2018-10-30 11:52:33 -07:00 · 2018-10-30 11:45:49 -07:00 · 2018-08-25 15:14:22 -06:00 · 2015-11-22 02:14:02 -08:00 · 2015-11-22 02:04:36 -08:00 · 2014-12-13 12:04:48 -08:00
71 changed files with 6256 additions and 196 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,67 @@
+v1.1.2 (2015/11/22)
+-------------------
+
+* Update LICENSE and copyright notices
+
+v1.1.1 (2014/05/18)
+-------------------
+
+* Set `planetaryjs` on root when using AMD
+
+v1.1.0 (2014/02/03)
+-------------------
+
+**Core**
+
+* Add `stop` method
+* Add `onStop` hooks
+
+v1.0.3 (2014/01/23)
+-------------------
+
+* Don't disable adaptive resampling on the projection
+
+v1.0.2 (2014/01/16)
+-------------------
+
+* Update version dependencies for D3 and TopoJSON
+
+v1.0.1 (2013/01/02)
+-------------------
+
+* Add D3 and TopoJSON as dependencies in `package.json`
+
+v1.0.0 (2013/12/31)
+-------------------
+
+First stable release
+
+v1.0.0-rc.2 (2013/12/26)
+------------------------
+
+* Fix load order of global plugins
+* Expose planet instance as `this` in event callbacks
+
+v1.0.0-rc.1 (2013/12/24)
+------------------------
+
+* `zoom` plugin's `initialScale` can be set to `0`
+
+v0.3.0
+------
+
+* Reverse the order of `lat` and `lng` parameters of the `add` method of the `pings` plugin
+
+v0.2.2
+------
+
+* Add `afterZoom` and `afterDrag` hooks to the `zoom` and `drag` plugins
+
+v0.2.1
+------
+
+* Implement the `drag` and `zoom` plugins
+
 v0.2.0
 ------

--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (c) 2013 Brandon Tilley
+Copyright (c) 2013 Michelle Tilley

 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
--- a/README.md
+++ b/README.md
@ -15,6 +15,11 @@ Requirements
 * [D3](http://d3js.org/) version 3
 * [TopoJSON](https://github.com/mbostock/topojson) version 1

+Download
+--------
+
+Download Planetary.js from the [Planetary.js web site](http://planetaryjs.com/download/).
+
 Quick Start
 -----------

--- a/bower.json
+++ b/bower.json
@ -1,10 +1,12 @@
 {
  "name": "planetary.js",
-  "version": "0.2.0",
+  "version": "1.1.2",
  "main": "dist/planetaryjs.min.js",
  "description": "Awesome interactive globes for the web",
  "homepage": "http://planetaryjs.com",
-  "authors": [ "Brandon Tilley <brandon@brandontilley.com>" ],
+  "authors": [
+    "Michelle Tilley <michelle@michelletilley.net>"
+  ],
  "license": "MIT",
  "ignore": [
    ".git",
@ -21,8 +23,10 @@
    "topojson": "1.x"
  },
  "keywords": [
-    "globe", "globes",
-    "planet", "planets",
+    "globe",
+    "globes",
+    "planet",
+    "planets",
    "d3",
    "topojson"
  ]
--- a/dist/planetaryjs-noplugins.js
+++ b/dist/planetaryjs-noplugins.js
@ -1,12 +1,14 @@
-/*! Planetary.js v0.2.0
- *  Copyright (c) 2013 Brandon Tilley
+/*! Planetary.js v1.1.3
+ *  Copyright (c) 2013 Michelle Tilley
 *
 *  Released under the MIT license
- *  Date: 2013-12-22T07:35:17.700Z
+ *  Date: 2018-10-30T18:49:58.804Z
 */
 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
-    define(['d3', 'topojson'], factory);
+    define(['d3', 'topojson'], function(d3, topojson) {
+      return (root.planetaryjs = factory(d3, topojson, root));
+    });
  } else if (typeof exports === 'object') {
    module.exports = factory(require('d3'), require('topojson'));
  } else {
@ -21,7 +23,11 @@

  var doDrawLoop = function(planet, canvas, hooks) {
    d3.timer(function() {
-      planet.context.clearRect(0, 0, canvas.width, canvas.height)
+      if (planet.stopped) {
+        return true;
+      }
+
+      planet.context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < hooks.onDraw.length; i++) {
        hooks.onDraw[i]();
      }
@ -30,19 +36,19 @@

  var initPlugins = function(planet, localPlugins) {
    // Add the global plugins to the beginning of the local ones
-    for (var i = 0; i < plugins.length; i++) {
+    for (var i = plugins.length - 1; i >= 0; i--) {
      localPlugins.unshift(plugins[i]);
    }

    // Load the default plugins if none have been loaded so far
-    if (localPlugins.length == 0) {
+    if (localPlugins.length === 0) {
      if (planetaryjs.plugins.earth)
        planet.loadPlugin(planetaryjs.plugins.earth());
      if (planetaryjs.plugins.pings)
        planet.loadPlugin(planetaryjs.plugins.pings());
    }

-    for (var i = 0; i < localPlugins.length; i++) {
+    for (i = 0; i < localPlugins.length; i++) {
      localPlugins[i](planet);
    }
  };
@ -68,7 +74,7 @@
      var check = function() {
        if (completed >= hooks.onInit.length) doDrawLoop(planet, canvas, hooks);
        else doNext(check);
-      }
+      };
      doNext(check);
    } else {
      doDrawLoop(planet, canvas, hooks);
@ -76,11 +82,14 @@
  };

  var startDraw = function(planet, canvas, localPlugins, hooks) {
-    initPlugins(planet, localPlugins);
-
    planet.canvas = canvas;
    planet.context = canvas.getContext('2d');

+    if (planet.stopped !== true) {
+      initPlugins(planet, localPlugins);
+    }
+
+    planet.stopped = false;
    runOnInitHooks(planet, canvas, hooks);
  };

@ -100,7 +109,8 @@
      var localPlugins = [];
      var hooks = {
        onInit: [],
-        onDraw: []
+        onDraw: [],
+        onStop: []
      };

      var planet = {
@ -118,13 +128,24 @@
          hooks.onDraw.push(fn);
        },

+        onStop: function(fn) {
+          hooks.onStop.push(fn);
+        },
+
        loadPlugin: function(plugin) {
          localPlugins.push(plugin);
        },

+        stop: function() {
+          planet.stopped = true;
+          for (var i = 0; i < hooks.onStop.length; i++) {
+            hooks.onStop[i](planet);
+          }
+        },
+
        withSavedContext: function(fn) {
          if (!this.context) {
-            throw new Error("No canvas to fetch context for")
+            throw new Error("No canvas to fetch context for");
          }

          this.context.save();
@ -134,8 +155,7 @@
      };

      planet.projection = d3.geo.orthographic()
-        .clipAngle(90)
-        .precision(0);
+        .clipAngle(90);
      planet.path = d3.geo.path().projection(planet.projection);

      return planet;
--- a/dist/planetaryjs-noplugins.min.js
+++ b/dist/planetaryjs-noplugins.min.js
@ -1,2 +1,2 @@
-/*! Planetary.js 0.2.0 | (c) 2013 Brandon Tilley | Released under MIT License */
-!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},u=function(n,t){for(var o=0;o<i.length;o++)t.unshift(i[o]);0==t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},c=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},u=function(){e>=o.onInit.length?r(n,t,o):i(u)};i(u)}else r(n,t,o)},a=function(n,t,o,e){u(n,o),n.canvas=t,n.context=t.getContext("2d"),c(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={plugins:{},draw:function(n){a(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return s});
+/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */
+!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},u=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings())),o=0;o<t.length;o++)t[o](n)},p=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},u=function(){e>=o.onInit.length?r(n,t,o):i(u)};i(u)}else r(n,t,o)},c=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&u(n,o),n.stopped=!1,p(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){c(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return s});
--- a/dist/planetaryjs.js
+++ b/dist/planetaryjs.js
@ -1,12 +1,14 @@
-/*! Planetary.js v0.2.0
- *  Copyright (c) 2013 Brandon Tilley
+/*! Planetary.js v1.1.3
+ *  Copyright (c) 2013 Michelle Tilley
 *
 *  Released under the MIT license
- *  Date: 2013-12-22T07:35:17.783Z
+ *  Date: 2018-10-30T18:49:58.667Z
 */
 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
-    define(['d3', 'topojson'], factory);
+    define(['d3', 'topojson'], function(d3, topojson) {
+      return (root.planetaryjs = factory(d3, topojson, root));
+    });
  } else if (typeof exports === 'object') {
    module.exports = factory(require('d3'), require('topojson'));
  } else {
@ -21,7 +23,11 @@

  var doDrawLoop = function(planet, canvas, hooks) {
    d3.timer(function() {
-      planet.context.clearRect(0, 0, canvas.width, canvas.height)
+      if (planet.stopped) {
+        return true;
+      }
+
+      planet.context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < hooks.onDraw.length; i++) {
        hooks.onDraw[i]();
      }
@ -30,19 +36,19 @@

  var initPlugins = function(planet, localPlugins) {
    // Add the global plugins to the beginning of the local ones
-    for (var i = 0; i < plugins.length; i++) {
+    for (var i = plugins.length - 1; i >= 0; i--) {
      localPlugins.unshift(plugins[i]);
    }

    // Load the default plugins if none have been loaded so far
-    if (localPlugins.length == 0) {
+    if (localPlugins.length === 0) {
      if (planetaryjs.plugins.earth)
        planet.loadPlugin(planetaryjs.plugins.earth());
      if (planetaryjs.plugins.pings)
        planet.loadPlugin(planetaryjs.plugins.pings());
    }

-    for (var i = 0; i < localPlugins.length; i++) {
+    for (i = 0; i < localPlugins.length; i++) {
      localPlugins[i](planet);
    }
  };
@ -68,7 +74,7 @@
      var check = function() {
        if (completed >= hooks.onInit.length) doDrawLoop(planet, canvas, hooks);
        else doNext(check);
-      }
+      };
      doNext(check);
    } else {
      doDrawLoop(planet, canvas, hooks);
@ -76,11 +82,14 @@
  };

  var startDraw = function(planet, canvas, localPlugins, hooks) {
-    initPlugins(planet, localPlugins);
-
    planet.canvas = canvas;
    planet.context = canvas.getContext('2d');

+    if (planet.stopped !== true) {
+      initPlugins(planet, localPlugins);
+    }
+
+    planet.stopped = false;
    runOnInitHooks(planet, canvas, hooks);
  };

@ -100,7 +109,8 @@
      var localPlugins = [];
      var hooks = {
        onInit: [],
-        onDraw: []
+        onDraw: [],
+        onStop: []
      };

      var planet = {
@ -118,13 +128,24 @@
          hooks.onDraw.push(fn);
        },

+        onStop: function(fn) {
+          hooks.onStop.push(fn);
+        },
+
        loadPlugin: function(plugin) {
          localPlugins.push(plugin);
        },

+        stop: function() {
+          planet.stopped = true;
+          for (var i = 0; i < hooks.onStop.length; i++) {
+            hooks.onStop[i](planet);
+          }
+        },
+
        withSavedContext: function(fn) {
          if (!this.context) {
-            throw new Error("No canvas to fetch context for")
+            throw new Error("No canvas to fetch context for");
          }

          this.context.save();
@ -134,8 +155,7 @@
      };

      planet.projection = d3.geo.orthographic()
-        .clipAngle(90)
-        .precision(0);
+        .clipAngle(90);
      planet.path = d3.geo.path().projection(planet.projection);

      return planet;
@ -151,7 +171,7 @@
          planet.plugins.topojson.world = config.world;
          setTimeout(done, 0);
        } else {
-          var file = config.file || 'world-110m.json'
+          var file = config.file || 'world-110m.json';
          d3.json(file, function(err, world) {
            if (err) {
              throw new Error("Could not load JSON " + file);
@ -185,14 +205,14 @@
      planet.onInit(function() {
        var world = planet.plugins.topojson.world;
        land = topojson.feature(world, world.objects.land);
-      })
+      });

      planet.onDraw(function() {
        planet.withSavedContext(function(context) {
          context.beginPath();
          planet.path.context(context)(land);

-          if (config.fill != false) {
+          if (config.fill !== false) {
            context.fillStyle = config.fill || 'white';
            context.fill();
          }
@ -242,7 +262,7 @@
  };

  planetaryjs.plugins.earth = function(config) {
-    var config = config || {};
+    config = config || {};
    var topojsonOptions = config.topojson || {};
    var oceanOptions = config.oceans || {};
    var landOptions = config.land || {};
@ -258,13 +278,22 @@

  planetaryjs.plugins.pings = function(config) {
    var pings = [];
+    config = config || {};

-    var addPing = function(lat, lng, options) {
-      var options = options || {};
+    var addPing = function(lng, lat, options) {
+      options = options || {};
      options.color = options.color || config.color || 'white';
-      options.ttl = options.ttl || config.ttl || 2000;
      options.angle = options.angle || config.angle || 5;
-      pings.push({ lat: lat, lng: lng, time: new Date(), options: options });
+      options.ttl   = options.ttl   || config.ttl   || 2000;
+      var ping = { time: new Date(), options: options };
+      if (config.latitudeFirst) {
+        ping.lat = lng;
+        ping.lng = lat;
+      } else {
+        ping.lng = lng;
+        ping.lat = lat;
+      }
+      pings.push(ping);
    };

    var drawPings = function(planet, context, now) {
@ -306,5 +335,76 @@
    };
  };

+  planetaryjs.plugins.zoom = function (options) {
+    options = options || {};
+    var noop = function() {};
+    var onZoomStart = options.onZoomStart || noop;
+    var onZoomEnd   = options.onZoomEnd   || noop;
+    var onZoom      = options.onZoom      || noop;
+    var afterZoom   = options.afterZoom   || noop;
+    var startScale  = options.initialScale;
+    var scaleExtent = options.scaleExtent || [50, 2000];
+
+    return function(planet) {
+      planet.onInit(function() {
+        var zoom = d3.behavior.zoom()
+          .scaleExtent(scaleExtent);
+
+        if (startScale !== null && startScale !== undefined) {
+          zoom.scale(startScale);
+        } else {
+          zoom.scale(planet.projection.scale());
+        }
+
+        zoom
+          .on('zoomstart', onZoomStart.bind(planet))
+          .on('zoomend', onZoomEnd.bind(planet))
+          .on('zoom', function() {
+            onZoom.call(planet);
+            planet.projection.scale(d3.event.scale);
+            afterZoom.call(planet);
+          });
+        d3.select(planet.canvas).call(zoom);
+      });
+    };
+  };
+
+  planetaryjs.plugins.drag = function(options) {
+    options = options || {};
+    var noop = function() {};
+    var onDragStart = options.onDragStart || noop;
+    var onDragEnd   = options.onDragEnd   || noop;
+    var onDrag      = options.onDrag      || noop;
+    var afterDrag   = options.afterDrag   || noop;
+
+    return function(planet) {
+      planet.onInit(function() {
+        var drag = d3.behavior.drag()
+          .on('dragstart', onDragStart.bind(planet))
+          .on('dragend', onDragEnd.bind(planet))
+          .on('drag', function() {
+            onDrag.call(planet);
+            var dx = d3.event.dx;
+            var dy = d3.event.dy;
+            var rotation = planet.projection.rotate();
+            var radius = planet.projection.scale();
+            var scale = d3.scale.linear()
+              .domain([-1 * radius, radius])
+              .range([-90, 90]);
+            var degX = scale(dx);
+            var degY = scale(dy);
+            rotation[0] += degX;
+            rotation[1] -= degY;
+            if (rotation[1] > 90)   rotation[1] = 90;
+            if (rotation[1] < -90)  rotation[1] = -90;
+            if (rotation[0] >= 180) rotation[0] -= 360;
+            planet.projection.rotate(rotation);
+            afterDrag.call(planet);
+          });
+        d3.select(planet.canvas).call(drag);
+      });
+    };
+  };
+
  return planetaryjs;
 }));
--- a/dist/planetaryjs.min.js
+++ b/dist/planetaryjs.min.js
@ -1,2 +1,2 @@
-/*! Planetary.js 0.2.0 | (c) 2013 Brandon Tilley | Released under MIT License */
-!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=0;o<e.length;o++)t.unshift(e[o]);0==t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},a=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,i)},s={plugins:{},noConflict:function(){return o.planetaryjs=i,s},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){a(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return s.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},s.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},s.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},s.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,u=n.type||"internal";i=t.mesh(r,l,e[u])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},s.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){s.plugins.topojson(t)(n),s.plugins.oceans(o)(n),s.plugins.land(i)(n),s.plugins.borders(e)(n)}},s.plugins.pings=function(t){var o=[],i=function(n,i,e){var e=e||{};e.color=e.color||t.color||"white",e.ttl=e.ttl||t.ttl||2e3,e.angle=e.angle||t.angle||5,o.push({lat:n,lng:i,time:new Date,options:e})},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var u=o[l],a=i-u.time;a<u.options.ttl&&(e.push(u),r(n,t,i,a,u))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,u=n.rgb(r.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},s});
+/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */
+!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},u=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&l(n,o),n.stopped=!1,a(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){u(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(e){if(t.world)o.plugins.topojson.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.plugins.topojson.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){var n=o.plugins.topojson.world;e=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null,i={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";e=t.mesh(r,l,i[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(t){var o=[];t=t||{};var e=function(n,e,i){i=i||{},i.color=i.color||t.color||"white",i.angle=i.angle||t.angle||5,i.ttl=i.ttl||t.ttl||2e3;var r={time:new Date,options:i};t.latitudeFirst?(r.lat=n,r.lng=e):(r.lng=n,r.lat=e),o.push(r)},i=function(n,t,e){for(var i=[],l=0;l<o.length;l++){var a=o[l],u=e-a.time;u<a.options.ttl&&(i.push(a),r(n,t,e,u,a))}o=i},r=function(t,o,e,i,r){var l=1-i/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var u=n.geo.circle().origin([r.lng,r.lat]).angle(i/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:e},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){i(n,o,t)})})}},c.plugins.zoom=function(t){t=t||{};var o=function(){},e=t.onZoomStart||o,i=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,u=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(u);null!==a&&void 0!==a?o.scale(a):o.scale(t.projection.scale()),o.on("zoomstart",e.bind(t)).on("zoomend",i.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){t=t||{};var o=function(){},e=t.onDragStart||o,i=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",e.bind(t)).on("dragend",i.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,e=n.event.dy,i=t.projection.rotate(),a=t.projection.scale(),u=n.scale.linear().domain([-1*a,a]).range([-90,90]),c=u(o),s=u(e);i[0]+=c,i[1]-=s,i[1]>90&&(i[1]=90),i[1]<-90&&(i[1]=-90),i[0]>=180&&(i[0]-=360),t.projection.rotate(i),l.call(t)});n.select(t.canvas).call(o)})}},c});
--- a/dist/world-110m.json
+++ b/dist/world-110m.json
--- a/gulpfile.js
+++ b/gulpfile.js
@ -3,16 +3,19 @@ var uglify = require('gulp-uglify');
 var concat = require('gulp-concat');
 var rename = require('gulp-rename');
 var header = require('gulp-header');
+var jshint = require('gulp-jshint');
+var replace = require('gulp-replace');
 var metadata = require('./package.json');

-var shortHeader = "/*! Planetary.js {{version}} | (c) 2013 Brandon Tilley | Released under MIT License */"
+var shortHeader = "/*! Planetary.js <%= version %> | (c) 2013 Michelle Tilley | Released under MIT License */\n"
 var fullHeader = [
-  "/*! Planetary.js v{{version}}",
-  " *  Copyright (c) 2013 Brandon Tilley",
+  "/*! Planetary.js v<%= version %>",
+  " *  Copyright (c) 2013 Michelle Tilley",
  " *",
  " *  Released under the MIT license",
-  " *  Date: {{now}}",
-  " */"
+  " *  Date: <%= new Date().toISOString() %>",
+  " */",
+  ""
 ].join("\n");

 var fullSource = gulp.src(['./src/_umd_header.js', './src/body.js', './src/plugins.js', './src/_umd_footer.js']);
@ -22,9 +25,15 @@ function build(source, name, headerText, minify) {
  var js = source.pipe(concat(name));
  if (minify) { js = js.pipe(uglify()); }
  js = js.pipe(header(headerText, { version: metadata.version }));
-  js.pipe(gulp.dest('./dist'));
+  js.pipe(replace("\r\n", "\n")).pipe(gulp.dest('./dist'));
 }

+gulp.task('jshint', function() {
+  gulp.src(['./src/body.js', './src/plugins.js'])
+    .pipe(jshint())
+    .pipe(jshint.reporter('default'));
+});
+
 gulp.task('build', function() {
  build(fullSource, 'planetaryjs.js', fullHeader, false);
  build(fullSource, 'planetaryjs.min.js', shortHeader, true);
@ -34,6 +43,4 @@ gulp.task('build', function() {
  gulp.src('./src/world-110m.json').pipe(gulp.dest('./dist'));
 });

-gulp.task('default', function() {
-  gulp.run('build');
-});
+gulp.task('default', ['jshint', 'build']);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,27 +1,35 @@
 {
  "name": "planetary.js",
-  "version": "0.2.0",
+  "version": "1.1.3",
  "description": "Awesome interactive globes for the web",
+  "main": "dist/planetaryjs",
  "scripts": {
    "build": "rm -r dist/ ; gulp && cp dist/planetaryjs.min.js site/public/js/lib",
+    "jshint": "gulp jshint",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/BinaryMuse/planetary.js.git"
  },
-  "author": "Brandon Tilley <brandon@brandontilley.com>",
+  "author": "Michelle Tilley <michelle@michelletilley.net>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/BinaryMuse/planetary.js/issues"
  },
  "homepage": "http://planetaryjs.com",
  "devDependencies": {
-    "gulp": "~3.2.0",
+    "gulp": "~3.6.2",
    "gulp-concat": "BinaryMuse/gulp-concat",
-    "gulp-header": "~0.4.0",
-    "gulp-uglify": "~0.1.0",
-    "gulp-rename": "~0.2.1",
-    "bower": "~1.2.8"
+    "gulp-header": "~1.0.2",
+    "gulp-uglify": "~0.3.0",
+    "gulp-rename": "~1.2.0",
+    "bower": "~1.2.8",
+    "gulp-jshint": "~1.6.1",
+    "gulp-replace": "~0.3.0"
+  },
+  "dependencies": {
+    "topojson": "^1.4.6",
+    "d3": "^3.3.13"
  }
 }
--- a/script/set-version
+++ b/script/set-version
@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+var fs = require('fs');
+var spawn = require('child_process').spawn;
+
+var type    = process.argv[2];
+var version = process.argv[3];
+
+if ("stable" !== type && "unstable" !== type) {
+  console.log("You must specify 'stable' or 'unstable' version type.");
+  process.exit(1);
+}
+
+if (!version) {
+  console.log("You must specify a version.");
+  process.exit(1);
+}
+
+if (version[0] === 'v') {
+  version = version.replace(/^v/, '');
+}
+
+var package = require("../package.json");
+var bower   = require("../bower.json");
+var site    = require("../site/public/download/_data.json");
+
+package.version = version;
+bower.version = version;
+
+site[type].latest = site[type].latest || {};
+site[type].latest.version = "v" + version;
+
+fs.writeFileSync('package.json', JSON.stringify(package, null, '  ') + "\n");
+fs.writeFileSync('bower.json', JSON.stringify(bower, null, '  ') + "\n");
+fs.writeFileSync('site/public/download/_data.json', JSON.stringify(site, null, '  ') + "\n");
+
+spawn('npm', ['run', 'build']);
+
+console.log("Tasks:\n\n - Update CHANGELOG.md\n - Regenerate site\n - Create release on GH");
--- a/site/package.json
+++ b/site/package.json
@ -9,7 +9,7 @@
    "start": "harp server",
    "compile": "harp compile"
  },
-  "author": "Brandon Tilley <brandon@brandontilley.com>",
+  "author": "Michelle Tilley <michelle@michelletilley.net>",
  "license": "MIT",
  "private": true,
  "dependencies": {
--- a/site/public/_ga.ejs
+++ b/site/public/_ga.ejs
@ -0,0 +1,9 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-46705270-1', 'planetaryjs.com');
+  ga('send', 'pageview');
+</script>
--- a/site/public/_header.ejs
+++ b/site/public/_header.ejs
@ -3,6 +3,8 @@
 <link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
 <link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
+<meta property="og:site_name" content="Planetary.js">
--- a/site/public/_layout.ejs
+++ b/site/public/_layout.ejs
@ -12,5 +12,6 @@

  <%- partial("_scripts") %>
  <script type="text/javascript" src="js/homepage.js"></script>
+  <%- partial("_ga") %>
 </body>
 </html>
--- a/site/public/_menu.ejs
+++ b/site/public/_menu.ejs
@ -1,10 +1,10 @@
 <div class='ui fixed inverted large menu main-menu'>
  <div class='items'>
-    <a class='item title' href='/index.html'>
+    <a class='item title' href='/'>
      <i class='globe icon'></i>Planetary.js
    </a>
    <span class='spacer hide-on-mobile'></span>
-    <a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
+    <a class='item minor <%- current.path[0] == 'download' ? 'active' : '' %>' href='/download/'>
      <i class='download icon'></i><span class='hide-on-mobile'>Download</span>
    </a>
    <a class='item minor <%- current.path[0] == 'examples' ? 'active' : '' %>' href='/examples/'>
@ -13,7 +13,8 @@
    <a class='item minor <%- current.path[0] == 'documentation' ? 'active' : '' %>' href='/documentation/'>
      <i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
    </a>
-    <a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
+    <a class='item minor' href='https://github.com/BinaryMuse/planetary.js'
+      onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
      <i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
    </a>
  </div>
--- a/site/public/amd/_layout.ejs
+++ b/site/public/amd/_layout.ejs
@ -0,0 +1,10 @@
+<html>
+<head>
+  <title>Planetary.js AMD Test</title>
+</head>
+<body>
+  <canvas id='globe' width='500' height='500'></canavs>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"
+    data-main="/amd/test.js"></script>
+</body>
+</html>
--- a/site/public/amd/index.ejs
+++ b/site/public/amd/index.ejs
--- a/site/public/amd/test.js
+++ b/site/public/amd/test.js
@ -0,0 +1,24 @@
+requirejs.config({
+  baseUrl: '/js/lib',
+  shim: {
+    d3: { exports: 'd3' },
+    topojson: { exports: 'topojson' }
+  },
+  paths: {
+    "d3": 'd3.v3.min',
+    "topojson": 'topojson.v1.min'
+  }
+});
+
+requirejs(['planetaryjs.min'], function(planetaryjs) {
+  var planet = planetaryjs.planet();
+  // You can remove this statement if `world-110m.json`
+  // is in the same path as the HTML page:
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file: '/world-110m.json' }
+  }));
+  // Make the planet fit well in its canvas
+  planet.projection.scale(250).translate([250, 250]);
+  var canvas = document.getElementById('globe');
+  planet.draw(canvas);
+});
--- a/site/public/css/planetaryjs.less
+++ b/site/public/css/planetaryjs.less
@ -35,7 +35,7 @@ h1.title-header, h2.title-header {
  text-align: center;
 }

-.feature-list {
+.feature-list, .download-list {
  font-size: 17px;

  .icon {
@ -43,6 +43,10 @@ h1.title-header, h2.title-header {
  }
 }

+.ui.label.bower {
+  text-transform: none;
+}
+
 a.ui.icon.header {
  text-decoration: none;
  color: black;
@ -52,6 +56,10 @@ a.ui.icon.header {
  }
 }

+.section-description {
+  min-height: 40px;
+}
+
 .divider {
  .icon.huge {
    font-size: 2em;
@ -64,9 +72,10 @@ a.ui.icon.header {
  }
 }

-canvas {
+canvas#homepage-globe-canvas {
  width: 350px;
  height: 350px;
+  cursor: move;
 }

@media screen and (max-width: 768px) {
@ -124,6 +133,7 @@ canvas {

 .ui.dark.blue.label {
  background-color: #000080 !important;
+  margin-top: 5px;

  &:before {
    background-color: #000080 !important;
@ -134,8 +144,22 @@ canvas {
  text-decoration: none;
 }

-.ui.menu .item.with-subitems {
-  // padding-bottom: 0.2em;
+.example-segment {
+  .horizontal.label {
+    margin-top: 5px;
+  }
+
+  img {
+    width: 200px;
+    height: 200px;
+    float: left;
+    margin-right: 20px;
+
+    @media screen and (max-width: 768px) {
+      display: block;
+      float: none;
+    }
+  }
 }

 .ui.menu .item.contains-subitems {
@ -153,3 +177,9 @@ pre {
  font-size: 14px;
  overflow-x: auto;
 }
+
+.ui.items.examples {
+  a.item {
+    text-decoration: none;
+  }
+}
--- a/site/public/css/prism.css
+++ b/site/public/css/prism.css
@ -29,13 +29,13 @@ pre[class*="language-"] {
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 	text-shadow: none;
-	/* background: #b3d4fc; */
+	 background: #b3d4fc;
 }

 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
 	text-shadow: none;
-	/* background: #b3d4fc; */
+	 background: #b3d4fc;
 }

@media print {
--- a/site/public/documentation/_layout.ejs
+++ b/site/public/documentation/_layout.ejs
@ -15,6 +15,10 @@
            Introduction
            <i class='icon home'></i>
          </a>
+          <a class='purple item <%- current.source == 'installation' ? 'active' : '' %>' href='/documentation/installation.html'>
+            Installation
+            <i class='icon download'></i>
+          </a>
          <a class='blue item <%- current.source == 'core' ? 'active' : '' %>' href='/documentation/core.html'>
            Core API
            <i class='icon setting'></i>
@ -27,7 +31,7 @@
            Plugins
            <i class='icon edit'></i>
          </a>
-          <a class='green item with-subitems <%- current.source == 'builtin' ? 'active' : '' %>' href='/documentation/builtin.html'>
+          <a class='purple item with-subitems <%- current.source == 'builtin' ? 'active' : '' %>' href='/documentation/builtin.html'>
            Built-In Plugins
            <i class='icon bolt'></i>
          </a>
@ -43,6 +47,14 @@
              <a class='item <%- current.source == 'builtin_drag' ? 'active' : '' %>' href='/documentation/builtin_drag.html'>Drag</a>
            </div>
          </div>
+          <a class='red item <%- current.source == 'faq' ? 'active' : '' %>' href='/documentation/faq.html'>
+            FAQ
+            <i class='icon help'></i>
+          </a>
+          <a class='green item <%- current.source == 'help' ? 'active' : '' %>' href='/documentation/help.html'>
+            Getting Help
+            <i class='icon phone'></i>
+          </a>
        </div>
      </div>

@ -52,5 +64,6 @@
    </div>
  </div>
  <script type='text/javascript' src='/js/prism.js'></script>
+  <%- partial("../_ga") %>
 </body>
 </html>
--- a/site/public/documentation/builtin.md
+++ b/site/public/documentation/builtin.md
@ -5,11 +5,13 @@ Planetary.js comes with several built-in plugins that provide a base set of func

 * [Earth](/documentation/builtin_earth.html) - a combination of the `topojson`, `oceans`, `land`, and `borders` plugins.
 * [TopoJSON](/documentation/builtin_topojson.html) - loads TopoJSON data via Ajax (or via configuration) and makes it available for use by other plugins
-* [Oceans](/documentation/builtin_oceans.html) - fills in the globe with a solid color (and an optional stroke)
+* [Oceans](/documentation/builtin_oceans.html) - fills in the globe with a solid color
 * [Land](/documentation/builtin_land.html) - uses data from the `topojson` plugin to draw Earth's land masses
 * [Borders](/documentation/builtin_borders.html) - uses data from the `topojson` plugin to draw borders between Earth's countries
 * [Pings](/documentation/builtin_pings.html) - draws animated, circular pings on the globe
-* [Zoom](/documentation/builtin_zoom.html) - enables mouse-based zooming of the globe via the mousewheel
+* [Zoom](/documentation/builtin_zoom.html) - enables mouse-based zooming of the globe via the mouse wheel
 * [Drag](/documentation/builtin_drag.html) - enables mouse-based rotation of the globe via dragging

-Built-in plugins exposed as properties on `planetaryjs.plugins`.
+Built-in plugins are exposed as properties on `planetaryjs.plugins`.
+
+If you do not specify any plugins (globally or per-instance), Planetary.js will use the `earth` and `pings` plugins with their default settings.
--- a/site/public/documentation/builtin_borders.md
+++ b/site/public/documentation/builtin_borders.md
@ -1,7 +1,7 @@
 Borders Plugin
 ==============

-The `borders` plugin renders the borders around (and between) countries. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html).
+The `borders` plugin renders the borders around (and between) countries. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.countries` in the TopoJSON object to calculate the borders.

 API
 ---
@ -14,7 +14,7 @@ Valid keys for `config` are:
 * `lineWidth` the `lineWidth` to set on the context; defaults to no value, and the context's `lineWidth` is not modified
 * `type`: valid options are `"internal"`, `"external"`, or `"both"`. `"internal"` draws borders between countries but not coastlines; `"external"` does the opposite. `"both"`, unsurprisingly, draws both. Defaults to `"internal"`.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -26,4 +26,5 @@ planetaryjs.plugins.borders({

 See also:

+* [Earth Plugin](/documentation/builtin_earth.html)
 * [TopoJSON Plugin](/documentation/builtin_topojson.html)
--- a/site/public/documentation/builtin_drag.md
+++ b/site/public/documentation/builtin_drag.md
@ -1,2 +1,25 @@
 Drag Plugin
 ===========
+
+The `drag` plugin allows for modifying the planet's projection's rotation with the mouse. It supports dragging vertically with hard stops at the north and south poles, and dragging horizontally without restriction.
+
+API
+---
+
+**`planetaryjs.plugins.drag([config])`**
+
+Valid keys for `config` are:
+
+* `onDragStart`, `onDragEnd`, `onDrag`, `afterDrag`: hooks to the `d3.behavior.drag` object's `dragstart`, `dragend`, and `drag` events; each defaults to a no-op. `onDrag` fires at the start of the `drag` event, `afterDrag` at the end. The planet instance is available as `this` inside the each of the functions.
+
+<div class='ui raised segment'>
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+planetaryjs.plugins.drag({
+  onDrag: function() {
+    console.log("The planet was dragged!", this, d3.event);
+  }
+});
+```
+</div>
--- a/site/public/documentation/builtin_earth.md
+++ b/site/public/documentation/builtin_earth.md
@ -15,7 +15,7 @@ Valid keys for `config` are:
 * `land`: options to pass to the `land` plugin
 * `borders`: options to pass to the `borders` plugin

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
--- a/site/public/documentation/builtin_land.md
+++ b/site/public/documentation/builtin_land.md
@ -1,7 +1,7 @@
 Land Plugin
 ===========

-The `land` plugin renders Earth's landmasses. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html).
+The `land` plugin renders Earth's landmasses. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.land` in the TopoJSON object.

 API
 ---
@ -14,7 +14,7 @@ Valid keys for `config` are:
 * `stroke`: the `strokeStyle` to use for the context; defaults to no value, resulting in no stroke around the landmasses
 * `lineWidth` the `lineWidth` to set on the context; only effective if `stroke` is set. Defaults to no value, resulting in no change to the context's `lineWidth`

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -26,4 +26,5 @@ planetaryjs.plugins.land({

 See also:

+* [Earth Plugin](/documentation/builtin_earth.html)
 * [TopoJSON Plugin](/documentation/builtin_topojson.html)
--- a/site/public/documentation/builtin_oceans.md
+++ b/site/public/documentation/builtin_oceans.md
@ -12,7 +12,7 @@ Valid keys for `config` are:

 * `fill`: the `fillStyle` to use for the globe; defaults to `"black"`

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -21,3 +21,7 @@ planetaryjs.plugins.oceans({
 });
 ```
 </div>
+
+See also:
+
+* [Earth Plugin](/documentation/builtin_earth.html)
--- a/site/public/documentation/builtin_pings.md
+++ b/site/public/documentation/builtin_pings.md
@ -13,8 +13,9 @@ Valid keys for `config` are:
 * `color`: the default color for pings; defaults to `"white"`
 * `ttl`: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
 * `angle`: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to `5`
+* `latitudeFirst`: reverse the order of the latitudinal and longitudinal coordinates passed to the `add` function (so that the latitudinal coordinate comes first); defaults to false. See the note on `add`, below, for more information.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -24,11 +25,21 @@ planetaryjs.plugins.pings({
 ```
 </div>

-**`planet.plugins.pings.add(lat, lng, [config])`**
+**`planet.plugins.pings.add(lng, lat, [config])`**

-Add a new ping to the globe at the latitudinal and longitudinal coordinates specified by `lat` and `lng`. `config` may take all the same keys as the configuration option for the plugin itself; any values will overwrite values from that object, if any were set.
+Add a new ping to the globe at the longitudinal and latitudinal coordinates specified by `lng` and `lat`. Valid keys for `config` are:

-<div class='ui raise segment'>
+* `color`: the default color for pings; defaults to `"white"`
+* `ttl`: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
+* `angle`: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to `5`
+
+Any values not set by `config` will default to the values specified in the plugin's configuration, if any were set.
+
+<div class='ui red raised segment'>
+<i class='red icon warning'></i> **Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass `latitudeFirst` as an option to the plugin configuration function.** This corresponds to the conventions used by D3 (which Planetary.js is based on); for more information on the problem of axis ordering in software, see [this article at the GeoTools web site](http://docs.geotools.org/latest/userguide/library/referencing/order.html).
+</div>
+
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -38,7 +49,7 @@ setInterval(function() {
  var lng = Math.random() * 360 - 180;
  var color = colors[Math.floor(Math.random() * colors.length)];
  var angle = Math.random() * 10;
-  planet.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: angle });
+  planet.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: angle });
 }, 250);
 ```
 </div>
--- a/site/public/documentation/builtin_topojson.md
+++ b/site/public/documentation/builtin_topojson.md
@ -12,12 +12,12 @@ API

 Valid keys for `config` are:

-* `world`: a JavaScript object representing TopoJSON data (not JSON data); defaults to no value, which will cause the plugin to load data from the `file` configuration option
-* `file`: the path to a TopoJSON data file to be loaded via Ajax; defaults to `"world-110m.json"`, which can be downloaded with the Planetary.js library from the [download page](https://github.com/BinaryMuse/planetary.js/releases).
+* `world`: a JavaScript object representing TopoJSON data (not a JSON string); defaults to no value, which will cause the plugin to load data from the `file` configuration option
+* `file`: the path to a TopoJSON data file to be loaded via Ajax; defaults to `"world-110m.json"`, which can be downloaded with the Planetary.js library from the [download page](/download/).

 If you plan on creating more than one planet from the same TopoJSON data, you can load the data once before loading the plugin and pass the parsed data to the plugin via the `world` property rather than letting the plugin load the data via Ajax each time a new planet is created.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -27,7 +27,7 @@ planetaryjs.plugins.topojson({
 ```
 </div>

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -40,5 +40,10 @@ d3.json('/data/world-110m.json', function(err, data) {
 ```
 </div>

+**`planet.plugins.topojson.world`**
+
+The plugin will publish the TopoJSON data to this key once it has been initialized by the plugin.
+
+* [Earth Plugin](/documentation/builtin_earth.html)
 * [Land Plugin](/documentation/builtin_land.html)
 * [Borders Plugin](/documentation/builtin_borders.html)
--- a/site/public/documentation/builtin_zoom.md
+++ b/site/public/documentation/builtin_zoom.md
@ -1,2 +1,28 @@
 Zoom Plugin
 ===========
+
+The `zoom` plugin allows for modifying the planet's projection's scale with the mouse wheel.
+
+API
+---
+
+**`planetaryjs.plugins.zoom([config])`**
+
+Valid keys for `config` are:
+
+* `initialScale`: the value to initialize the [`d3.behavior.zoom`](https://github.com/mbostock/d3/wiki/Zoom-Behavior) object's scale to; defaults to the scale of the planet's projection at the time the planet is initialized
+* `scaleExtent`: the value to use for the `d3.behavior.zoom` object's `scaleExtent` property, which defines how far in and out the planet can be zoomed; defaults to `[50, 2000]`
+* `onZoomStart`, `onZoomEnd`, `onZoom`, `afterZoom`: hooks to the `d3.behavior.zoom` object's `zoomstart`, `zoomend`, and `zoom` events; each defaults to a no-op. `onZoom` fires at the start of the `zoom` event, `afterZoom` at the end. The planet instance is available as `this` inside the each of the functions.
+
+<div class='ui raised segment'>
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+planetaryjs.plugins.zoom({
+  scaleExtent: [200, 1000],
+  onZoom: function() {
+    console.log("The planet was zoomed!", this, d3.event);
+  }
+});
+```
+</div>
--- a/site/public/documentation/core.md
+++ b/site/public/documentation/core.md
@ -1,28 +1,6 @@
 Core API
 ========

-Installation
------------
-
-Once you've [downloaded Planetary.js](https://github.com/BinaryMuse/planetary.js/releases), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
-
-<div class='ui raised segment'>
-<div class='ui blue ribbon label'>HTML</div>
-
-```html
-<html>
-<head>
-  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
-  <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
-  <script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
-</head>
-<body>
-...
-```
-</div>
-
-If you use the default `topojson` plugin (most people will), you'll also need to make sure `world-110m.json` (or some other TopoJSON data file) is available on your server. This file is also available from [the download page](https://github.com/BinaryMuse/planetary.js/releases). See the [TopoJSON Plugin](/documentation/builtin_topojson.html) documentation for more information.
-
 Core API
 --------

@ -42,7 +20,7 @@ var planetary = planetaryjs.noConflict();

 Planetary.js uses a plugin architecture for all its functionality. Calling `planetaryjs.loadPlugin` will cause that plugin to be loaded in *all* planets created from this library. If you only want to use a plugin in some of your planets, use the `planet.loadPlugin` method (from the [Planet API](/documentation/planet.html)) instead.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -51,13 +29,13 @@ planetaryjs.loadPlugin(somePluginGenerator());
 ```
 </div>

-For more information on the plugin system and API, please see the [Plugins](/documentation/plugins.html) documentation.
+For more information on the plugin system and API, please see the [Plugins documentation](/documentation/plugins.html).

 **`planetaryjs.planet()`**

-The `planet` API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with `planetaryjs.loadPlugin()` active. It has various methods for manipulating the globe and drawing it to a canvas. The [Planet API](/documentation/planet.html) covers these methods in considerably more detail.
+The `planet` API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with `planetaryjs.loadPlugin` active. It has various methods for manipulating the globe and drawing it to a canvas. The [Planet API](/documentation/planet.html) covers these methods in considerably more detail.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
--- a/site/public/documentation/faq.md
+++ b/site/public/documentation/faq.md
@ -0,0 +1,47 @@
+FAQ
+===
+
+**Q:** Why are the pings I add from the [Pings plugin](/documentation/builtin_pings.html) in the wrong place?
+
+**A:** Like D3 on which it is based, Planetary.js accepts coordinates with the longitudinal coordinate first. You can set the `latitudeFirst` option in the plugin configuration to change this. There is some additional discussion on the subject in the [Pings plugin documentation](/documentation/builtin_pings.html).
+
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
+**Q:** Why can't I access my DOM element?
+
+**A:** Planetary.js provides no methods for DOM access or for waiting for the DOM ready event; you'll need to handle this on your own or use a third-party library.
+
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
+**Q:** Why doesn't my `canvas` element work with Planetary.js?
+
+**A:** Planetary.js asks for raw DOM elements; if you have an element wrapped with jQuery, D3, or a similar library, you'll need to unwrap it to pass to your
+planet's `draw` method.
+
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
+**Q:** Why can't I load the `world-110m.json` file with the TopoJSON plugin?
+
+**A:** After checking to make sure you've specified the correct path to the file in the plugin's configuration options, ensure that you're viewing your page over HTTP. Your browser won't be able to make the necessary Ajax request to load the file if you're just viewing the page from your filesystem.
+
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
+**Q:** How do I manipulate my globe?
+
+**A:** The planet object has methods and properties for manipulating the globe; most notable is the `projection` property. See the [Planet API](/documentation/planet.html) for more information.
+
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
+**Q:** I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."
+
+**A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) libraries before Planetary.js.
--- a/site/public/documentation/help.md
+++ b/site/public/documentation/help.md
@ -0,0 +1,8 @@
+Getting Help
+============
+
+[Stack Overflow](http://stackoverflow.com/) is a great place to get help when you're stuck on a particular issue. Tag your question with `planetary.js` when you post it.
+
+If you think you've found a bug, hop over to [the Planetary.js issues page](https://github.com/BinaryMuse/planetary.js/issues) and file a bug (assuming the same bug hasn't already been reported).
+
+If you have an idea for an improvement or other change, feel free to open a GitHub pull request.
--- a/site/public/documentation/index.md
+++ b/site/public/documentation/index.md
@ -1,23 +1,27 @@
 Introduction
 ============

-Planetary.js is a JavaScript library for building awesome interactive globes. It uses [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) to parse and render geographic data. Planetary.js is a plugin-based system; even the default functionality is implemented as plugins! This makes Planetary.js extremely flexible.
+Planetary.js is a JavaScript library for building awesome interactive globes. It uses [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) to parse and render geographic data. Planetary.js uses a plugin-based architecture; even the default functionality is implemented as plugins! This makes Planetary.js extremely flexible.

 The documentation is split up into several sections:

-* [Core API](/documentation/core.html) describes the top-level Planetary.js API, including installing and configuring the library and creating new instances of planets.
+* [Core API](/documentation/core.html) describes the top-level Planetary.js API, including installing and configuring the library and creating new planet instances.
 * [Planet API](/documentation/planet.html) describes the API associated with a planet instance, including modifying its properties and accessing a special canvas context that allows you to draw on the globe.
-* [Plugins](/documentation/plugins.html) describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js
+* [Plugins](/documentation/plugins.html) describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js.
 * [Built-In Plugins](/documentation/builtin.html) describes each of the built-in plugins in turn, including their public API and how to use them in a project.
+* [FAQ](/documentation/faq.html) answers some common question and addresses a few easy-to-miss gotchas.
+* [Getting Help](/documentation/help.html) describes what to do if you still need help after reading this documentation.

 Quick Start
 -----------

-If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a quick, simple globe working quickly.
+If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running (once you've [installed Planetary.js](/documentation/installation.html)).

 Note that you'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax (Ajax requests don't work when viewing a page directly from the filesystem).

-<div class='ui raise segment'>
+Be sure to check out [the examples](/examples/) as well!
+
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>

 ```html
--- a/site/public/documentation/installation.md
+++ b/site/public/documentation/installation.md
@ -0,0 +1,97 @@
+Installation
+============
+
+Once you've [downloaded Planetary.js](/download/), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+
+```html
+<html>
+<head>
+  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
+  <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
+  <script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
+</head>
+<body>
+...
+```
+</div>
+
+If you use the default `topojson` plugin (most people will), you'll also need to make sure `world-110m.json` (or some other TopoJSON data file) is available on your server. This file is also available from [the download page](/download/). See the [TopoJSON Plugin documentation](/documentation/builtin_topojson.html) for more information.
+
+Planetary.js also supports installation via AMD and CommonJS loaders.
+
+AMD
+---
+
+This example uses [RequireJS](http://requirejs.org/). Since neither D3 nor TopoJSON support AMD, we will use RequireJS's [shim configuration](http://requirejs.org/docs/api.html#config-shim).
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+
+```html
+<body>
+  <canvas id='globe' width='500' height='500'></canavs>
+  <script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
+    data-main='/app.js'></script>
+</body>
+```
+
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+requirejs.config({
+  // Tell RequireJS to use `window.d3` and `window.topojson`
+  // for those libraries, respectively
+  shim: {
+    d3: { exports: 'd3' },
+    topojson: { exports: 'topojson' }
+  },
+  paths: {
+    'd3': 'path/to/d3.v3.min',
+    'topojson': 'path/to/topojson.v1.min'
+  }
+});
+
+requirejs(['planetaryjs'], function(planetaryjs) {
+  // Use Planetary.js here
+});
+
+```
+</div>
+
+CommonJS
+--------
+
+First, install `browserify` from npm (as well as `planetary.js` v1.0.2+, if you haven't already). Then, create your application (here referred to as `app.js`) and bundle it with browserify.
+
+<div class='ui raised segment'>
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+var planetaryjs = require('planetary.js');
+
+var planet = planetaryjs.planet();
+var canvas = document.getElementById('canvas');
+planet.draw(canvas);
+```
+
+<div class='ui purple ribbon label'>Shell</div>
+
+```shell
+$ npm install browserify
+$ ./node_modules/.bin/browserify app.js > bundle.js
+```
+</div>
+
+`bundle.js` is now ready to use! You may need to set the `charset` option on your script tag:
+
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+
+```html
+<script type='text/javascript' src='bundle.js' charset='utf-8'></script>
+```
+</div>
--- a/site/public/documentation/planet.md
+++ b/site/public/documentation/planet.md
@ -1,13 +1,13 @@
 Planet API
 ==========

-A "planet" represents a single globe and its rendering instructions. It is created from the `planetaryjs.planet()` method; see the [Core API](/documentation/core.html) documentation for more details.
+A "planet" represents a single globe and its rendering instructions. It is created from the `planetaryjs.planet` method; see the [Core API documentation](/documentation/core.html) for more details.

 **`planet.loadPlugin(plugin)`**

 Planetary.js uses a plugin architecture for all its functionality. While you can load plugins at the global library level, Planetary.js also allows you to load plugins for specific planets. **If a planet is drawn and no plugins have been loaded globally and no plugins have been loaded for the specific planet instance, it will use the default `earth` and `pings` plugins.**

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -16,27 +16,28 @@ planet.loadPlugin(somePluginGenerator());
 ```
 </div>

-For more information on the plugin system and API, please see the [Plugins](/documentation/plugins.html) documentation.
+For more information on the plugin system and API, please see the [Plugins documentation](/documentation/plugins.html).

 **`planet.projection`**

 The core of a planet's data model is an [`d3.geo.projection`](https://github.com/mbostock/d3/wiki/Geo-Projections) (specifically, an orthographic projection), which is exposed by a planet by `planet.projection`. You can use this object to control various aspects of the planet. The D3 documentation covers the methods in considerable detail, so [be sure to check it out](https://github.com/mbostock/d3/wiki/Geo-Projections); many of the examples on this site also use the projection object to operate.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
 planet.projection
  .scale(width / 2)
+  .translate([width / 2, height / 2])
  .rotate([60, -10, 0]);
 ```
 </div>

 **`planet.path`**

-`planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) which uses the planet's internal projection to generate path data for geographical features. Its `context` method is commonly used by interal plugins to take a canvas context and return a path generator that can be used to draw on the globe.
+`planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) which uses the planet's internal projection to generate path data for geographical features. Its `context` method is commonly used by internal plugins to take a canvas context and return a path generator that can be used to draw on the globe.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -56,11 +57,11 @@ Once you call `draw` on a planet instance, Planetary.js will set the `canvas` an

 **`planet.onInit( function([done]){} )`**

-Registers a function to be called when the planet is initialized (which happens after a call to `draw` and after any loaded plugins have been initialized). This is mostly used by plugins to initialize themselves when the planet "boots."
+Registers a function to be called when the planet is initialized (which happens after a call to `draw` and after any registered plugins have been loaded). This is mostly used by plugins to initialize themselves when the planet "boots."

 If the provided callback function takes any parameters, it will be a "done" function that must be called once the initialization function finishes any asynchronous work before the planet will continue to initialize.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -80,7 +81,7 @@ planet.onInit(function(done) {

 Registers a function to be called each time the globe redraws itself. This is mostly used by plugins to draw plugin-specific data or otherwise animate the globe.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -93,11 +94,29 @@ planet.onDraw(function() {
 ```
 </div>

+**`planet.onStop( function(){} )`**
+
+Registers a function to be called when the planet is stopped with the `stop` method. This can be used to clean up timers and remove references to internal planet properties and plugins, if necessary, so that it can be property garbage collected.
+
+<div class='ui raised segment'>
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+var interval = setInterval(function() {
+  addRandomPing(planet); // uses `planet.plugins.pings`
+}, 150);
+
+planet.onStop(function() {
+  clearInterval(interval);
+});
+```
+</div>
+
 **`planet.withSavedContext( function(context){} )`**

-Calls the function with the current canvas context as a paremter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
+Calls the function with the current canvas context as a parameter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -118,12 +137,12 @@ Begins drawing the globe onto the given canvas. `canvas` should be a raw DOM ele

 Calling `draw` will perform the following operations:

-1. Initialize each loaded plugin by calling the plugin function.
+1. Initialize each loaded plugin by calling the plugin function (note: this only happens the first time you call `draw`).
 2. Set `planet.canvas` and `planet.context` to the canvas and the canvas' context, respectively.
 3. Run each registered `onInit` hook in the order it was registered (note that `onInit` calls made by plugins will not be made until step 1, after `draw` has been called).
 4. Start the animation loop, each tick clearing the canvas and calling any registered `onDraw` hooks in order.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>

 ```html
@ -137,3 +156,21 @@ var canvas = document.getElementById('myCanvas');
 planet.draw(canvas);
 ```
 </div>
+
+Once you've called `draw()` on a planet, you should not call it again unless you first call `stop()`.
+
+**`planet.stop()`**
+
+Stop drawing the planet to the canvas. This disables the internal draw loop. You can register functions to call when the planet is stopped using the `onStop` method; if you don't plan on reusing the planet, be sure to clean up timers and references to internal properties, if necessary, so that it can be garbage collected.
+
+You can draw the planet to a new (or the same) canvas using the `draw` method as normal. All your plugins' `onInit` functions will fire, although the plugin function itself will not be called again.
+
+Keep in mind that, since the internal draw loop is stopped, your plugins' `onDraw` functions are not being called. If you have timers or other mechanisms that continually push data into a data structure that an `onDraw` method cleans up, you should disable or pause it.
+
+<div class='ui raised segment'>
+<div class='ui red ribbon label'>JavaScript</div>
+
+```javascript
+planet.stop();
+```
+</div>
--- a/site/public/documentation/plugins.md
+++ b/site/public/documentation/plugins.md
@ -11,11 +11,11 @@ Plugins are loaded either globally by `planetaryjs.loadPlugin` or for a specific
 Anatomy of a Plugin
 -------------------

-A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some predefined operation. **The best plugins do one tiny thing.** If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the `earth` plugin is built. See the [Earth Plugin](/documentation/builtin_earth.html) documentation for more details.
+A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some operation on it. **The best plugins do one tiny thing.** If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the `earth` plugin is built. See the [Earth Plugin documentation](/documentation/builtin_earth.html) for more details.

-Most of the time, a plugin will implement its behavior by registering callbacks into the planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):
+Most of the time, a plugin will implement its behavior by registering callbacks into a planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -32,12 +32,12 @@ planet.loadPlugin(autorotate);
 ```
 </div>

-Plugin Generators
-----------------
+Configurable Plugins
+--------------------

-Often, you'll want your plugin to be configurable with some user-defined values. You can create a function generator, which is a function that takes your configuration data and then *returns* the plugin function. You can then call this generator to generate the plugin function for use by `loadPlugin`.
+Often, you'll want your plugin to be configurable with some user-defined values. In this case, you can create a higher-order function, which takes your configuration data and then *returns* the plugin function. You can then call this function to generate the plugin for use by `loadPlugin`.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -61,7 +61,7 @@ Setting Yourself Up

 If you need to do some work before your plugin is ready to be used, you can add a hook to a planet's `onInit` hook to do the necessary setup.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -73,9 +73,9 @@ var somePlugin = function(planet) {
 ```
 </div>

-If you need to do some asynchronous setup--such as fetching data with an Ajax request--before your plugin is ready, you can accept an argument to your `onInit` function. When you're done setting up, call this function and Planetary.js will continue to initialize the planet. **If you accept the parameter but don't call it, the initialization process will stop** (and your planet will not work).
+If you need to do some asynchronous setup--such as fetching data with an Ajax request--before your plugin is ready, you can accept an argument to your `onInit` function. This argument is a function that tells Planetary.js when you're done setting up; simply call this function after your asynchronous operations are complete and Planetary.js will continue to initialize the planet. **If you accept the parameter but don't call it, the initialization process will stop** (and your planet will not work).

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -94,7 +94,7 @@ Drawing on the Canvas

 Many plugins will want to draw onto the globe's canvas; you can do so by registering a function to a planet's `onDraw` hook.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -111,15 +111,15 @@ var somePlugin = function(planet) {
 ```
 </div>

-The planet exposes properties and methods, such as `context`, `path`, and `withSavedContext` to assist with drawing to the canvas. The [Planet API](/documentation/planet.html) documentation goes into more detail on individual properties.
+The planet exposes properties and methods, such as `context`, `path`, and `withSavedContext` to assist with drawing to the canvas. The [Planet API documentation](/documentation/planet.html) goes into more detail on individual properties.

 ### Drawing Geo Paths

-As explained in the `planet.path` documentation on the [Planet API](/documentation/planet.html) page, `planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) object that can be used to draw geographical geometry onto the canvas. The path will take care of transforming the coordinates to be projected onto the orthographic view of the globe.
+As explained in the `planet.path` documentation on the [Planet API page](/documentation/planet.html), `planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) object that can be used to draw geographical geometry onto the canvas. The path will take care of transforming the coordinates to be projected onto the orthographic view of the globe.

-As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on `planet.plugins.topojson.world`), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) how the [Land plugin](/documentation/builtin_land.html) works.
+As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on `planet.plugins.topojson.world`), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) the [Land plugin's](/documentation/builtin_land.html) implementation.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -142,9 +142,9 @@ var drawLand = function(planet) {
 Exposing Data and Methods
 -------------------------

-Obviously, you can use private internal variables to keep track of any data your plugin needs to operate. However, if you want to expose a public API to users of your plugin, you should avoid attaching them directly to the planet and instead attach them to the planet's `plugins` namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin's documentation.
+Obviously, you can use private internal variables to keep track of any data your plugin needs in order to operate. However, if you want to expose a public API to users of your plugin, you should avoid attaching them directly to the planet and instead attach them to the planet's `plugins` namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin's documentation.

-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>

 ```javascript
@ -152,6 +152,8 @@ var autorotate = function(degreesPerTick) {
  return function(planet) {
    var paused = false;

+    // Attach our public API to `planet.plugins`
+    // on the `autorotate` namespace.
    planet.plugins.autorotate = {
      pause:  function() { paused = true;  },
      resume: function() { paused = false; }
@ -182,6 +184,6 @@ Best Practices
 There are a few things you can do to make your plugin all it can be:

 1. Make your plugin very small; ideally, it should do only *one thing* very well. Be extremely liberal with splitting plugins into smaller plugins, which makes them easier to understand, test, and compose. It's easy to say "this plugin renders the Earth," but it really renders oceans, land masses, and borders.
-2. Use function generators to generate your plugin (as described above in "Plugin Generators"), even if it doesn't take any configuration options. It makes for a more consistent API, and allows you to add the ability to specify configuration options in the future without changing the base API.
+2. Use higher-order functions to generate your plugin (as described above in "Plugin Generators") instead of passing function references to `loadPlugin` directly, even if your plugin doesn't take any configuration options. It makes for a more consistent API, and allows you to more easily add the ability to specify configuration options in the future.
 3. Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.
 4. Only publish public data and API methods to `planet.plugins.pluginName`, where `pluginName` is the name of your plugin.
--- a/site/public/download/_data.json
+++ b/site/public/download/_data.json
@ -0,0 +1,12 @@
+{
+  "stable": {
+    "latest": {
+      "version": "v1.1.2"
+    }
+  },
+  "unstable": {
+    "latest": {
+      "version": "v1.0.0-rc.2"
+    }
+  }
+}
--- a/site/public/download/_layout.ejs
+++ b/site/public/download/_layout.ejs
@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <%- partial("../_header") %>
+  <link href="/css/prism.css" rel="stylesheet">
+</head>
+<body>
+  <%- partial("../_menu") %>
+
+  <div class='content container'>
+    <div class='page ui slim stackable grid'>
+      <div class='sixteen wide column'>
+        <%- yield %>
+      </div>
+    </div>
+  </div>
+  <%- partial("../_ga") %>
+</body>
+</html>
--- a/site/public/download/index.ejs
+++ b/site/public/download/index.ejs
@ -0,0 +1,99 @@
+<% data = public.download._data %>
+<% dl = function(version, file) { %>
+<%   return "https://github.com/BinaryMuse/planetary.js/releases/download/" + version + "/" + file; %>
+<% } %>
+
+<h1><i class='icon download disk'></i> Download Planetary.js</h1>
+
+<p>Download the core Planetary.js library and supporting files here.</p>
+
+<p>Up-to-the-minute releases, archived versions, and full release notes can be found <a href='https://github.com/BinaryMuse/planetary.js/releases'>on the GitHub releases page</a>.</p>
+
+<% if (data.stable.latest) { %>
+  <h2>Latest Stable Build: <%= data.stable.latest.version %></h2>
+  <p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.stable.latest.version %>">Release notes</a>
+  |
+  <a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.stable.latest.version %>">GitHub tag</a></p>
+
+  <div class='ui list download-list'>
+    <div class='item'>
+      <i class='icon download'></i>
+      Core library: [
+      <a href='<%= dl(data.stable.latest.version, 'planetaryjs.min.js') %>'>minified</a>
+      |
+      <a href='<%= dl(data.stable.latest.version, 'planetaryjs.js') %>'>unminified</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon download'></i>
+      Core library (no plugins): [
+      <a href='<%= dl(data.stable.latest.version, 'planetaryjs-noplugins.min.js') %>'>minified</a>
+      |
+      <a href='<%= dl(data.stable.latest.version, 'planetaryjs-noplugins.js') %>'>unminified</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon globe'></i>
+      Earth TopoJSON data ("land" and "countries" objects): [
+      <a href='<%= dl(data.stable.latest.version, 'world-110m.json') %>'>download</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon code'></i>
+      Source code [
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.stable.latest.version %>.zip'>.zip</a>
+        |
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.stable.latest.version %>.tar.gz'>.tar.gz</a>
+      ]
+    </div>
+  </div>
+
+<% } else { %>
+  <h2>No stable builds yet</h2>
+<% } %>
+
+
+
+
+<% if (data.unstable.latest) { %>
+  <h2>Latest Unstable Build: <%= data.unstable.latest.version %></h2>
+  <p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.unstable.latest.version %>">Release notes</a>
+  |
+  <a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.unstable.latest.version %>">GitHub tag</a></p>
+
+  <div class='ui list download-list'>
+    <div class='item'>
+      <i class='icon download'></i>
+      Core library: [
+      <a href='<%= dl(data.unstable.latest.version, 'planetaryjs.min.js') %>'>minified</a>
+      |
+      <a href='<%= dl(data.unstable.latest.version, 'planetaryjs.js') %>'>unminified</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon download'></i>
+      Core library (no plugins): [
+      <a href='<%= dl(data.unstable.latest.version, 'planetaryjs-noplugins.min.js') %>'>minified</a>
+      |
+      <a href='<%= dl(data.unstable.latest.version, 'planetaryjs-noplugins.js') %>'>unminified</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon globe'></i>
+      Earth TopoJSON data ("land" and "countries" objects): [
+      <a href='<%= dl(data.unstable.latest.version, 'world-110m.json') %>'>download</a>
+      ]
+    </div>
+    <div class='item'>
+      <i class='icon code'></i>
+      Source code [
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.unstable.latest.version %>.zip'>.zip</a>
+        |
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.unstable.latest.version %>.tar.gz'>.tar.gz</a>
+      ]
+    </div>
+  </div>
+
+<% } else { %>
+  <h2>No unstable builds yet</h2>
+<% } %>
--- a/site/public/examples/_layout.ejs
+++ b/site/public/examples/_layout.ejs
@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <%- partial("../_header") %>
+  <link href="/css/prism.css" rel="stylesheet">
+</head>
+<body>
+  <%- partial("../_menu") %>
+
+  <div class='content container'>
+    <div class='page ui slim stackable grid'>
+      <div class='sixteen wide column'>
+        <%- yield %>
+      </div>
+    </div>
+  </div>
+  <script type='text/javascript' src='/js/prism.js'></script>
+  <%- partial("../_ga") %>
+</body>
+</html>
--- a/site/public/examples/_scripts_basic.ejs
+++ b/site/public/examples/_scripts_basic.ejs
@ -0,0 +1,2 @@
+<%- partial('../_scripts') %>
+<script type='text/javascript' src='/examples/basic.js'></script>
--- a/site/public/examples/_scripts_rotating.ejs
+++ b/site/public/examples/_scripts_rotating.ejs
@ -0,0 +1,2 @@
+<%- partial('../_scripts') %>
+<script type='text/javascript' src='/examples/rotating.js'></script>
--- a/site/public/examples/basic.ejs
+++ b/site/public/examples/basic.ejs
@ -0,0 +1,37 @@
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">Basic Globe</div>
+</div>
+
+<h1>Basic Globe</h1>
+
+<p>This example shows the minimum code you need to render a basic representation of the planet Earth.</p>
+
+<div style='text-align: center;'>
+  <canvas id='basicGlobe' width='400' height='400'></canvas>
+</div>
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+<pre class='line-numbers'><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'&gt;&lt;/canvas&gt;</code></pre>
+
+<div class='ui red ribbon label'>JavaScript</div>
+<pre class='line-numbers'><code class='language-javascript'>(function() {
+  var canvas = document.getElementById('basicGlobe');
+  var planet = planetaryjs.planet();
+  // Loading this plugin technically happens automatically,
+  // but we need to specify the path to the `world-110m.json` file.
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file: '/world-110m.json' }
+  }));
+  // Scale the planet's radius to half the canvas' size
+  // and move it to the center of the canvas.
+  planet.projection
+    .scale(canvas.width / 2)
+    .translate([canvas.width / 2, canvas.height / 2]);
+  planet.draw(canvas);
+})();</code></pre>
+</div>
+
+<%- partial('_scripts_basic') %>
--- a/site/public/examples/basic.js
+++ b/site/public/examples/basic.js
@ -0,0 +1,15 @@
+(function() {
+  var canvas = document.getElementById('basicGlobe');
+  var planet = planetaryjs.planet();
+  // Loading this plugin technically happens automatically,
+  // but we need to specify the path to the `world-110m.json` file.
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file: '/world-110m.json' }
+  }));
+  // Scale the planet's radius to half the canvas' size
+  // and move it to the center of the canvas.
+  planet.projection
+    .scale(canvas.width / 2)
+    .translate([canvas.width / 2, canvas.height / 2]);
+  planet.draw(canvas);
+})();
--- a/site/public/examples/index.ejs
+++ b/site/public/examples/index.ejs
@ -0,0 +1,35 @@
+<h1>Examples</h1>
+
+<p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
+
+<div class='ui top attached segment example-segment'>
+  <div>
+    <a href='/examples/basic.html'><img src='/images/ex-basic.png'></a>
+    <a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a>
+    <p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
+    <span class='ui red horizontal label'>plugins: earth</span>
+    <span class='ui purple horizontal label'>d3: projections</span>
+  </div>
+</div>
+
+<div class='ui attached segment example-segment'>
+  <div>
+    <a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a>
+    <a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a>
+    <p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
+    <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui teal horizontal label'>custom plugins</span>
+    <span class='ui purple horizontal label'>d3: projections</span>
+  </div>
+</div>
+
+<div class='ui bottom attached segment example-segment'>
+  <div>
+    <a href='/examples/quake.html'><img src='/images/ex-quake.png'></a>
+    <a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a>
+    <p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
+    <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui teal horizontal label'>custom plugins</span>
+    <span class='ui purple horizontal label'>d3: projections, scales, selections, events, external data</span>
+  </div>
+</div>
--- a/site/public/examples/quake.ejs
+++ b/site/public/examples/quake.ejs
@ -0,0 +1,260 @@
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">2013 Seismic Activity Visualization</div>
+</div>
+
+<h1>2013 Seismic Activity Visualization</h1>
+
+<p>This is a more advanced example of what you can build with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of <a href='http://momentjs.com/'>Moment.js</a>, D3 scales, DOM manipulation, and loading external data.</p>
+
+<h2><a href="/examples/quake/index.html"><i class='black icon play circle' style='text-decoration: none;'></i>View the demo</a></h2>
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+<pre class='line-numbers'><code class='language-html'>&lt;h1&gt;Earthquakes: 2013&lt;/h1&gt;
+&lt;ul id='magnitudes'&gt;&lt;/ul&gt;
+
+&lt;canvas id='quakeCanvas'&gt;&lt;/canvas&gt;
+
+&lt;div id='controls'&gt;
+  &lt;div&gt;
+    &lt;input id='slider' type='range' min='0' max='100' step='0.1' value='0'&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;span id='date'&gt;&lt;/span&gt;&amp;nbsp;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<div class='ui red ribbon label'>JavaScript</div>
+
+<pre class='line-numbers'><code class='language-javascript'>(function() {
+  var canvas = document.getElementById('quakeCanvas');
+
+  // Create our Planetary.js planet and set some initial values;
+  // we use several custom plugins, defined at the bottom of the file
+  var planet = planetaryjs.planet();
+  planet.loadPlugin(autocenter({extraHeight: -120}));
+  planet.loadPlugin(autoscale({extraHeight: -120}));
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file:   '/world-110m.json' },
+    oceans:   { fill:   '#001320' },
+    land:     { fill:   '#06304e' },
+    borders:  { stroke: '#001320' }
+  }));
+  planet.loadPlugin(planetaryjs.plugins.pings());
+  planet.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [50, 5000]
+  }));
+  planet.loadPlugin(planetaryjs.plugins.drag({
+    onDragStart: function() {
+      this.plugins.autorotate.pause();
+    },
+    onDragEnd: function() {
+      this.plugins.autorotate.resume();
+    }
+  }));
+  planet.loadPlugin(autorotate(5));
+  planet.projection.rotate([100, -10, 0]);
+  planet.draw(canvas);
+
+
+  // Create a color scale for the various earthquake magnitudes; the
+  // minimum magnitude in our data set is 2.5.
+  var colors = d3.scale.pow()
+    .exponent(3)
+    .domain([2, 4, 6, 8, 10])
+      .range(['white', 'yellow', 'orange', 'red', 'purple']);
+  // Also create a scale for mapping magnitudes to ping angle sizes
+  var angles = d3.scale.pow()
+    .exponent(3)
+    .domain([2.5, 10])
+    .range([0.5, 15]);
+  // And finally, a scale for mapping magnitudes to ping TTLs
+  var ttls = d3.scale.pow()
+    .exponent(3)
+    .domain([2.5, 10])
+    .range([2000, 5000]);
+
+  // Create a key to show the magnitudes and their colors
+  d3.select('#magnitudes').selectAll('li')
+    .data(colors.ticks(9))
+  .enter()
+    .append('li')
+    .style('color', colors)
+    .text(function(d) {
+      return &quot;Magnitude &quot; + d;
+    });
+
+
+  // Load our earthquake data and set up the controls.
+  // The data consists of an array of objects in the following format:
+  // {
+  //   mag:  magnitude_of_quake
+  //   lng:  longitude_coordinates
+  //   lat:  latitude_coordinates
+  //   time: timestamp_of_quake
+  // }
+  // The data is ordered, with the earliest data being the first in the file.
+  d3.json('/examples/quake/year_quakes_small.json', function(err, data) {
+    if (err) {
+      alert(&quot;Problem loading the quake data.&quot;);
+      return;
+    }
+
+    var start = parseInt(data[0].time, 10);
+    var end = parseInt(data[data.length - 1].time, 10);
+    var currentTime = start;
+    var lastTick = new Date().getTime();
+
+    var updateDate = function() {
+      d3.select('#date').text(moment(currentTime).utc().format(&quot;MMM DD YYYY HH:mm UTC&quot;));
+    };
+
+    // A scale that maps a percentage of playback to a time
+    // from the data; for example, `50` would map to the halfway
+    // mark between the first and last items in our data array.
+    var percentToDate = d3.scale.linear()
+      .domain([0, 100])
+      .range([start, end]);
+
+    // A scale that maps real time passage to data playback time.
+    // 12 minutes of real time maps to the entirety of the
+    // timespan covered by the data.
+    var realToData = d3.scale.linear()
+      .domain([0, 1000 * 60 * 12])
+      .range([0, end - start]);
+
+    var paused = false;
+
+    // Pause playback and update the time display
+    // while scrubbing using the range input.
+    d3.select('#slider')
+      .on('change', function(d) {
+        currentTime = percentToDate(d3.event.target.value);
+        updateDate();
+      })
+      .call(d3.behavior.drag()
+        .on('dragstart', function() {
+          paused = true;
+        })
+        .on('dragend', function() {
+          paused = false;
+        })
+      );
+
+
+    // The main playback loop; for each tick, we'll see how much
+    // time passed in our accelerated playback reel and find all
+    // the earthquakes that happened in that timespan, adding
+    // them to the globe with a color and angle relative to their magnitudes.
+    d3.timer(function() {
+      var now = new Date().getTime();
+
+      if (paused) {
+        lastTick = now;
+        return;
+      }
+
+      var realDelta = now - lastTick;
+      // Avoid switching back to the window only to see thousands of pings;
+      // if it's been more than 500 milliseconds since we've updated playback,
+      // we'll just set the value to 500 milliseconds.
+      if (realDelta &gt; 500) realDelta = 500;
+      var dataDelta = realToData(realDelta);
+
+      var toPing = data.filter(function(d) {
+        return d.time &gt; currentTime &amp;&amp; d.time &lt;= currentTime + dataDelta;
+      });
+
+      for (var i = 0; i &lt; toPing.length; i++) {
+        var ping = toPing[i];
+        planet.plugins.pings.add(ping.lng, ping.lat, {
+          // Here we use the `angles` and `colors` scales we built earlier
+          // to convert magnitudes to appropriate angles and colors.
+          angle: angles(ping.mag),
+          color: colors(ping.mag),
+          ttl:   ttls(ping.mag)
+        });
+      }
+
+      currentTime += dataDelta;
+      if (currentTime &gt; end) currentTime = start;
+      updateDate();
+      d3.select('#slider').property('value', percentToDate.invert(currentTime));
+      lastTick = now;
+    });
+  });
+
+
+
+  // Plugin to resize the canvas to fill the window and to
+  // automatically center the planet when the window size changes
+  function autocenter(options) {
+    options = options || {};
+    var needsCentering = false;
+    var globe = null;
+
+    var resize = function() {
+      var width  = window.innerWidth + (options.extraWidth || 0);
+      var height = window.innerHeight + (options.extraHeight || 0);
+      globe.canvas.width = width;
+      globe.canvas.height = height;
+      globe.projection.translate([width / 2, height / 2]);
+    };
+
+    return function(planet) {
+      globe = planet;
+      planet.onInit(function() {
+        needsCentering = true;
+        d3.select(window).on('resize', function() {
+          needsCentering = true;
+        });
+      });
+
+      planet.onDraw(function() {
+        if (needsCentering) { resize(); needsCentering = false; }
+      });
+    };
+  };
+
+  // Plugin to automatically scale the planet's projection based
+  // on the window size when the planet is initialized
+  function autoscale(options) {
+    options = options || {};
+    return function(planet) {
+      planet.onInit(function() {
+        var width  = window.innerWidth + (options.extraWidth || 0);
+        var height = window.innerHeight + (options.extraHeight || 0);
+        planet.projection.scale(Math.min(width, height) / 2);
+      });
+    };
+  };
+
+  // Plugin to automatically rotate the globe around its vertical
+  // axis a configured number of degrees every second.
+  function autorotate(degPerSec) {
+    return function(planet) {
+      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
+      planet.onDraw(function() {
+        if (paused || !lastTick) {
+          lastTick = new Date();
+        } else {
+          var now = new Date();
+          var delta = now - lastTick;
+          var rotation = planet.projection.rotate();
+          rotation[0] += degPerSec * delta / 1000;
+          if (rotation[0] &gt;= 180) rotation[0] -= 360;
+          planet.projection.rotate(rotation);
+          lastTick = now;
+        }
+      });
+    };
+  };
+})();</code></pre>
+</div>
--- a/site/public/examples/quake/_layout.ejs
+++ b/site/public/examples/quake/_layout.ejs
@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+  <%- partial("../../_header") %>
+  <link href="/css/prism.css" rel="stylesheet">
+  <style>
+    body {
+      background-color: rgb(0, 26, 34);
+      background: url('sky.jpg');
+      color: white;
+    }
+
+    ul#magnitudes {
+      position: absolute;
+      top: 100px;
+      left: 30px;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      z-index: 10;
+    }
+
+    h1 {
+      position: absolute;
+      top: 50px;
+      left: 5px;
+      padding: 0;
+      margin: 0;
+      z-index: 10;
+    }
+
+    canvas {
+      position: absolute;
+      top: 60px;
+      left: 0;
+      right: 0;
+      bottom: 0px;
+      cursor: move;
+    }
+
+    #controls {
+      position: absolute;
+      width: 400px;
+      bottom: 5px;
+      left: 50%;
+      margin-left: -200px;
+      text-align: center;
+    }
+
+    input[type=range] {
+      width: 400px;
+    }
+  </style>
+</head>
+<body>
+  <%- partial("../../_menu") %>
+
+  <%- yield %>
+
+  <%- partial("../../_scripts") %>
+  <script type='text/javascript' src='/js/lib/moment.min.js'></script>
+  <script type='text/javascript' src='/examples/quake/quake.js'></script>
+  <%- partial("../../_ga") %>
+</body>
+</html>
--- a/site/public/examples/quake/index.ejs
+++ b/site/public/examples/quake/index.ejs
@ -0,0 +1,13 @@
+<h1>Earthquakes: 2013</h1>
+<ul id='magnitudes'></ul>
+
+<canvas id='quakeCanvas'></canvas>
+
+<div id='controls'>
+  <div>
+    <input id='slider' type='range' min='0' max='100' step='0.1' value='0'>
+  </div>
+  <div>
+    <span id='date'>Loading...</span>
+  </div>
+</div>
--- a/site/public/examples/quake/quake-compress.js
+++ b/site/public/examples/quake/quake-compress.js
@ -0,0 +1,28 @@
+#!/usr/bin/env node
+var fs = require('fs');
+
+var filename = process.argv[2];
+
+if (!filename) {
+  console.log("Please specify a file to process");
+  process.exit(1);
+}
+
+if (!fs.existsSync(filename)) {
+  console.log("#{filename} not found.");
+  process.exit(2);
+}
+
+var data = fs.readFileSync(filename, 'utf8');
+var json = JSON.parse(data);
+
+var quakeData = json.features.map(function(feature) {
+  return {
+    time: feature.properties.time,
+    lat: feature.geometry.coordinates[1],
+    lng: feature.geometry.coordinates[0],
+    mag: feature.properties.mag
+  };
+}).sort(function(a, b) { return a.time - b.time});
+
+console.log(JSON.stringify(quakeData));
--- a/site/public/examples/quake/quake.js
+++ b/site/public/examples/quake/quake.js
@ -0,0 +1,229 @@
+(function() {
+  var canvas = document.getElementById('quakeCanvas');
+
+  // Create our Planetary.js planet and set some initial values;
+  // we use several custom plugins, defined at the bottom of the file
+  var planet = planetaryjs.planet();
+  planet.loadPlugin(autocenter({extraHeight: -120}));
+  planet.loadPlugin(autoscale({extraHeight: -120}));
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file:   '/world-110m.json' },
+    oceans:   { fill:   '#001320' },
+    land:     { fill:   '#06304e' },
+    borders:  { stroke: '#001320' }
+  }));
+  planet.loadPlugin(planetaryjs.plugins.pings());
+  planet.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [50, 5000]
+  }));
+  planet.loadPlugin(planetaryjs.plugins.drag({
+    onDragStart: function() {
+      this.plugins.autorotate.pause();
+    },
+    onDragEnd: function() {
+      this.plugins.autorotate.resume();
+    }
+  }));
+  planet.loadPlugin(autorotate(5));
+  planet.projection.rotate([100, -10, 0]);
+  planet.draw(canvas);
+
+
+  // Create a color scale for the various earthquake magnitudes; the
+  // minimum magnitude in our data set is 2.5.
+  var colors = d3.scale.pow()
+    .exponent(3)
+    .domain([2, 4, 6, 8, 10])
+      .range(['white', 'yellow', 'orange', 'red', 'purple']);
+  // Also create a scale for mapping magnitudes to ping angle sizes
+  var angles = d3.scale.pow()
+    .exponent(3)
+    .domain([2.5, 10])
+    .range([0.5, 15]);
+  // And finally, a scale for mapping magnitudes to ping TTLs
+  var ttls = d3.scale.pow()
+    .exponent(3)
+    .domain([2.5, 10])
+    .range([2000, 5000]);
+
+  // Create a key to show the magnitudes and their colors
+  d3.select('#magnitudes').selectAll('li')
+    .data(colors.ticks(9))
+  .enter()
+    .append('li')
+    .style('color', colors)
+    .text(function(d) {
+      return "Magnitude " + d;
+    });
+
+
+  // Load our earthquake data and set up the controls.
+  // The data consists of an array of objects in the following format:
+  // {
+  //   mag:  magnitude_of_quake
+  //   lng:  longitude_coordinates
+  //   lat:  latitude_coordinates
+  //   time: timestamp_of_quake
+  // }
+  // The data is ordered, with the earliest data being the first in the file.
+  d3.json('/examples/quake/year_quakes_small.json', function(err, data) {
+    if (err) {
+      alert("Problem loading the quake data.");
+      return;
+    }
+
+    var start = parseInt(data[0].time, 10);
+    var end = parseInt(data[data.length - 1].time, 10);
+    var currentTime = start;
+    var lastTick = new Date().getTime();
+
+    var updateDate = function() {
+      d3.select('#date').text(moment(currentTime).utc().format("MMM DD YYYY HH:mm UTC"));
+    };
+
+    // A scale that maps a percentage of playback to a time
+    // from the data; for example, `50` would map to the halfway
+    // mark between the first and last items in our data array.
+    var percentToDate = d3.scale.linear()
+      .domain([0, 100])
+      .range([start, end]);
+
+    // A scale that maps real time passage to data playback time.
+    // 12 minutes of real time maps to the entirety of the
+    // timespan covered by the data.
+    var realToData = d3.scale.linear()
+      .domain([0, 1000 * 60 * 12])
+      .range([0, end - start]);
+
+    var paused = false;
+
+    // Pause playback and update the time display
+    // while scrubbing using the range input.
+    d3.select('#slider')
+      .on('change', function(d) {
+        currentTime = percentToDate(d3.event.target.value);
+        updateDate();
+      })
+      .call(d3.behavior.drag()
+        .on('dragstart', function() {
+          paused = true;
+        })
+        .on('dragend', function() {
+          paused = false;
+        })
+      );
+
+
+    // The main playback loop; for each tick, we'll see how much
+    // time passed in our accelerated playback reel and find all
+    // the earthquakes that happened in that timespan, adding
+    // them to the globe with a color and angle relative to their magnitudes.
+    d3.timer(function() {
+      var now = new Date().getTime();
+
+      if (paused) {
+        lastTick = now;
+        return;
+      }
+
+      var realDelta = now - lastTick;
+      // Avoid switching back to the window only to see thousands of pings;
+      // if it's been more than 500 milliseconds since we've updated playback,
+      // we'll just set the value to 500 milliseconds.
+      if (realDelta > 500) realDelta = 500;
+      var dataDelta = realToData(realDelta);
+
+      var toPing = data.filter(function(d) {
+        return d.time > currentTime && d.time <= currentTime + dataDelta;
+      });
+
+      for (var i = 0; i < toPing.length; i++) {
+        var ping = toPing[i];
+        planet.plugins.pings.add(ping.lng, ping.lat, {
+          // Here we use the `angles` and `colors` scales we built earlier
+          // to convert magnitudes to appropriate angles and colors.
+          angle: angles(ping.mag),
+          color: colors(ping.mag),
+          ttl:   ttls(ping.mag)
+        });
+      }
+
+      currentTime += dataDelta;
+      if (currentTime > end) currentTime = start;
+      updateDate();
+      d3.select('#slider').property('value', percentToDate.invert(currentTime));
+      lastTick = now;
+    });
+  });
+
+
+
+  // Plugin to resize the canvas to fill the window and to
+  // automatically center the planet when the window size changes
+  function autocenter(options) {
+    options = options || {};
+    var needsCentering = false;
+    var globe = null;
+
+    var resize = function() {
+      var width  = window.innerWidth + (options.extraWidth || 0);
+      var height = window.innerHeight + (options.extraHeight || 0);
+      globe.canvas.width = width;
+      globe.canvas.height = height;
+      globe.projection.translate([width / 2, height / 2]);
+    };
+
+    return function(planet) {
+      globe = planet;
+      planet.onInit(function() {
+        needsCentering = true;
+        d3.select(window).on('resize', function() {
+          needsCentering = true;
+        });
+      });
+
+      planet.onDraw(function() {
+        if (needsCentering) { resize(); needsCentering = false; }
+      });
+    };
+  };
+
+  // Plugin to automatically scale the planet's projection based
+  // on the window size when the planet is initialized
+  function autoscale(options) {
+    options = options || {};
+    return function(planet) {
+      planet.onInit(function() {
+        var width  = window.innerWidth + (options.extraWidth || 0);
+        var height = window.innerHeight + (options.extraHeight || 0);
+        planet.projection.scale(Math.min(width, height) / 2);
+      });
+    };
+  };
+
+  // Plugin to automatically rotate the globe around its vertical
+  // axis a configured number of degrees every second.
+  function autorotate(degPerSec) {
+    return function(planet) {
+      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
+      planet.onDraw(function() {
+        if (paused || !lastTick) {
+          lastTick = new Date();
+        } else {
+          var now = new Date();
+          var delta = now - lastTick;
+          var rotation = planet.projection.rotate();
+          rotation[0] += degPerSec * delta / 1000;
+          if (rotation[0] >= 180) rotation[0] -= 360;
+          planet.projection.rotate(rotation);
+          lastTick = now;
+        }
+      });
+    };
+  };
+})();
--- a/site/public/examples/quake/sky.jpg
+++ b/site/public/examples/quake/sky.jpg
--- a/site/public/examples/quake/year_quakes_small.json
+++ b/site/public/examples/quake/year_quakes_small.json
--- a/site/public/examples/rotating.ejs
+++ b/site/public/examples/rotating.ejs
@ -0,0 +1,145 @@
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">Rotating Globe with Pings</div>
+</div>
+
+<h1>Rotating Globe with Pings</h1>
+
+<p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p>
+
+<p>We're using a specially-made TopoJSON file that includes lake data so that we can draw lakes on the globe with a custom plugin, which you can find at the bottom of the JavaScript. The custom TopoJSON was made using the <a href='https://github.com/mbostock/topojson/wiki/Command-Line-Reference'>TopoJSON command-line tool</a> and data from <a href='http://www.naturalearthdata.com/features/'>Natural Earth</a>; you can also <a href='/world-110m-withlakes.json'>download the JSON file</a> for your own use.</p>
+
+<p>The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its <em>displayed</em> width and height the same via CSS styling.</p>
+
+<div style='text-align: center;'>
+  <canvas id='rotatingGlobe' width='400' height='400'
+    style="width: 400px; height: 400px; cursor: move;"></canvas>
+</div>
+
+<div class='ui raised segment'>
+<div class='ui blue ribbon label'>HTML</div>
+<pre class='line-numbers'><code class='language-html'>&lt;canvas id='rotatingGlobe' width='400' height='400'
+  style='width: 400px; height: 400px; cursor: move;'&gt;&lt;/canvas&gt;</code></pre>
+
+<div class='ui red ribbon label'>JavaScript</div>
+<pre class='line-numbers'><code class='language-javascript'>(function() {
+  var globe = planetaryjs.planet();
+  // Load our custom `autorotate` plugin; see below.
+  globe.loadPlugin(autorotate(10));
+  // The `earth` plugin draws the oceans and the land; it's actually
+  // a combination of several separate built-in plugins.
+  //
+  // Note that we're loading a special TopoJSON file
+  // (world-110m-withlakes.json) so we can render lakes.
+  globe.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file:   '/world-110m-withlakes.json' },
+    oceans:   { fill:   '#000080' },
+    land:     { fill:   '#339966' },
+    borders:  { stroke: '#008000' }
+  }));
+  // Load our custom `lakes` plugin to draw lakes; see below.
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
+  // The `pings` plugin draws animated pings on the globe.
+  globe.loadPlugin(planetaryjs.plugins.pings());
+  // The `zoom` and `drag` plugins enable
+  // manipulating the globe with the mouse.
+  globe.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [100, 300]
+  }));
+  globe.loadPlugin(planetaryjs.plugins.drag({
+    // Dragging the globe should pause the
+    // automatic rotation until we release the mouse.
+    onDragStart: function() {
+      this.plugins.autorotate.pause();
+    },
+    onDragEnd: function() {
+      this.plugins.autorotate.resume();
+    }
+  }));
+  // Set up the globe's initial scale, offset, and rotation.
+  globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
+
+  // Every few hundred milliseconds, we'll draw another random ping.
+  var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
+  setInterval(function() {
+    var lat = Math.random() * 170 - 85;
+    var lng = Math.random() * 360 - 180;
+    var color = colors[Math.floor(Math.random() * colors.length)];
+    globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
+  }, 150);
+
+  var canvas = document.getElementById('rotatingGlobe');
+  // Special code to handle high-density displays (e.g. retina, some phones)
+  // In the future, Planetary.js will handle this by itself (or via a plugin).
+  if (window.devicePixelRatio == 2) {
+    canvas.width = 800;
+    canvas.height = 800;
+    context = canvas.getContext('2d');
+    context.scale(2, 2);
+  }
+  // Draw that globe!
+  globe.draw(canvas);
+
+  // This plugin will automatically rotate the globe around its vertical
+  // axis a configured number of degrees every second.
+  function autorotate(degPerSec) {
+    // Planetary.js plugins are functions that take a `planet` instance
+    // as an argument...
+    return function(planet) {
+      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
+      // ...and configure hooks into certain pieces of its lifecycle.
+      planet.onDraw(function() {
+        if (paused || !lastTick) {
+          lastTick = new Date();
+        } else {
+          var now = new Date();
+          var delta = now - lastTick;
+          // This plugin uses the built-in projection (provided by D3)
+          // to rotate the globe each time we draw it.
+          var rotation = planet.projection.rotate();
+          rotation[0] += degPerSec * delta / 1000;
+          if (rotation[0] &gt;= 180) rotation[0] -= 360;
+          planet.projection.rotate(rotation);
+          lastTick = now;
+        }
+      });
+    };
+  };
+
+  // This plugin takes lake data from the special
+  // TopoJSON we're loading and draws them on the map.
+  function lakes(options) {
+    options = options || {};
+    var lakes = null;
+
+    return function(planet) {
+      planet.onInit(function() {
+        // We can access the data loaded from the TopoJSON plugin
+        // on its namespace on `planet.plugins`. We're loading a custom
+        // TopoJSON file with an object called &quot;ne_110m_lakes&quot;.
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = options.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
+})();</code></pre>
+</div>
+
+<%- partial('_scripts_rotating') %>
--- a/site/public/examples/rotating.js
+++ b/site/public/examples/rotating.js
@ -0,0 +1,117 @@
+(function() {
+  var globe = planetaryjs.planet();
+  // Load our custom `autorotate` plugin; see below.
+  globe.loadPlugin(autorotate(10));
+  // The `earth` plugin draws the oceans and the land; it's actually
+  // a combination of several separate built-in plugins.
+  //
+  // Note that we're loading a special TopoJSON file
+  // (world-110m-withlakes.json) so we can render lakes.
+  globe.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file:   '/world-110m-withlakes.json' },
+    oceans:   { fill:   '#000080' },
+    land:     { fill:   '#339966' },
+    borders:  { stroke: '#008000' }
+  }));
+  // Load our custom `lakes` plugin to draw lakes; see below.
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
+  // The `pings` plugin draws animated pings on the globe.
+  globe.loadPlugin(planetaryjs.plugins.pings());
+  // The `zoom` and `drag` plugins enable
+  // manipulating the globe with the mouse.
+  globe.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [100, 300]
+  }));
+  globe.loadPlugin(planetaryjs.plugins.drag({
+    // Dragging the globe should pause the
+    // automatic rotation until we release the mouse.
+    onDragStart: function() {
+      this.plugins.autorotate.pause();
+    },
+    onDragEnd: function() {
+      this.plugins.autorotate.resume();
+    }
+  }));
+  // Set up the globe's initial scale, offset, and rotation.
+  globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
+
+  // Every few hundred milliseconds, we'll draw another random ping.
+  var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
+  setInterval(function() {
+    var lat = Math.random() * 170 - 85;
+    var lng = Math.random() * 360 - 180;
+    var color = colors[Math.floor(Math.random() * colors.length)];
+    globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
+  }, 150);
+
+  var canvas = document.getElementById('rotatingGlobe');
+  // Special code to handle high-density displays (e.g. retina, some phones)
+  // In the future, Planetary.js will handle this by itself (or via a plugin).
+  if (window.devicePixelRatio == 2) {
+    canvas.width = 800;
+    canvas.height = 800;
+    context = canvas.getContext('2d');
+    context.scale(2, 2);
+  }
+  // Draw that globe!
+  globe.draw(canvas);
+
+  // This plugin will automatically rotate the globe around its vertical
+  // axis a configured number of degrees every second.
+  function autorotate(degPerSec) {
+    // Planetary.js plugins are functions that take a `planet` instance
+    // as an argument...
+    return function(planet) {
+      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
+      // ...and configure hooks into certain pieces of its lifecycle.
+      planet.onDraw(function() {
+        if (paused || !lastTick) {
+          lastTick = new Date();
+        } else {
+          var now = new Date();
+          var delta = now - lastTick;
+          // This plugin uses the built-in projection (provided by D3)
+          // to rotate the globe each time we draw it.
+          var rotation = planet.projection.rotate();
+          rotation[0] += degPerSec * delta / 1000;
+          if (rotation[0] >= 180) rotation[0] -= 360;
+          planet.projection.rotate(rotation);
+          lastTick = now;
+        }
+      });
+    };
+  };
+
+  // This plugin takes lake data from the special
+  // TopoJSON we're loading and draws them on the map.
+  function lakes(options) {
+    options = options || {};
+    var lakes = null;
+
+    return function(planet) {
+      planet.onInit(function() {
+        // We can access the data loaded from the TopoJSON plugin
+        // on its namespace on `planet.plugins`. We're loading a custom
+        // TopoJSON file with an object called "ne_110m_lakes".
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = options.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
+})();
--- a/site/public/images/ex-basic.png
+++ b/site/public/images/ex-basic.png
--- a/site/public/images/ex-quake.png
+++ b/site/public/images/ex-quake.png
--- a/site/public/images/ex-rotating.png
+++ b/site/public/images/ex-rotating.png
--- a/site/public/index.ejs
+++ b/site/public/index.ejs
@ -16,9 +16,13 @@
        <i class='move icon'></i>
        <div class='content'>Mouse drag + zoom support</div>
      </div>
-      <div class='item'>
+<!--       <div class='item'>
        <i class='lightbulb icon'></i>
        <div class='content'><a href='angular.html'>AngularJS integration</a></div>
+      </div> -->
+      <div class='item'>
+        <i class='puzzle piece icon'></i>
+        <div class='content'>Extremely extensible via a plugin-based architecture</div>
      </div>
      <div class='item'>
        <i class='fork code icon'></i>
@ -27,23 +31,24 @@
    </div>

    <div class='ui buttons'>
-      <a class='ui green labeled icon button' href='https://github.com/BinaryMuse/planetary.js/releases'><i class='icon download'></i>Download</a>
+      <a class='ui green labeled icon button' href='/download/'><i class='icon download'></i>Download</a>
      <div class='or'></div>
-      <a class='ui labeled button' href='https://github.com/BinaryMuse/planetary.js'>View Source</a>
+      <a class='ui labeled button' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">View Source</a>
    </div>

    <div style='padding-top: 10px;'>
-      Or install with <a href='http://bower.io/'>Bower</a>: <div class='ui small label'><i class='icon right arrow'></i> bower install planetary.js</div>
+      Or install with <a href='http://bower.io/'>Bower</a>: <div class='ui small label bower'><i class='icon right arrow'></i> bower install planetary.js</div>
    </div>
  </div>

  <div class='eight wide column left floated'>
    <div class='ui panel homepage-globe-canvas'>
      <canvas height='350' width='350' style="width: 350px; height: 350px;" id="homepage-globe-canvas"></canvas>
+      <br>
      <div style="width: 350px; text-align: center; display: inline-block;">
        <div class='ui pointing dark blue label'>
-          <a href='https://github.com/BinaryMuse/planetary.js/blob/master/site/public/js/homepage.js#files'
-            class='detail no-underline'><i class='icon code'></i> View this example's source!</a>
+          <a href='/examples/rotating.html'
+            class='detail no-underline'><i class='icon code'></i> See how to build this globe</a>
        </div>
      </div>
    </div>
@ -70,7 +75,7 @@
          <i class='ui huge icon laptop'></i>
          Examples
        </a>
-        <p>Check out working examples and see what Planetary.js can do</p>
+        <p class='section-description'>Check out working examples and see what Planetary.js can do</p>
        <p><a class='ui teal button' href='/examples/'>Explore the Examples</a></p>
      </div>
      <div class='column'>
@ -78,16 +83,16 @@
          <i class='ui huge icon book'></i>
          Documentation
        </a>
-        <p>Download and install Planetary.js and build something awesome</p>
+        <p class='section-description'>See how to install Planetary.js and build something awesome</p>
        <p><a class='ui orange button' href='/documentation/'>Peruse the Documentation</a></p>
      </div>
      <div class='column'>
-        <a class='ui icon header' href='https://github.com/BinaryMuse/planetary.js'>
+        <a class='ui icon header' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
          <i class='ui huge icon github alternate'></i>
          Source Code
        </a>
-        <p>Check out the source on GitHub and contribute to the project</p>
-        <p><a class='ui purple button' href='https://github.com/BinaryMuse/planetary.js'>Examine the Source</a></p>
+        <p class='section-description'>Take a look at the source on GitHub and contribute to the project</p>
+        <p><a class='ui purple button' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">Examine the Source</a></p>
      </div>
    </div>

--- a/site/public/js/homepage.js
+++ b/site/public/js/homepage.js
@ -3,15 +3,33 @@
  // The `earth` plugin draws the oceans and the land; it's actually
  // a combination of several separate built-in plugins.
  globe.loadPlugin(planetaryjs.plugins.earth({
-    topojson: { file:   'world-110m.json' },
+    topojson: { file:   'world-110m-withlakes.json' },
    oceans:   { fill:   '#000080' },
    land:     { fill:   '#339966' },
    borders:  { stroke: '#008000' }
  }));
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
  // The `pings` plugin draws animated pings on the globe.
  globe.loadPlugin(planetaryjs.plugins.pings());
  // Load our custom `autorotate` plugin; see below.
  globe.loadPlugin(autorotate(10));
+  // The `zoom` and `drag` plugins enable
+  // manipulating the globe with the mouse.
+  globe.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [100, 300]
+  }));
+  globe.loadPlugin(planetaryjs.plugins.drag({
+    // Dragging the globe should pause the
+    // automatic rotation until we release the mouse.
+    onDragStart: function(planet) {
+      this.plugins.autorotate.pause();
+    },
+    onDragEnd: function(planet) {
+      this.plugins.autorotate.resume();
+    }
+  }))
  // Set up the globe's initial scale, offset, and rotation.
  globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);

@ -21,8 +39,8 @@
    var lat = Math.random() * 170 - 85;
    var lng = Math.random() * 360 - 180;
    var color = colors[Math.floor(Math.random() * colors.length)];
-    globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
-  }, 250);
+    globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
+  }, 150);

  var canvas = document.getElementById('homepage-globe-canvas');
  // Special code to handle high-density displays (e.g. retina, some phones)
@ -36,6 +54,27 @@
  // Draw that globe!
  globe.draw(canvas);

+  function lakes(config) {
+    config = config || {};
+    return function(planet) {
+      var lakes = null;
+
+      planet.onInit(function() {
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = config.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
+
  // This plugin will automatically rotate the globe around its vertical
  // axis a configured number of degrees every second.
  function autorotate(degPerSec) {
@ -43,9 +82,14 @@
    // as an argument...
    return function(planet) {
      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
      // ...and configure hooks into certain pieces of its lifecycle.
      planet.onDraw(function() {
-        if (!lastTick) {
+        if (paused || !lastTick) {
          lastTick = new Date();
        } else {
          var now = new Date();
--- a/site/public/js/lib/moment.min.js
+++ b/site/public/js/lib/moment.min.js
--- a/site/public/js/lib/planetaryjs.min.js
+++ b/site/public/js/lib/planetaryjs.min.js
@ -1,2 +1,2 @@
-/*! Planetary.js 0.2.0 | (c) 2013 Brandon Tilley | Released under MIT License */
-!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=0;o<e.length;o++)t.unshift(e[o]);0==t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},a=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,i)},s={plugins:{},noConflict:function(){return o.planetaryjs=i,s},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){a(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return s.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},s.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},s.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},s.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,u=n.type||"internal";i=t.mesh(r,l,e[u])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},s.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){s.plugins.topojson(t)(n),s.plugins.oceans(o)(n),s.plugins.land(i)(n),s.plugins.borders(e)(n)}},s.plugins.pings=function(t){var o=[],i=function(n,i,e){var e=e||{};e.color=e.color||t.color||"white",e.ttl=e.ttl||t.ttl||2e3,e.angle=e.angle||t.angle||5,o.push({lat:n,lng:i,time:new Date,options:e})},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var u=o[l],a=i-u.time;a<u.options.ttl&&(e.push(u),r(n,t,i,a,u))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,u=n.rgb(r.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},s});
+/*! Planetary.js 1.1.2 | (c) 2013 Michelle Tilley | Released under MIT License */
+!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,i){return n.planetaryjs=t(o,i,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=e.length-1;o>=0;o--)t.unshift(e[o]);for(0===t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},u=function(n,t,o,i){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&l(n,o),n.stopped=!1,a(n,t,i)},c={plugins:{},noConflict:function(){return o.planetaryjs=i,c},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},i={plugins:{},draw:function(n){u(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){i.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](i)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90),i.path=n.geo.path().projection(i.projection),i}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(i)(n),c.plugins.borders(e)(n)}},c.plugins.pings=function(t){var o=[];t=t||{};var i=function(n,i,e){e=e||{},e.color=e.color||t.color||"white",e.angle=e.angle||t.angle||5,e.ttl=e.ttl||t.ttl||2e3;var r={time:new Date,options:e};t.latitudeFirst?(r.lat=n,r.lng=i):(r.lng=n,r.lat=i),o.push(r)},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var a=o[l],u=i-a.time;u<a.options.ttl&&(e.push(a),r(n,t,i,u,a))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var u=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},c.plugins.zoom=function(t){t=t||{};var o=function(){},i=t.onZoomStart||o,e=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,u=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(u);o.scale(null!==a&&void 0!==a?a:t.projection.scale()),o.on("zoomstart",i.bind(t)).on("zoomend",e.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){t=t||{};var o=function(){},i=t.onDragStart||o,e=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",i.bind(t)).on("dragend",e.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,i=n.event.dy,e=t.projection.rotate(),a=t.projection.scale(),u=n.scale.linear().domain([-1*a,a]).range([-90,90]),c=u(o),s=u(i);e[0]+=c,e[1]-=s,e[1]>90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e),l.call(t)});n.select(t.canvas).call(o)})}},c});
--- a/site/public/world-110m-withlakes.json
+++ b/site/public/world-110m-withlakes.json
--- a/site/public/world-110m.json
+++ b/site/public/world-110m.json
--- a/src/_umd_header.js
+++ b/src/_umd_header.js
@ -1,6 +1,8 @@
 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
-    define(['d3', 'topojson'], factory);
+    define(['d3', 'topojson'], function(d3, topojson) {
+      return (root.planetaryjs = factory(d3, topojson, root));
+    });
  } else if (typeof exports === 'object') {
    module.exports = factory(require('d3'), require('topojson'));
  } else {
--- a/src/body.js
+++ b/src/body.js
@ -4,7 +4,11 @@

  var doDrawLoop = function(planet, canvas, hooks) {
    d3.timer(function() {
-      planet.context.clearRect(0, 0, canvas.width, canvas.height)
+      if (planet.stopped) {
+        return true;
+      }
+
+      planet.context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < hooks.onDraw.length; i++) {
        hooks.onDraw[i]();
      }
@ -13,19 +17,19 @@

  var initPlugins = function(planet, localPlugins) {
    // Add the global plugins to the beginning of the local ones
-    for (var i = 0; i < plugins.length; i++) {
+    for (var i = plugins.length - 1; i >= 0; i--) {
      localPlugins.unshift(plugins[i]);
    }

    // Load the default plugins if none have been loaded so far
-    if (localPlugins.length == 0) {
+    if (localPlugins.length === 0) {
      if (planetaryjs.plugins.earth)
        planet.loadPlugin(planetaryjs.plugins.earth());
      if (planetaryjs.plugins.pings)
        planet.loadPlugin(planetaryjs.plugins.pings());
    }

-    for (var i = 0; i < localPlugins.length; i++) {
+    for (i = 0; i < localPlugins.length; i++) {
      localPlugins[i](planet);
    }
  };
@ -51,7 +55,7 @@
      var check = function() {
        if (completed >= hooks.onInit.length) doDrawLoop(planet, canvas, hooks);
        else doNext(check);
-      }
+      };
      doNext(check);
    } else {
      doDrawLoop(planet, canvas, hooks);
@ -59,11 +63,14 @@
  };

  var startDraw = function(planet, canvas, localPlugins, hooks) {
-    initPlugins(planet, localPlugins);
-
    planet.canvas = canvas;
    planet.context = canvas.getContext('2d');

+    if (planet.stopped !== true) {
+      initPlugins(planet, localPlugins);
+    }
+
+    planet.stopped = false;
    runOnInitHooks(planet, canvas, hooks);
  };

@ -83,7 +90,8 @@
      var localPlugins = [];
      var hooks = {
        onInit: [],
-        onDraw: []
+        onDraw: [],
+        onStop: []
      };

      var planet = {
@ -101,13 +109,24 @@
          hooks.onDraw.push(fn);
        },

+        onStop: function(fn) {
+          hooks.onStop.push(fn);
+        },
+
        loadPlugin: function(plugin) {
          localPlugins.push(plugin);
        },

+        stop: function() {
+          planet.stopped = true;
+          for (var i = 0; i < hooks.onStop.length; i++) {
+            hooks.onStop[i](planet);
+          }
+        },
+
        withSavedContext: function(fn) {
          if (!this.context) {
-            throw new Error("No canvas to fetch context for")
+            throw new Error("No canvas to fetch context for");
          }

          this.context.save();
@ -117,8 +136,7 @@
      };

      planet.projection = d3.geo.orthographic()
-        .clipAngle(90)
-        .precision(0);
+        .clipAngle(90);
      planet.path = d3.geo.path().projection(planet.projection);

      return planet;
--- a/src/plugins.js
+++ b/src/plugins.js
@ -7,7 +7,7 @@
          planet.plugins.topojson.world = config.world;
          setTimeout(done, 0);
        } else {
-          var file = config.file || 'world-110m.json'
+          var file = config.file || 'world-110m.json';
          d3.json(file, function(err, world) {
            if (err) {
              throw new Error("Could not load JSON " + file);
@ -41,14 +41,14 @@
      planet.onInit(function() {
        var world = planet.plugins.topojson.world;
        land = topojson.feature(world, world.objects.land);
-      })
+      });

      planet.onDraw(function() {
        planet.withSavedContext(function(context) {
          context.beginPath();
          planet.path.context(context)(land);

-          if (config.fill != false) {
+          if (config.fill !== false) {
            context.fillStyle = config.fill || 'white';
            context.fill();
          }
@ -98,7 +98,7 @@
  };

  planetaryjs.plugins.earth = function(config) {
-    var config = config || {};
+    config = config || {};
    var topojsonOptions = config.topojson || {};
    var oceanOptions = config.oceans || {};
    var landOptions = config.land || {};
@ -114,13 +114,22 @@

  planetaryjs.plugins.pings = function(config) {
    var pings = [];
+    config = config || {};

-    var addPing = function(lat, lng, options) {
-      var options = options || {};
+    var addPing = function(lng, lat, options) {
+      options = options || {};
      options.color = options.color || config.color || 'white';
-      options.ttl = options.ttl || config.ttl || 2000;
      options.angle = options.angle || config.angle || 5;
-      pings.push({ lat: lat, lng: lng, time: new Date(), options: options });
+      options.ttl   = options.ttl   || config.ttl   || 2000;
+      var ping = { time: new Date(), options: options };
+      if (config.latitudeFirst) {
+        ping.lat = lng;
+        ping.lng = lat;
+      } else {
+        ping.lng = lng;
+        ping.lat = lat;
+      }
+      pings.push(ping);
    };

    var drawPings = function(planet, context, now) {
@ -161,3 +170,74 @@
      });
    };
  };
+
+  planetaryjs.plugins.zoom = function (options) {
+    options = options || {};
+    var noop = function() {};
+    var onZoomStart = options.onZoomStart || noop;
+    var onZoomEnd   = options.onZoomEnd   || noop;
+    var onZoom      = options.onZoom      || noop;
+    var afterZoom   = options.afterZoom   || noop;
+    var startScale  = options.initialScale;
+    var scaleExtent = options.scaleExtent || [50, 2000];
+
+    return function(planet) {
+      planet.onInit(function() {
+        var zoom = d3.behavior.zoom()
+          .scaleExtent(scaleExtent);
+
+        if (startScale !== null && startScale !== undefined) {
+          zoom.scale(startScale);
+        } else {
+          zoom.scale(planet.projection.scale());
+        }
+
+        zoom
+          .on('zoomstart', onZoomStart.bind(planet))
+          .on('zoomend', onZoomEnd.bind(planet))
+          .on('zoom', function() {
+            onZoom.call(planet);
+            planet.projection.scale(d3.event.scale);
+            afterZoom.call(planet);
+          });
+        d3.select(planet.canvas).call(zoom);
+      });
+    };
+  };
+
+  planetaryjs.plugins.drag = function(options) {
+    options = options || {};
+    var noop = function() {};
+    var onDragStart = options.onDragStart || noop;
+    var onDragEnd   = options.onDragEnd   || noop;
+    var onDrag      = options.onDrag      || noop;
+    var afterDrag   = options.afterDrag   || noop;
+
+    return function(planet) {
+      planet.onInit(function() {
+        var drag = d3.behavior.drag()
+          .on('dragstart', onDragStart.bind(planet))
+          .on('dragend', onDragEnd.bind(planet))
+          .on('drag', function() {
+            onDrag.call(planet);
+            var dx = d3.event.dx;
+            var dy = d3.event.dy;
+            var rotation = planet.projection.rotate();
+            var radius = planet.projection.scale();
+            var scale = d3.scale.linear()
+              .domain([-1 * radius, radius])
+              .range([-90, 90]);
+            var degX = scale(dx);
+            var degY = scale(dy);
+            rotation[0] += degX;
+            rotation[1] -= degY;
+            if (rotation[1] > 90)   rotation[1] = 90;
+            if (rotation[1] < -90)  rotation[1] = -90;
+            if (rotation[0] >= 180) rotation[0] -= 360;
+            planet.projection.rotate(rotation);
+            afterDrag.call(planet);
+          });
+        d3.select(planet.canvas).call(drag);
+      });
+    };
+  };
--- a/src/world-110m.json
+++ b/src/world-110m.json
Author	SHA1	Message	Date
Michelle Tilley	838bf92265	Bump to 1.1.13	2018-10-30 11:52:33 -07:00
Michelle Tilley	24ad38a824	Merge pull request #23 from christiannaths/master Fixes incorrect dependency notation	2018-10-30 11:45:49 -07:00
Christian Naths	1a388e7c4a	Fixes incorrect dependency notation Locks dependencies down to: - topojson version 1 - d3 version 3 As described in the docs	2018-08-25 15:14:22 -06:00
BinaryMuse	801ccb28e5	v1.1.2	2015-11-22 02:14:02 -08:00
BinaryMuse	52716cba5b	Name update	2015-11-22 02:04:36 -08:00
Brandon Tilley	80ef60d6cf	Update planet#draw docs	2014-12-13 12:04:48 -08:00
Brandon Tilley	f4d9536f17	v1.1.1	2014-05-18 10:37:03 -07:00
Rolf Sommerhalder	9344299298	Set `planetaryjs` global when using AMD While using RequireJS to AMD load ng-planetaryjs, planetaryjs, and their dependencies, ng-planetaryjs still looks for global object planetaryjs (such as in `var globe = planetaryjs.planet();`). Thus use the UMD pattern "AMD with global, Node, or global" instead of "AMD, Node, or browser global" from https://sublime.wbond.net/packages/UMD%20snippets	2014-05-18 10:32:26 -07:00
Brandon Tilley	3d6ca445f8	Update devDependencies	2014-05-18 10:25:51 -07:00
Brandon Tilley	c86479db1f	Update changelog retroactively to match release notes on GitHub	2014-02-03 00:25:33 -08:00
Brandon Tilley	5e807f52e0	v1.1.0	2014-02-03 00:16:47 -08:00
Brandon Tilley	cfb059369e	Update CHANGELOG	2014-02-03 00:14:39 -08:00
Brandon Tilley	4edb647564	(core) Add `stop` method	2014-02-03 00:13:37 -08:00
Brandon Tilley	74013bde29	v1.0.3	2014-01-22 20:45:13 -08:00
Brandon Tilley	62e8d08bd9	(core) Don't disable adaptive resampling on the projection	2014-01-22 20:43:26 -08:00
Brandon Tilley	f5bf0743fb	(site) Fix broken markup around 'download source' link	2014-01-15 21:39:35 -08:00
Brandon Tilley	53b7a3b2b7	v1.0.2	2014-01-15 21:33:16 -08:00
Brandon Tilley	2aa72ca45e	(site) Update CommonJS installation instructions	2014-01-15 21:31:48 -08:00
Brandon Tilley	d873121c08	(core) Update dependencies on D3 and TopoJSON	2014-01-15 14:17:50 -08:00
Brandon Tilley	1eae3fb7c9	Merge pull request #5 from darul75/master (site) Fix ID of globe in rotating example	2014-01-11 15:18:50 -08:00
Julien Valéry	c8c4bfa4bd	fix id globe name great job, thanks	2014-01-11 17:11:14 +01:00
Brandon Tilley	6350c397b2	(site) Fix broken DOM	2014-01-06 18:37:17 -08:00
Brandon Tilley	bbe2e15283	(site) Count clicks to GH as non-bounce visitors	2014-01-03 15:11:16 -08:00
Brandon Tilley	b9a070ab76	Don't forget important things like creating releases	2014-01-03 07:32:03 -08:00
Brandon Tilley	964dfbc366	v1.0.1	2014-01-02 09:06:06 -08:00
Brandon Tilley	05313d79f8	(core) Depend on D3 and TopoJSON	2014-01-02 09:04:40 -08:00
Brandon Tilley	461561340b	(site) Note TopoJSON PR in CommonJS installation instructions	2014-01-02 09:04:20 -08:00
Brandon Tilley	fe1de35576	(site) Add installation section; move AMD and CommonJS info there	2014-01-01 18:18:51 -08:00
Brandon Tilley	1764ee07f7	(site) Fix incorrect plugins in quake example	2014-01-01 11:49:02 -08:00
Brandon Tilley	19ed44d67b	(site) Add FB meta tags	2013-12-31 12:41:49 -08:00
Brandon Tilley	03b52fb10d	v1.0.0	2013-12-31 10:56:27 -08:00
Brandon Tilley	d28358568c	Remove version name	2013-12-31 10:52:52 -08:00
Brandon Tilley	ac192b779b	(site) Increase number of pings on homepage/rotating example	2013-12-28 21:45:22 -08:00
Brandon Tilley	5aa5f5633f	(site) Add AMD and CommonJS info to FAQ	2013-12-28 16:18:29 -08:00
Brandon Tilley	4927fedc20	Add 'main' entry to package.json	2013-12-28 16:18:09 -08:00
Brandon Tilley	5a140ab914	Add script to set version number	2013-12-28 13:09:12 -08:00
Brandon Tilley	50b283aa5e	(site) Add link to release notes and tree/tag from download page	2013-12-28 13:07:02 -08:00
Brandon Tilley	e37d657a61	(core) Ensure built files use newlines everywhere	2013-12-28 13:02:54 -08:00
Brandon Tilley	35d3ca0d9d	(site) Update world-110m.json download link	2013-12-28 11:59:50 -08:00
Brandon Tilley	f21450fd2a	(site) Add TopoJSON feature information to 'land' and 'borders' plugin documentation	2013-12-28 11:47:23 -08:00
Brandon Tilley	c698e7ac84	(site) Add line numbers to examples' displayed code	2013-12-28 11:21:49 -08:00
Brandon Tilley	2814b849de	(site) Increase visibility of play link for quake demo	2013-12-27 21:25:00 -08:00
Brandon Tilley	a7e10b9a92	(site) Update color key for quake example	2013-12-27 15:59:50 -08:00
Brandon Tilley	a8aa5c88c2	(site) Minor update to quake example	2013-12-27 15:36:13 -08:00
Brandon Tilley	d83290146a	(site) Update quake data to include up to Dec 27	2013-12-27 10:45:06 -08:00
Brandon Tilley	f1f39d8e01	Add script to compress earthquake data from usgs.gov	2013-12-27 10:41:12 -08:00
Brandon Tilley	aa69976987	(topojson) Recreate world-110m.json with topojson utility to decrease file size	2013-12-26 15:27:11 -08:00
Brandon Tilley	50d12ad7c6	(site) Add lakes to rotating example	2013-12-26 15:26:29 -08:00
Brandon Tilley	c50c3a8a1a	(site) Fix wrapping on examples page on mobile	2013-12-26 10:35:27 -08:00
Brandon Tilley	99a3a9374f	(site) Fix highlighting code	2013-12-25 23:40:37 -08:00
Brandon Tilley	72b6b68b25	v1.0.0-rc.2	2013-12-25 23:30:59 -08:00
Brandon Tilley	7524006ca0	(site) Fix typos, style issues, etc	2013-12-25 23:25:35 -08:00
Brandon Tilley	3e141e7734	(site) Expand FAQ to include question about loading data via Ajax	2013-12-25 19:15:48 -08:00
Brandon Tilley	16bbb57af0	(site) Fix menu styling on download page	2013-12-25 17:07:44 -08:00
Brandon Tilley	7db6071812	(site) Add download page	2013-12-25 17:06:38 -08:00
Brandon Tilley	4a8860ec1e	Refactor examples page	2013-12-25 16:21:26 -08:00
Brandon Tilley	277b7f587b	(site) Add GA tracking	2013-12-25 14:18:29 -08:00
Brandon Tilley	3deb35de6b	(site) Tweaks to copy and stying of homepage	2013-12-25 14:18:17 -08:00
Brandon Tilley	2fe52ec148	(drag, zoom): Expose planet instance as `this` in event callbacks	2013-12-24 21:54:33 -08:00
Brandon Tilley	c69f749747	(core): Fix load order of global plugins	2013-12-24 21:19:28 -08:00
Brandon Tilley	5be5a97a19	(site) Tweak homepage styles	2013-12-24 10:41:39 -08:00
Brandon Tilley	48c3eb5d5f	(site) Fix broken styling on small displays	2013-12-24 10:34:58 -08:00
Brandon Tilley	b3732450be	Fix typo and styling of rotating example	2013-12-24 10:25:01 -08:00
Brandon Tilley	3b1c80e656	v1.0.0-rc.1	2013-12-24 08:36:58 -08:00
Brandon Tilley	54f75ff627	`zoom` plugin's `initialScale` can be set to `0`	2013-12-24 08:29:01 -08:00
Brandon Tilley	deb0caff44	Add jshint and gulp task; implement hints	2013-12-24 08:28:19 -08:00
Brandon Tilley	e45f703c9b	Minor tweaks to earthquake example	2013-12-23 22:59:55 -08:00
Brandon Tilley	9ddbee97f9	Fix broken link in quake example	2013-12-23 22:49:19 -08:00
Brandon Tilley	2fec3977be	Update quake docs to match code	2013-12-23 22:46:51 -08:00
Brandon Tilley	091fe63700	Tweak quake example UI	2013-12-23 22:43:42 -08:00
Brandon Tilley	f2d15f6470	Tweak quake example	2013-12-23 22:38:26 -08:00
Brandon Tilley	3d63db9058	Fix changelog	2013-12-23 22:25:40 -08:00
Brandon Tilley	4bff52356c	Update quake example	2013-12-23 22:23:31 -08:00
Brandon Tilley	2c85e4d92e	v0.3.0	2013-12-23 22:09:49 -08:00
Brandon Tilley	ef285150ee	Reverse the order of `lat` and `lng` parameters of the `add` method of the `pings` plugin	2013-12-23 22:08:03 -08:00
Brandon Tilley	b2964f0dc7	Fix various typos in site	2013-12-23 21:52:49 -08:00
Brandon Tilley	e0bb02d461	v0.2.2	2013-12-23 15:11:59 -08:00
Brandon Tilley	72cbd4990d	Update rotating example	2013-12-23 15:02:27 -08:00
Brandon Tilley	bae0d216e6	Add link to download page to readme	2013-12-23 14:57:46 -08:00
Brandon Tilley	ab92e0a472	Add `afterZoom` and `afterDrag` hooks to the `zoom` and `drag` plugins	2013-12-23 14:57:00 -08:00
Brandon Tilley	bb92a25d99	Update mobile style	2013-12-23 14:36:51 -08:00
Brandon Tilley	1a0cf23685	Update link to index page	2013-12-23 14:19:47 -08:00
Brandon Tilley	fe7a959a9e	Update homepage	2013-12-23 14:15:41 -08:00
Brandon Tilley	09be66da35	Add FAQ	2013-12-23 14:15:36 -08:00
Brandon Tilley	14a0b8fdf4	Implement basic and rotating globe examples	2013-12-23 14:15:23 -08:00
Brandon Tilley	8c9848a492	Update quake page from JS	2013-12-23 13:24:52 -08:00
Brandon Tilley	f149583f0b	v0.2.1	2013-12-22 14:19:59 -08:00
Brandon Tilley	5317fa2214	Fix site typos	2013-12-22 14:13:06 -08:00
Brandon Tilley	0d6eca2330	Update examples index page	2013-12-22 14:08:40 -08:00
Brandon Tilley	5e402da7ae	Implement zoom/drag in quake demo with built-in plugins	2013-12-22 14:02:14 -08:00
Brandon Tilley	823a938a4b	Add the 'drag' and 'zoom' plugins	2013-12-22 13:59:41 -08:00
Brandon Tilley	b06c3779dc	Add earthquake example	2013-12-22 13:30:43 -08:00
Brandon Tilley	48c93f4853	Clarify plugin documentation	2013-12-22 11:11:33 -08:00
Brandon Tilley	90b74a6a94	Add 'Getting Help' doc	2013-12-21 23:56:08 -08:00