Update site

documentation/builtin.html

@@ -88,14 +88,14 @@
 <ul>
 <li><a href="/documentation/builtin_earth.html">Earth</a> - a combination of the <code>topojson</code>, <code>oceans</code>, <code>land</code>, and <code>borders</code> plugins.</li>
 <li><a href="/documentation/builtin_topojson.html">TopoJSON</a> - loads TopoJSON data via Ajax (or via configuration) and makes it available for use by other plugins</li>
-<li><a href="/documentation/builtin_oceans.html">Oceans</a> - fills in the globe with a solid color (and an optional stroke)</li>
+<li><a href="/documentation/builtin_oceans.html">Oceans</a> - fills in the globe with a solid color</li>
 <li><a href="/documentation/builtin_land.html">Land</a> - uses data from the <code>topojson</code> plugin to draw Earth&#39;s land masses</li>
 <li><a href="/documentation/builtin_borders.html">Borders</a> - uses data from the <code>topojson</code> plugin to draw borders between Earth&#39;s countries</li>
 <li><a href="/documentation/builtin_pings.html">Pings</a> - draws animated, circular pings on the globe</li>
-<li><a href="/documentation/builtin_zoom.html">Zoom</a> - enables mouse-based zooming of the globe via the mousewheel</li>
+<li><a href="/documentation/builtin_zoom.html">Zoom</a> - enables mouse-based zooming of the globe via the mouse wheel</li>
 <li><a href="/documentation/builtin_drag.html">Drag</a> - enables mouse-based rotation of the globe via dragging</li>
 </ul>
-<p>Built-in plugins exposed as properties on <code>planetaryjs.plugins</code>.</p>
+<p>Built-in plugins are exposed as properties on <code>planetaryjs.plugins</code>.</p>
 <p>If you do not specify any plugins (globally or per-instance), Planetary.js will use the <code>earth</code> and <code>pings</code> plugins with their default settings.</p>
 
       </div>

documentation/builtin_borders.html

@@ -93,7 +93,7 @@
 <li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; defaults to no value, and the context&#39;s <code>lineWidth</code> is not modified</li>
 <li><code>type</code>: valid options are <code>&quot;internal&quot;</code>, <code>&quot;external&quot;</code>, or <code>&quot;both&quot;</code>. <code>&quot;internal&quot;</code> draws borders between countries but not coastlines; <code>&quot;external&quot;</code> does the opposite. <code>&quot;both&quot;</code>, unsurprisingly, draws both. Defaults to <code>&quot;internal&quot;</code>.</li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.borders({
@@ -102,6 +102,7 @@
 <p></div></p>
 <p>See also:</p>
 <ul>
+<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
 <li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
 </ul>
 

documentation/builtin_drag.html

@@ -91,12 +91,12 @@
 <ul>
 <li><code>onDragStart</code>, <code>onDragEnd</code>, <code>onDrag</code>, <code>afterDrag</code>: hooks to the <code>d3.behavior.drag</code> object&#39;s <code>dragstart</code>, <code>dragend</code>, and <code>drag</code> events; each defaults to a no-op. <code>onDrag</code> fires at the start of the <code>drag</code> event, <code>afterDrag</code> at the end. The planet instance is available as <code>this</code> inside the each of the functions.</li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.drag({
   onDrag: function() {
-    console.log(&quot;The planet was dragged!&quot;, d3.event);
+    console.log(&quot;The planet was dragged!&quot;, this, d3.event);
   }
 });</code></pre>
 <p></div></p>

documentation/builtin_earth.html

