Once you've downloaded Planetary.js, you can include it via a script tag on your page after the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
<html>
-<head>
- <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
- <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
- <script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
-</head>
-<body>
-...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.
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.
draw method.
Q: I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."
A: Ensure you're requiring the D3 and TopoJSON libraries before Planetary.js.
-Q: Can I use Planetary.js with AMD or CommonJS?
-A: Yes and no. Planetary.js uses a universal module definition, and so is compatible with AMD and CommonJS. However, neither D3 nor TopoJSON support AMD, and TopoJSON's CommonJS package (as installed with npm) uses Node-specific functionality, so you can't, for instance, browserify it directly.
-This example uses RequireJS. Since neither D3 nor TopoJSON support AMD, we will use RequireJS's shim configuration.
-<body>
- <canvas id='globe' width='500' height='500'></canavs>
- <script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
- data-main='/app.js'></script>
-</body>requirejs.config({
- // Tell RequireJS to use `window.d3` and `window.topojson`
- // for those libraries, respectively
- shim: {
- d3: { exports: 'd3' },
- topojson: { exports: 'topojson' }
- },
- paths: {
- 'd3': 'path/to/d3.v3.min',
- 'topojson': 'path/to/topojson.v1.min'
- }
-});
-
-requirejs(['planetaryjs'], function(planetaryjs) {
- // Use Planetary.js here
-});To use Planetary.js with a tool like Browserify, you will need to create a shim for TopoJSON (D3 includes a Browserify-compatible script). Take a look at browserify-shim for more information.
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.
+If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running (once you've installed Planetary.js).
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!
Once you've downloaded Planetary.js, you can include it via a script tag on your page after the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
<html>
+<head>
+ <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
+ <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
+ <script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
+</head>
+<body>
+...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.
Planetary.js also supports installation via AMD and CommonJS loaders.
+This example uses RequireJS. Since neither D3 nor TopoJSON support AMD, we will use RequireJS's shim configuration.
+<body>
+ <canvas id='globe' width='500' height='500'></canavs>
+ <script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
+ data-main='/app.js'></script>
+</body>requirejs.config({
+ // Tell RequireJS to use `window.d3` and `window.topojson`
+ // for those libraries, respectively
+ shim: {
+ d3: { exports: 'd3' },
+ topojson: { exports: 'topojson' }
+ },
+ paths: {
+ 'd3': 'path/to/d3.v3.min',
+ 'topojson': 'path/to/topojson.v1.min'
+ }
+});
+
+requirejs(['planetaryjs'], function(planetaryjs) {
+ // Use Planetary.js here
+});First, install browserify and brfs from npm (as well as planetary.js, if you haven't already). Then, create your application (here referred to as app.js) and bundle it with browserify, running the dependencies through brfs.
var planetaryjs = require('planetary.js');
+
+var planet = planetaryjs.planet();
+var canvas = document.getElementById('canvas');
+planet.draw(canvas);$ npm install browserify brfs
+$ ./node_modules/.bin/browserify --g brfs app.js > bundle.jsbundle.js is now ready to use!