diff --git a/site/public/documentation/builtin.md b/site/public/documentation/builtin.md index c107aab..0aa9c00 100644 --- a/site/public/documentation/builtin.md +++ b/site/public/documentation/builtin.md @@ -5,13 +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. diff --git a/site/public/documentation/builtin_borders.md b/site/public/documentation/builtin_borders.md index ae7bf88..f849c95 100644 --- a/site/public/documentation/builtin_borders.md +++ b/site/public/documentation/builtin_borders.md @@ -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"`. -
+
JavaScript
```javascript @@ -26,4 +26,5 @@ planetaryjs.plugins.borders({ See also: +* [Earth Plugin](/documentation/builtin_earth.html) * [TopoJSON Plugin](/documentation/builtin_topojson.html) diff --git a/site/public/documentation/builtin_drag.md b/site/public/documentation/builtin_drag.md index 9d28ae5..0bd4baf 100644 --- a/site/public/documentation/builtin_drag.md +++ b/site/public/documentation/builtin_drag.md @@ -12,13 +12,13 @@ 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. -
+
JavaScript
```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/site/public/documentation/builtin_earth.md b/site/public/documentation/builtin_earth.md index 4074706..a1668ae 100644 --- 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 -
+
JavaScript
```javascript diff --git a/site/public/documentation/builtin_land.md b/site/public/documentation/builtin_land.md index b77ca0e..15b2c18 100644 --- a/site/public/documentation/builtin_land.md +++ b/site/public/documentation/builtin_land.md @@ -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` -
+
JavaScript
```javascript @@ -26,4 +26,5 @@ planetaryjs.plugins.land({ See also: +* [Earth Plugin](/documentation/builtin_earth.html) * [TopoJSON Plugin](/documentation/builtin_topojson.html) diff --git a/site/public/documentation/builtin_oceans.md b/site/public/documentation/builtin_oceans.md index 7be79f4..bf7faf2 100644 --- 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"` -
+
JavaScript
```javascript @@ -21,3 +21,7 @@ planetaryjs.plugins.oceans({ }); ```
+ +See also: + +* [Earth Plugin](/documentation/builtin_earth.html) diff --git a/site/public/documentation/builtin_pings.md b/site/public/documentation/builtin_pings.md index c7654b2..540640a 100644 --- a/site/public/documentation/builtin_pings.md +++ b/site/public/documentation/builtin_pings.md @@ -15,7 +15,7 @@ Valid keys for `config` are: * `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
```javascript @@ -35,9 +35,11 @@ Add a new ping to the globe at the longitudinal and latitudinal coordinates spec 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](http://docs.geotools.org/latest/userguide/library/referencing/order.html). +
+ **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). +
-
+
JavaScript
```javascript diff --git a/site/public/documentation/builtin_topojson.md b/site/public/documentation/builtin_topojson.md index 60f82d3..a404476 100644 --- 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 +* `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. -
+
JavaScript
```javascript @@ -27,7 +27,7 @@ planetaryjs.plugins.topojson({ ```
-
+
JavaScript
```javascript @@ -40,5 +40,10 @@ d3.json('/data/world-110m.json', function(err, data) { ```
+**`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) diff --git a/site/public/documentation/builtin_zoom.md b/site/public/documentation/builtin_zoom.md index 96edbdc..70bb97f 100644 --- a/site/public/documentation/builtin_zoom.md +++ b/site/public/documentation/builtin_zoom.md @@ -14,14 +14,14 @@ Valid keys for `config` are: * `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
```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/site/public/documentation/core.md b/site/public/documentation/core.md index 4ec2957..875999c 100644 --- a/site/public/documentation/core.md +++ b/site/public/documentation/core.md @@ -21,7 +21,7 @@ Once you've [downloaded Planetary.js](/download/), you can include it via a `scr ```
-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/builtin_topojson.html) 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](/download/). See the [TopoJSON Plugin documentation](/documentation/builtin_topojson.html) for more information. Core API -------- @@ -42,7 +42,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. -
+
JavaScript
```javascript @@ -51,13 +51,13 @@ planetaryjs.loadPlugin(somePluginGenerator()); ```
-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. -
+
JavaScript
```javascript diff --git a/site/public/documentation/faq.md b/site/public/documentation/faq.md index c92ceae..23f1dcf 100644 --- a/site/public/documentation/faq.md +++ b/site/public/documentation/faq.md @@ -28,7 +28,7 @@ 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 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. +**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.
diff --git a/site/public/documentation/index.md b/site/public/documentation/index.md index 09d6191..f21aee7 100644 --- 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. 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](/examples/) as well! + +
HTML
```html diff --git a/site/public/documentation/planet.md b/site/public/documentation/planet.md index 15e8a5b..0eec9c6 100644 --- 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.** -
+
JavaScript
```javascript @@ -16,18 +16,19 @@ planet.loadPlugin(somePluginGenerator()); ```
-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. -
+
JavaScript
```javascript planet.projection .scale(width / 2) + .translate([width / 2, height / 2]) .rotate([60, -10, 0]); ```
@@ -36,7 +37,7 @@ planet.projection `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. -
+
JavaScript
```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. -
+
JavaScript
```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. -
+
JavaScript
```javascript @@ -97,7 +98,7 @@ planet.onDraw(function() { 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
```javascript @@ -123,7 +124,7 @@ Calling `draw` will perform the following operations: 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. -
+
HTML
```html diff --git a/site/public/documentation/plugins.md b/site/public/documentation/plugins.md index bae95cc..05832b2 100644 --- 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): -
+
JavaScript
```javascript @@ -32,12 +32,12 @@ planet.loadPlugin(autorotate); ```
-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`. -
+
JavaScript
```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. -
+
JavaScript
```javascript @@ -73,9 +73,9 @@ var somePlugin = function(planet) { ```
-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
```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. -
+
JavaScript
```javascript @@ -111,15 +111,15 @@ var somePlugin = function(planet) { ```
-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. -
+
JavaScript
```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. -
+
JavaScript
```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. diff --git a/site/public/download/index.ejs b/site/public/download/index.ejs index 732f316..c438801 100644 --- a/site/public/download/index.ejs +++ b/site/public/download/index.ejs @@ -3,7 +3,7 @@ <% return "https://github.com/BinaryMuse/planetary.js/releases/download/" + version + "/" + file; %> <% } %> -