@@ -94,7 +94,7 @@
 <li><code>land</code>: options to pass to the <code>land</code> plugin</li>
 <li><code>borders</code>: options to pass to the <code>borders</code> plugin</li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.earth({

documentation/builtin_land.html

@@ -93,7 +93,7 @@
 <li><code>stroke</code>: the <code>strokeStyle</code> to use for the context; defaults to no value, resulting in no stroke around the landmasses</li>
 <li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; only effective if <code>stroke</code> is set. Defaults to no value, resulting in no change to the context&#39;s <code>lineWidth</code></li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.land({
@@ -102,6 +102,7 @@
 <p></div></p>
 <p>See also:</p>
 <ul>
+<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
 <li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
 </ul>
 

documentation/builtin_oceans.html

@@ -91,13 +91,17 @@
 <ul>
 <li><code>fill</code>: the <code>fillStyle</code> to use for the globe; defaults to <code>&quot;black&quot;</code></li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.oceans({
   fill: &#39;#000080&#39;
 });</code></pre>
 <p></div></p>
+<p>See also:</p>
+<ul>
+<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
+</ul>
 
       </div>
     </div>

documentation/builtin_pings.html

@@ -94,7 +94,7 @@
 <li><code>angle</code>: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to <code>5</code></li>
 <li><code>latitudeFirst</code>: reverse the order of the latitudinal and longitudinal coordinates passed to the <code>add</code> function (so that the latitudinal coordinate comes first); defaults to false. See the note on <code>add</code>, below, for more information.</li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.pings({
@@ -109,8 +109,11 @@
 <li><code>angle</code>: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to <code>5</code></li>
 </ul>
 <p>Any values not set by <code>config</code> will default to the values specified in the plugin&#39;s configuration, if any were set.</p>
-<p><strong>Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass <code>latitudeFirst</code> as an option to the plugin configuration function.</strong> 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 <a href="http://docs.geotools.org/latest/userguide/library/referencing/order.html">this article at the GeoTools web site</a>.</p>
+<div class='ui red raised segment'>
-<div class='ui raise segment'>
+<i class='red icon warning'></i> <strong>Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass <code>latitudeFirst</code> as an option to the plugin configuration function.</strong> 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 <a href="http://docs.geotools.org/latest/userguide/library/referencing/order.html">this article at the GeoTools web site</a>.
+</div>
+
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var colors = [&#39;red&#39;, &#39;yellow&#39;, &#39;white&#39;, &#39;orange&#39;, &#39;green&#39;, &#39;cyan&#39;, &#39;pink&#39;];

documentation/builtin_topojson.html

@@ -90,18 +90,18 @@
 <p><strong><code>planetaryjs.plugins.topojson([config])</code></strong></p>
 <p>Valid keys for <code>config</code> are:</p>
 <ul>
-<li><code>world</code>: a JavaScript object representing TopoJSON data (not JSON data); defaults to no value, which will cause the plugin to load data from the <code>file</code> configuration option</li>
+<li><code>world</code>: a JavaScript object representing TopoJSON data (not a JSON string); defaults to no value, which will cause the plugin to load data from the <code>file</code> configuration option</li>
 <li><code>file</code>: the path to a TopoJSON data file to be loaded via Ajax; defaults to <code>&quot;world-110m.json&quot;</code>, which can be downloaded with the Planetary.js library from the <a href="/download/">download page</a>.</li>
 </ul>
 <p>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 <code>world</code> property rather than letting the plugin load the data via Ajax each time a new planet is created.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.topojson({
   file: &#39;/data/world-110m.json&#39;
 });</code></pre>
 <p></div></p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">d3.json(&#39;/data/world-110m.json&#39;, function(err, data) {
@@ -111,7 +111,10 @@
   // Create planets inside this callback
 });</code></pre>
 <p></div></p>
+<p><strong><code>planet.plugins.topojson.world</code></strong></p>
+<p>The plugin will publish the TopoJSON data to this key once it has been initialized by the plugin.</p>
 <ul>
+<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
 <li><a href="/documentation/builtin_land.html">Land Plugin</a></li>
 <li><a href="/documentation/builtin_borders.html">Borders Plugin</a></li>
 </ul>

documentation/builtin_zoom.html

@@ -93,13 +93,13 @@
 <li><code>scaleExtent</code>: the value to use for the <code>d3.behavior.zoom</code> object&#39;s <code>scaleExtent</code> property, which defines how far in and out the planet can be zoomed; defaults to <code>[50, 2000]</code></li>
 <li><code>onZoomStart</code>, <code>onZoomEnd</code>, <code>onZoom</code>, <code>afterZoom</code>: hooks to the <code>d3.behavior.zoom</code> object&#39;s <code>zoomstart</code>, <code>zoomend</code>, and <code>zoom</code> events; each defaults to a no-op. <code>onZoom</code> fires at the start of the <code>zoom</code> event, <code>afterZoom</code> at the end. The planet instance is available as <code>this</code> inside the each of the functions.</li>
 </ul>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.plugins.zoom({
   scaleExtent: [200, 1000],
   onZoom: function() {
-    console.log(&quot;The planet was zoomed!&quot;, d3.event);
+    console.log(&quot;The planet was zoomed!&quot;, this, d3.event);
   }
 });</code></pre>
 <p></div></p>

documentation/core.html

@@ -98,7 +98,7 @@
 <body>
 ...</code></pre>
 <p></div></p>
-<p>If you use the default <code>topojson</code> plugin (most people will), you&#39;ll also need to make sure <code>world-110m.json</code> (or some other TopoJSON data file) is available on your server. This file is also available from <a href="/download/">the download page</a>. See the <a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a> documentation for more information.</p>
+<p>If you use the default <code>topojson</code> plugin (most people will), you&#39;ll also need to make sure <code>world-110m.json</code> (or some other TopoJSON data file) is available on your server. This file is also available from <a href="/download/">the download page</a>. See the <a href="/documentation/builtin_topojson.html">TopoJSON Plugin documentation</a> for more information.</p>
 <h2>Core API</h2>
 <p><strong><code>planetaryjs.noConflict()</code></strong></p>
 <p>In non-AMD and non-CommonJS environments, Planetary.js takes over the global <code>planetaryjs</code> namespace (in the browser, this means <code>window.planetaryjs</code>). 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 <code>planetaryjs.noConflict()</code>. The Planetary.js library will be returned from the function, so you can continue to use the library.</p>
@@ -109,16 +109,16 @@
 <p></div></p>
 <p><strong><code>planetaryjs.loadPlugin(plugin)</code></strong></p>
 <p>Planetary.js uses a plugin architecture for all its functionality. Calling <code>planetaryjs.loadPlugin</code> will cause that plugin to be loaded in <em>all</em> planets created from this library. If you only want to use a plugin in some of your planets, use the <code>planet.loadPlugin</code> method (from the <a href="/documentation/planet.html">Planet API</a>) instead.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planetaryjs.loadPlugin(somePlugin);
 planetaryjs.loadPlugin(somePluginGenerator());</code></pre>
 <p></div></p>
-<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins</a> documentation.</p>
+<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins documentation</a>.</p>
 <p><strong><code>planetaryjs.planet()</code></strong></p>
-<p>The <code>planet</code> API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with <code>planetaryjs.loadPlugin()</code> active. It has various methods for manipulating the globe and drawing it to a canvas. The <a href="/documentation/planet.html">Planet API</a> covers these methods in considerably more detail.</p>
+<p>The <code>planet</code> API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with <code>planetaryjs.loadPlugin</code> active. It has various methods for manipulating the globe and drawing it to a canvas. The <a href="/documentation/planet.html">Planet API</a> covers these methods in considerably more detail.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var planet = planetaryjs.planet();</code></pre>

documentation/faq.html

@@ -103,6 +103,12 @@ planet&#39;s <code>draw</code> method.</p>
   <i class="globe icon"></i>
 </div>
 
+<p><strong>Q:</strong> Why can&#39;t I load the <code>world-110m.json</code> file with the TopoJSON plugin?</p>
+<p><strong>A:</strong> After checking to make sure you&#39;ve specified the correct path to the file in the plugin&#39;s configuration options, ensure that you&#39;re viewing your page over HTTP. Your browser won&#39;t be able to make the necessary Ajax request to load the file if you&#39;re just viewing the page from your filesystem.</p>
+<div class="ui horizontal icon divider">
+  <i class="globe icon"></i>
+</div>
+
 <p><strong>Q:</strong> How do I manipulate my globe?</p>
 <p><strong>A:</strong> The planet object has methods and properties for manipulating the globe; most notable is the <code>projection</code> property. See the <a href="/documentation/planet.html">Planet API</a> for more information.</p>
 <div class="ui horizontal icon divider">

documentation/index.html

@@ -84,18 +84,21 @@
 
       <div class='twelve wide column'>
         <h1>Introduction</h1>
-<p>Planetary.js is a JavaScript library for building awesome interactive globes. It uses <a href="http://d3js.org/">D3</a> and <a href="https://github.com/mbostock/topojson">TopoJSON</a> 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.</p>
+<p>Planetary.js is a JavaScript library for building awesome interactive globes. It uses <a href="http://d3js.org/">D3</a> and <a href="https://github.com/mbostock/topojson">TopoJSON</a> 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.</p>
 <p>The documentation is split up into several sections:</p>
 <ul>
-<li><a href="/documentation/core.html">Core API</a> describes the top-level Planetary.js API, including installing and configuring the library and creating new instances of planets.</li>
+<li><a href="/documentation/core.html">Core API</a> describes the top-level Planetary.js API, including installing and configuring the library and creating new planet instances.</li>
 <li><a href="/documentation/planet.html">Planet API</a> 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.</li>
-<li><a href="/documentation/plugins.html">Plugins</a> describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js</li>
+<li><a href="/documentation/plugins.html">Plugins</a> describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js.</li>
 <li><a href="/documentation/builtin.html">Built-In Plugins</a> describes each of the built-in plugins in turn, including their public API and how to use them in a project.</li>
+<li><a href="/documentation/faq.html">FAQ</a> answers some common question and addresses a few easy-to-miss gotchas.</li>
+<li><a href="/documentation/help.html">Getting Help</a> describes what to do if you still need help after reading this documentation.</li>
 </ul>
 <h2>Quick Start</h2>
-<p>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.</p>
+<p>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.</p>
 <p>Note that you&#39;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&#39;t work when viewing a page directly from the filesystem).</p>
-<div class='ui raise segment'>
+<p>Be sure to check out <a href="/examples/">the examples</a> as well!</p>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>
 
 <pre><code class="language-html">&lt;html&gt;

documentation/planet.html

@@ -84,28 +84,29 @@
 
       <div class='twelve wide column'>
         <h1>Planet API</h1>
-<p>A &quot;planet&quot; represents a single globe and its rendering instructions. It is created from the <code>planetaryjs.planet()</code> method; see the <a href="/documentation/core.html">Core API</a> documentation for more details.</p>
+<p>A &quot;planet&quot; represents a single globe and its rendering instructions. It is created from the <code>planetaryjs.planet</code> method; see the <a href="/documentation/core.html">Core API documentation</a> for more details.</p>
 <p><strong><code>planet.loadPlugin(plugin)</code></strong></p>
 <p>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. <strong>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 <code>earth</code> and <code>pings</code> plugins.</strong></p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planet.loadPlugin(somePlugin);
 planet.loadPlugin(somePluginGenerator());</code></pre>
 <p></div></p>
-<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins</a> documentation.</p>
+<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins documentation</a>.</p>
 <p><strong><code>planet.projection</code></strong></p>
 <p>The core of a planet&#39;s data model is an <a href="https://github.com/mbostock/d3/wiki/Geo-Projections"><code>d3.geo.projection</code></a> (specifically, an orthographic projection), which is exposed by a planet by <code>planet.projection</code>. You can use this object to control various aspects of the planet. The D3 documentation covers the methods in considerable detail, so <a href="https://github.com/mbostock/d3/wiki/Geo-Projections">be sure to check it out</a>; many of the examples on this site also use the projection object to operate.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planet.projection
   .scale(width / 2)
+  .translate([width / 2, height / 2])
   .rotate([60, -10, 0]);</code></pre>
 <p></div></p>
 <p><strong><code>planet.path</code></strong></p>
 <p><code>planet.path</code> is a <a href="https://github.com/mbostock/d3/wiki/Geo-Paths"><code>d3.geo.path</code></a> which uses the planet&#39;s internal projection to generate path data for geographical features. Its <code>context</code> 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.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">canvasContext.beginPath();
@@ -117,9 +118,9 @@ canvasContext.fill();</code></pre>
 <p><strong><code>planet.canvas</code> and <code>planet.context</code></strong></p>
 <p>Once you call <code>draw</code> on a planet instance, Planetary.js will set the <code>canvas</code> and <code>context</code> properties to the canvas and its context, respectively.</p>
 <p><strong><code>planet.onInit( function([done]){} )</code></strong></p>
-<p>Registers a function to be called when the planet is initialized (which happens after a call to <code>draw</code> and after any loaded plugins have been initialized). This is mostly used by plugins to initialize themselves when the planet &quot;boots.&quot;</p>
+<p>Registers a function to be called when the planet is initialized (which happens after a call to <code>draw</code> and after any registered plugins have been loaded). This is mostly used by plugins to initialize themselves when the planet &quot;boots.&quot;</p>
 <p>If the provided callback function takes any parameters, it will be a &quot;done&quot; function that must be called once the initialization function finishes any asynchronous work before the planet will continue to initialize.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planet.onInit(function() {
@@ -134,7 +135,7 @@ planet.onInit(function(done) {
 <p></div></p>
 <p><strong><code>planet.onDraw( function(){} )</code></strong></p>
 <p>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.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planet.onDraw(function() {
@@ -146,7 +147,7 @@ planet.onInit(function(done) {
 <p></div></p>
 <p><strong><code>planet.withSavedContext( function(context){} )</code></strong></p>
 <p>Calls the function with the current canvas context as a parameter, wrapping the function call in <code>context.save()</code> and <code>context.restore()</code>. Use this function any time you&#39;re going to modify the context to ensure it gets put back to the way it was.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">planet.onDraw(function() {
@@ -167,7 +168,7 @@ planet.onInit(function(done) {
 <li>Run each registered <code>onInit</code> hook in the order it was registered (note that <code>onInit</code> calls made by plugins will not be made until step 1, after <code>draw</code> has been called).</li>
 <li>Start the animation loop, each tick clearing the canvas and calling any registered <code>onDraw</code> hooks in order.</li>
 </ol>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>
 
 <pre><code class="language-html">&lt;canvas id=&#39;myCanvas&#39; width=&#39;123&#39; height=&#39;456&#39;&gt;&lt;/canvas&gt;</code></pre>

documentation/plugins.html

@@ -88,9 +88,9 @@
 <h2>Loading Plugins</h2>
 <p>Plugins are loaded either globally by <code>planetaryjs.loadPlugin</code> or for a specific planet instance by <code>planet.loadPlugin</code>. If you call <code>draw</code> 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 <code>earth</code> and <code>pings</code> plugins.</p>
 <h2>Anatomy of a Plugin</h2>
-<p>A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some predefined operation. <strong>The best plugins do one tiny thing.</strong> 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 <code>earth</code> plugin is built. See the <a href="/documentation/builtin_earth.html">Earth Plugin</a> documentation for more details.</p>
+<p>A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some operation on it. <strong>The best plugins do one tiny thing.</strong> 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 <code>earth</code> plugin is built. See the <a href="/documentation/builtin_earth.html">Earth Plugin documentation</a> for more details.</p>
-<p>Most of the time, a plugin will implement its behavior by registering callbacks into the planet&#39;s lifecycle hooks. For example, the following simple plugin increments the planet&#39;s projection&#39;s rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):</p>
+<p>Most of the time, a plugin will implement its behavior by registering callbacks into a planet&#39;s lifecycle hooks. For example, the following simple plugin increments the planet&#39;s projection&#39;s rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var autorotate = function(planet) {
@@ -104,9 +104,9 @@
 
 planet.loadPlugin(autorotate);</code></pre>
 <p></div></p>
-<h2>Plugin Generators</h2>
+<h2>Configurable Plugins</h2>
-<p>Often, you&#39;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 <em>returns</em> the plugin function. You can then call this generator to generate the plugin function for use by <code>loadPlugin</code>.</p>
+<p>Often, you&#39;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 <em>returns</em> the plugin function. You can then call this function to generate the plugin for use by <code>loadPlugin</code>.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var autorotate = function(degreesPerTick) {
@@ -124,7 +124,7 @@ planet.loadPlugin(autorotate(5));</code></pre>
 <p></div></p>
 <h2>Setting Yourself Up</h2>
 <p>If you need to do some work before your plugin is ready to be used, you can add a hook to a planet&#39;s <code>onInit</code> hook to do the necessary setup.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var somePlugin = function(planet) {
@@ -133,8 +133,8 @@ planet.loadPlugin(autorotate(5));</code></pre>
   });
 };</code></pre>
 <p></div></p>
-<p>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 <code>onInit</code> function. When you&#39;re done setting up, call this function and Planetary.js will continue to initialize the planet. <strong>If you accept the parameter but don&#39;t call it, the initialization process will stop</strong> (and your planet will not work).</p>
+<p>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 <code>onInit</code> function. This argument is a function that tells Planetary.js when you&#39;re done setting up; simply call this function after your asynchronous operations are complete and Planetary.js will continue to initialize the planet. <strong>If you accept the parameter but don&#39;t call it, the initialization process will stop</strong> (and your planet will not work).</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var somePlugin = function(planet) {
@@ -147,7 +147,7 @@ planet.loadPlugin(autorotate(5));</code></pre>
 <p></div></p>
 <h2>Drawing on the Canvas</h2>
 <p>Many plugins will want to draw onto the globe&#39;s canvas; you can do so by registering a function to a planet&#39;s <code>onDraw</code> hook.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var somePlugin = function(planet) {
@@ -161,11 +161,11 @@ planet.loadPlugin(autorotate(5));</code></pre>
   });
 };</code></pre>
 <p></div></p>
-<p>The planet exposes properties and methods, such as <code>context</code>, <code>path</code>, and <code>withSavedContext</code> to assist with drawing to the canvas. The <a href="/documentation/planet.html">Planet API</a> documentation goes into more detail on individual properties.</p>
+<p>The planet exposes properties and methods, such as <code>context</code>, <code>path</code>, and <code>withSavedContext</code> to assist with drawing to the canvas. The <a href="/documentation/planet.html">Planet API documentation</a> goes into more detail on individual properties.</p>
 <h3>Drawing Geo Paths</h3>
-<p>As explained in the <code>planet.path</code> documentation on the <a href="/documentation/planet.html">Planet API</a> page, <code>planet.path</code> is a <a href="https://github.com/mbostock/d3/wiki/Geo-Paths"><code>d3.geo.path</code></a> 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.</p>
+<p>As explained in the <code>planet.path</code> documentation on the <a href="/documentation/planet.html">Planet API page</a>, <code>planet.path</code> is a <a href="https://github.com/mbostock/d3/wiki/Geo-Paths"><code>d3.geo.path</code></a> 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.</p>
-<p>As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on <code>planet.plugins.topojson.world</code>), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) how the <a href="/documentation/builtin_land.html">Land plugin</a> works.</p>
+<p>As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on <code>planet.plugins.topojson.world</code>), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) the <a href="/documentation/builtin_land.html">Land plugin&#39;s</a> implementation.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-javascript">var drawLand = function(planet) {
@@ -183,14 +183,16 @@ planet.loadPlugin(autorotate(5));</code></pre>
 };</code></pre>
 <p></div></p>
 <h2>Exposing Data and Methods</h2>
-<p>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&#39;s <code>plugins</code> namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin&#39;s documentation.</p>
+<p>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&#39;s <code>plugins</code> namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin&#39;s documentation.</p>
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui red ribbon label'>JavaScript</div>
 
 <pre><code class="language-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() {
 <p>There are a few things you can do to make your plugin all it can be:</p>
 <ol>
 <li>Make your plugin very small; ideally, it should do only <em>one thing</em> very well. Be extremely liberal with splitting plugins into smaller plugins, which makes them easier to understand, test, and compose. It&#39;s easy to say &quot;this plugin renders the Earth,&quot; but it really renders oceans, land masses, and borders.</li>
-<li>Use function generators to generate your plugin (as described above in &quot;Plugin Generators&quot;), even if it doesn&#39;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.</li>
+<li>Use higher-order functions to generate your plugin (as described above in &quot;Plugin Generators&quot;) instead of passing function references to <code>loadPlugin</code> directly, even if your plugin doesn&#39;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.</li>
 <li>Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.</li>
 <li>Only publish public data and API methods to <code>planet.plugins.pluginName</code>, where <code>pluginName</code> is the name of your plugin.</li>
 </ol>

download/index.html

@@ -41,7 +41,7 @@
         
 
 
-<h1>Download Planetary.js</h1>
+<h1><i class='icon download disk'></i> Download Planetary.js</h1>
 
 <p>Download the core Planetary.js library and supporting files here.</p>
 
@@ -80,11 +80,19 @@
       ]
     </div>
     <div class='item'>
-      <i class='icon download'></i>
+      <i class='icon globe'></i>
       Earth TopoJSON data: [
       <a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.1/world-110m.json'>minified</a>
       ]
     </div>
+    <div class='item'>
+      <i class='icon code'></i>
+      Source code [
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/v1.0.0-rc.1.zip'>.zip</a>
+        |
+        <a href='https://github.com/BinaryMuse/planetary.js/archive/v1.0.0-rc.1.tar.gz'>.tar.gz</a>
+      ]
+    </div>
   </div>
 
 

examples/basic.html

@@ -52,7 +52,7 @@
   <canvas id='basicGlobe' width='400' height='400'></canvas>
 </div>
 
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>
 <pre><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'&gt;&lt;/canvas&gt;</code></pre>
 

examples/index.html

@@ -42,38 +42,35 @@
 
 <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 segment example-segment'>
+<div class='ui top attached segment example-segment'>
-  <div class='ui top attached purple label'>Level 1</div>
   <div>
     <a href='/examples/basic.html'><img src='/images/ex-basic.png' style='float: left; margin-right: 20px;'></a>
-    <a href='/examples/basic.html'><h2>Basic Globe</h2></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 teal horizontal label'>plugins: earth</span>
+    <span class='ui red horizontal label'>plugins: earth</span>
-    <span class='ui black horizontal label'>d3: projections</span>
+    <span class='ui purple horizontal label'>d3: projections</span>
   </div>
 </div>
 
-<div class='ui segment example-segment'>
+<div class='ui attached segment example-segment'>
-  <div class='ui top attached orange label'>Level 2</div>
   <div>
     <a href='/examples/rotating.html'><img src='/images/ex-rotating.png' style='float: left; margin-right: 20px;'></a>
-    <a href='/examples/rotating.html'><h2>Rotating Globe with Pings</h2></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 teal horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
-    <span class='ui orange horizontal label'>custom plugins</span>
+    <span class='ui teal horizontal label'>custom plugins</span>
-    <span class='ui black horizontal label'>d3: projections</span>
+    <span class='ui purple horizontal label'>d3: projections</span>
   </div>
 </div>
 
-<div class='ui segment example-segment'>
+<div class='ui bottom attached segment example-segment'>
-  <div class='ui top attached red label'>Level 3</div>
   <div>
     <a href='/examples/quake.html'><img src='/images/ex-quake.png' style='float: left; margin-right: 20px;'></a>
-    <a href='/examples/quake.html'><h2>2013 Seismic Activity Visualization</h2></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 teal horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
-    <span class='ui orange horizontal label'>custom plugins</span>
+    <span class='ui teal horizontal label'>custom plugins</span>
-    <span class='ui black horizontal label'>d3: projections, scales, selections, events, external data</span>
+    <span class='ui purple horizontal label'>d3: projections, scales, selections, events, external data</span>
   </div>
 </div>
 

examples/quake.html

@@ -50,7 +50,7 @@
 
 <p><a href="/examples/quake/index.html">View the demo</a></p>
 
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>
 <pre><code class='language-html'>&lt;h1&gt;Earthquakes: 2013&lt;/h1&gt;
 &lt;ul id='magnitudes'&gt;&lt;/ul&gt;

examples/rotating.html

@@ -55,7 +55,7 @@
     style="width: 400px; height: 400px; cursor: move;"></canvas>
 </div>
 
-<div class='ui raise segment'>
+<div class='ui raised segment'>
 <div class='ui blue ribbon label'>HTML</div>
 <pre><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'
   style='width: 400px; height: 400px; cursor: move;'&gt;&lt;/canvas&gt;</code></pre>