diff --git a/documentation/builtin.html b/documentation/builtin.html index c19726d..7438519 100644 --- a/documentation/builtin.html +++ b/documentation/builtin.html @@ -88,14 +88,14 @@ -

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.

diff --git a/documentation/builtin_borders.html b/documentation/builtin_borders.html index d1fef7e..dfe4f36 100644 --- a/documentation/builtin_borders.html +++ b/documentation/builtin_borders.html @@ -93,7 +93,7 @@
  • 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".
    • -
    +
    JavaScript
    planetaryjs.plugins.borders({
@@ -102,6 +102,7 @@

    See also:

    diff --git a/documentation/builtin_drag.html b/documentation/builtin_drag.html index c55854b..fb8864e 100644 --- a/documentation/builtin_drag.html +++ b/documentation/builtin_drag.html @@ -91,12 +91,12 @@ -
    +
    JavaScript
    planetaryjs.plugins.drag({
   onDrag: function() {
-    console.log("The planet was dragged!", d3.event);
+    console.log("The planet was dragged!", this, d3.event);
   }
 });

    diff --git a/documentation/builtin_earth.html b/documentation/builtin_earth.html index b84917a..b790efb 100644 --- a/documentation/builtin_earth.html +++ b/documentation/builtin_earth.html @@ -94,7 +94,7 @@
  • land: options to pass to the land plugin
  • borders: options to pass to the borders plugin
    • -
    +
    JavaScript
    planetaryjs.plugins.earth({
diff --git a/documentation/builtin_land.html b/documentation/builtin_land.html
index 3bbeb18..e8f46c0 100644
--- a/documentation/builtin_land.html
+++ b/documentation/builtin_land.html
@@ -93,7 +93,7 @@
 
  • 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
    • 
 
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.plugins.land({
@@ -102,6 +102,7 @@
 
    
 
    See also:
    
 
 
diff --git a/documentation/builtin_oceans.html b/documentation/builtin_oceans.html
index 235c428..054558a 100644
--- a/documentation/builtin_oceans.html
+++ b/documentation/builtin_oceans.html
@@ -91,13 +91,17 @@
 
      
 
    • fill: the fillStyle to use for the globe; defaults to "black"
      • 
 
    
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.plugins.oceans({
   fill: '#000080'
 });
    
 
    
+
    See also:
    
+
 
       
    
     
    
diff --git a/documentation/builtin_pings.html b/documentation/builtin_pings.html
index 6ad7d5f..ef39841 100644
--- a/documentation/builtin_pings.html
+++ b/documentation/builtin_pings.html
@@ -94,7 +94,7 @@
 
  • 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.
    • 
 
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.plugins.pings({
@@ -109,8 +109,11 @@
 
  • 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.
    
-
    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.
    
-
    
+
    
+ 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.
+
    
+
+
    
 
    JavaScript
    
 
 
    var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
diff --git a/documentation/builtin_topojson.html b/documentation/builtin_topojson.html
index 7983544..6362436 100644
--- a/documentation/builtin_topojson.html
+++ b/documentation/builtin_topojson.html
@@ -90,18 +90,18 @@
 
    planetaryjs.plugins.topojson([config])
    
 
    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
      • 
+
    • 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.
      • 
 
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.plugins.topojson({
   file: '/data/world-110m.json'
 });
    
 
    
-
    
+
    
 
    JavaScript
    
 
 
    d3.json('/data/world-110m.json', function(err, data) {
@@ -111,7 +111,10 @@
   // Create planets inside this callback
 });
    
 
    
+
    planet.plugins.topojson.world
    
+
    The plugin will publish the TopoJSON data to this key once it has been initialized by the plugin.
    
 
diff --git a/documentation/builtin_zoom.html b/documentation/builtin_zoom.html
index 592b8c2..5cea053 100644
--- a/documentation/builtin_zoom.html
+++ b/documentation/builtin_zoom.html
@@ -93,13 +93,13 @@
 
  • 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.
    • 
 
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.plugins.zoom({
   scaleExtent: [200, 1000],
   onZoom: function() {
-    console.log("The planet was zoomed!", d3.event);
+    console.log("The planet was zoomed!", this, d3.event);
   }
 });
    
 
    
diff --git a/documentation/core.html b/documentation/core.html
index 07348da..b5fe54c 100644
--- a/documentation/core.html
+++ b/documentation/core.html
@@ -98,7 +98,7 @@
 <body>
 ...
    
 
    
-
    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. See the TopoJSON Plugin documentation for more information.
    
+
    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. See the TopoJSON Plugin documentation for more information.
    
 
    Core API
    
 
    planetaryjs.noConflict()
    
 
    In non-AMD and non-CommonJS environments, Planetary.js takes over the global planetaryjs namespace (in the browser, this means window.planetaryjs). If, for some reason, something else useful was there before you loaded Planetary.js, you can ask for it to be returned to that spot by calling planetaryjs.noConflict(). The Planetary.js library will be returned from the function, so you can continue to use the library.
    
@@ -109,16 +109,16 @@
 
    
 
    planetaryjs.loadPlugin(plugin)
    
 
    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) instead.
    
-
    
+
    
 
    JavaScript
    
 
 
    planetaryjs.loadPlugin(somePlugin);
 planetaryjs.loadPlugin(somePluginGenerator());
    
 
    
-
    For more information on the plugin system and API, please see the Plugins documentation.
    
+
    For more information on the plugin system and API, please see the Plugins documentation.
    
 
    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 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 covers these methods in considerably more detail.
    
+
    
 
    JavaScript
    
 
 
    var planet = planetaryjs.planet();
    
diff --git a/documentation/faq.html b/documentation/faq.html
index b830a83..62d54da 100644
--- a/documentation/faq.html
+++ b/documentation/faq.html
@@ -103,6 +103,12 @@ planet's draw method.
    
   
 
    
 
+
    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.
    
+
    
+  
+
    
+
 
    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 for more information.
    
 
    
diff --git a/documentation/index.html b/documentation/index.html
index b2a96b8..df7d931 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -84,18 +84,21 @@
 
       
    
         
    Introduction
    
-
    Planetary.js is a JavaScript library for building awesome interactive globes. It uses D3 and 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 and 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 describes the top-level Planetary.js API, including installing and configuring the library and creating new instances of planets.
      • 
+
    • Core API describes the top-level Planetary.js API, including installing and configuring the library and creating new planet instances.
      • 
 
    • Planet API 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 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 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 describes each of the built-in plugins in turn, including their public API and how to use them in a project.
      • 
+
    • FAQ answers some common question and addresses a few easy-to-miss gotchas.
      • 
+
    • Getting Help 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.
    
 
    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).
    
-
    
+
    Be sure to check out the examples as well!
    
+
    
 
    HTML
    
 
 
    <html>
diff --git a/documentation/planet.html b/documentation/planet.html
index a718b66..5df518b 100644
--- a/documentation/planet.html
+++ b/documentation/planet.html
@@ -84,28 +84,29 @@
 
       
    
         
    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 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 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.
    
-
    
+
    
 
    JavaScript
    
 
 
    planet.loadPlugin(somePlugin);
 planet.loadPlugin(somePluginGenerator());
    
 
    
-
    For more information on the plugin system and API, please see the Plugins documentation.
    
+
    For more information on the plugin system and API, please see the Plugins documentation.
    
 
    planet.projection
    
 
    The core of a planet's data model is an d3.geo.projection (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; many of the examples on this site also use the projection object to operate.
    
-
    
+
    
 
    JavaScript
    
 
 
    planet.projection
   .scale(width / 2)
+  .translate([width / 2, height / 2])
   .rotate([60, -10, 0]);
    
 
    
 
    planet.path
    
 
    planet.path is a d3.geo.path 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.
    
-
    
+
    
 
    JavaScript
    
 
 
    canvasContext.beginPath();
@@ -117,9 +118,9 @@ canvasContext.fill();
    
 
    planet.canvas and planet.context
    
 
    Once you call draw on a planet instance, Planetary.js will set the canvas and context properties to the canvas and its context, respectively.
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    planet.onInit(function() {
@@ -134,7 +135,7 @@ planet.onInit(function(done) {
 
    
 
    planet.onDraw( function(){} )
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    planet.onDraw(function() {
@@ -146,7 +147,7 @@ planet.onInit(function(done) {
 
    
 
    planet.withSavedContext( function(context){} )
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    planet.onDraw(function() {
@@ -167,7 +168,7 @@ planet.onInit(function(done) {
 
  • 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).
    • 
 
  • Start the animation loop, each tick clearing the canvas and calling any registered onDraw hooks in order.
    • 
 
-
    
+
    
 
    HTML
    
 
 
    <canvas id='myCanvas' width='123' height='456'></canvas>
    
diff --git a/documentation/plugins.html b/documentation/plugins.html
index 25e0799..ae3c239 100644
--- a/documentation/plugins.html
+++ b/documentation/plugins.html
@@ -88,9 +88,9 @@
 
    Loading Plugins
    
 
    Plugins are loaded either globally by planetaryjs.loadPlugin or for a specific planet instance by planet.loadPlugin. If you call draw on a planet and it has no plugins loaded at all (from either source), Planetary.js will use the default plugin stack, which consists of the earth and pings plugins.
    
 
    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 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):
    
-
    
+
    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 for more details.
    
+
    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):
    
+
    
 
    JavaScript
    
 
 
    var autorotate = function(planet) {
@@ -104,9 +104,9 @@
 
 planet.loadPlugin(autorotate);
    
 
    
-
    Plugin Generators
    
-
    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.
    
-
    
+
    Configurable Plugins
    
+
    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.
    
+
    
 
    JavaScript
    
 
 
    var autorotate = function(degreesPerTick) {
@@ -124,7 +124,7 @@ planet.loadPlugin(autorotate(5));
    
 
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    var somePlugin = function(planet) {
@@ -133,8 +133,8 @@ planet.loadPlugin(autorotate(5));
    
   });
 };
    
 
    
-
    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).
    
+
    
 
    JavaScript
    
 
 
    var somePlugin = function(planet) {
@@ -147,7 +147,7 @@ planet.loadPlugin(autorotate(5));
    
 
    
 
    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.
    
-
    
+
    
 
    JavaScript
    
 
 
    var somePlugin = function(planet) {
@@ -161,11 +161,11 @@ planet.loadPlugin(autorotate(5));
    
   });
 };
    
 
    
-
    The planet exposes properties and methods, such as context, path, and withSavedContext to assist with drawing to the canvas. The Planet API 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 goes into more detail on individual properties.
    
 
    Drawing Geo Paths
    
-
    As explained in the planet.path documentation on the Planet API page, planet.path is a d3.geo.path 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 works.
    
-
    
+
    As explained in the planet.path documentation on the Planet API page, planet.path is a d3.geo.path 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) the Land plugin's implementation.
    
+
    
 
    JavaScript
    
 
 
    var drawLand = function(planet) {
@@ -183,14 +183,16 @@ planet.loadPlugin(autorotate(5));
    
 };
    
 
    
 
    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.
    
+
    
 
    JavaScript
    
 
 
    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; }
@@ -217,7 +219,7 @@ setTimeout(function() {
 
    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. 
-
    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.
      3. 
+
    3. 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.
      4. 
 
    4. Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.
      5. 
 
    5. Only publish public data and API methods to planet.plugins.pluginName, where pluginName is the name of your plugin.
      6. 
 
    
diff --git a/download/index.html b/download/index.html
index c56d9c4..04f1e21 100644
--- a/download/index.html
+++ b/download/index.html
@@ -41,7 +41,7 @@
         
 
 
-
    Download Planetary.js
    
+
     Download Planetary.js
    
 
 
    Download the core Planetary.js library and supporting files here.
    
 
@@ -80,11 +80,19 @@
       ]
     
    
     
    
-      
+      
       Earth TopoJSON data: [
       minified
       ]
     
    
+    
    
+      
+      Source code [
+        .zip
+        |
+        .tar.gz
+      ]
+    
    
   
    
 
 
diff --git a/examples/basic.html b/examples/basic.html
index fa6a6dd..d213bb0 100644
--- a/examples/basic.html
+++ b/examples/basic.html
@@ -52,7 +52,7 @@
   
 
    
 
-
    
+
    
 
    HTML
    
 
    <canvas id='basicGlobe' width='400' height='400'></canvas>
    
 
diff --git a/examples/index.html b/examples/index.html
index 7af87cc..aa778da 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -42,38 +42,35 @@
 
 
    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.
    
 
-
    
-  
    Level 1
    
+
    
   
    
     
-    
    Basic Globe
    
+    
    Basic Globe
    
     
    It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!
    
-    plugins: earth
-    d3: projections
+    plugins: earth
+    d3: projections
   
    
 
    
 
-
    
-  
    Level 2
    
+
    
   
    
     
-    
    Rotating Globe with Pings
    
+    
    Rotating Globe with Pings
    
     
    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.
    
-    plugins: earth, pings, drag, zoom
-    custom plugins
-    d3: projections
+    plugins: earth, pings, drag, zoom
+    custom plugins
+    d3: projections
   
    
 
    
 
-
    
-  
    Level 3
    
+
    
   
    
     
-    
    2013 Seismic Activity Visualization
    
+    
    2013 Seismic Activity Visualization
    
     
    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.
    
-    plugins: earth, pings, drag, zoom
-    custom plugins
-    d3: projections, scales, selections, events, external data
+    plugins: earth, pings, drag, zoom
+    custom plugins
+    d3: projections, scales, selections, events, external data
   
    
 
    
 
diff --git a/examples/quake.html b/examples/quake.html
index 490b8fd..99c21c5 100644
--- a/examples/quake.html
+++ b/examples/quake.html
@@ -50,7 +50,7 @@
 
 
    View the demo
    
 
-
    
+
    
 
    HTML
    
 
    <h1>Earthquakes: 2013</h1>
 <ul id='magnitudes'></ul>
diff --git a/examples/rotating.html b/examples/rotating.html
index 65a884a..5c49d63 100644
--- a/examples/rotating.html
+++ b/examples/rotating.html
@@ -55,7 +55,7 @@
     style="width: 400px; height: 400px; cursor: move;">
 
    
 
-
    
+
    
 
    HTML
    
 
    <canvas id='basicGlobe' width='400' height='400'
   style='width: 400px; height: 400px; cursor: move;'></canvas>