Download Planetary.js

+

Download Planetary.js

Download the core Planetary.js library and supporting files here.

@@ -30,11 +30,19 @@ ]
- + Earth TopoJSON data: [ '>minified ]
+
+ + Source code [ + .zip + | + .tar.gz + ] +
<% } else { %> @@ -65,11 +73,19 @@ ]
- + Earth TopoJSON data: [ '>minified ]
+
+ + Source code [ + .zip + | + .tar.gz + ] +
<% } else { %> diff --git a/site/public/examples/basic.ejs b/site/public/examples/basic.ejs index 7cc8c60..0593c3b 100644 --- a/site/public/examples/basic.ejs +++ b/site/public/examples/basic.ejs @@ -12,7 +12,7 @@
-
+
HTML
<canvas id='basicGlobe' width='400' height='400'></canvas>
diff --git a/site/public/examples/index.ejs b/site/public/examples/index.ejs index 6a27237..35c9b25 100644 --- a/site/public/examples/index.ejs +++ b/site/public/examples/index.ejs @@ -2,37 +2,34 @@

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/site/public/examples/quake.ejs b/site/public/examples/quake.ejs index f293ed3..944c3f0 100644 --- a/site/public/examples/quake.ejs +++ b/site/public/examples/quake.ejs @@ -10,7 +10,7 @@

View the demo

-
+
HTML
<h1>Earthquakes: 2013</h1>
 <ul id='magnitudes'></ul>
diff --git a/site/public/examples/rotating.ejs b/site/public/examples/rotating.ejs
index eb702cf..7eba0d5 100644
--- a/site/public/examples/rotating.ejs
+++ b/site/public/examples/rotating.ejs
@@ -15,7 +15,7 @@
     style="width: 400px; height: 400px; cursor: move;">
-
+
HTML
<canvas id='basicGlobe' width='400' height='400'
   style='width: 400px; height: 400px; cursor: move;'></canvas>