JavaScript CSS
Clone or download
BinaryMuse
BinaryMuse v1.1.2
Latest commit 801ccb2 Nov 22, 2015
Permalink
Failed to load latest commit information.
dist v1.1.2 Nov 22, 2015
script Don't forget important things like creating releases Jan 3, 2014
site v1.1.2 Nov 22, 2015
src Set `planetaryjs` global when using AMD May 18, 2014
.gitignore First pass at implementation Dec 21, 2013
CHANGELOG.md v1.1.2 Nov 22, 2015
LICENSE Name update Nov 22, 2015
README.md (site) Add download page Dec 26, 2013
bower.json v1.1.2 Nov 22, 2015
gulpfile.js Name update Nov 22, 2015
package.json v1.1.2 Nov 22, 2015
screenshot.png Flesh out readme Dec 20, 2013

README.md

Planetary.js

Planetary.js is a JavaScript library for building awesome interactive globes, like this one:

Planetary.js Screenshot

Planetary.js is based on D3.js and TopoJSON. It has built-in support for zoom, rotation, mouse interaction, and displaying animated "pings" at any coordinate. Via plugins, Planetary.js can be extended to do whatever you want!

Examples, documentation, and more can be found at planetaryjs.com.

Requirements

Download

Download Planetary.js from the Planetary.js web site.

Quick Start

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.

HTML:

<html>
<head>
  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
  <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
  <script type='text/javascript' src='planetaryjs.min.js'></script>
</head>
<body>
  <canvas id='globe' width='500' height='500'></canvas>
  <script type='text/javascript' src='yourApp.js'></script>
</body>
</html>

JavaScript (yourApp.js):

var planet = planetaryjs.planet();
// You can remove this statement if `world-110m.json`
// is in the same path as the HTML page:
planet.loadPlugin(planetaryjs.plugins.earth({
  topojson: { file: 'http/path/to/world-110m.json' }
}));
// Make the planet fit well in its canvas
planet.projection.scale(250).translate([250, 250]);
var canvas = document.getElementById('globe');
planet.draw(canvas);

Congratulations! You've rendered your first globe.

Documentation

In-depth documentation can be found at planetaryjs.com.

Building

Building the project requires Node.js. Once you've installed the project's dependencies with npm install, you can build the JavaScript to the dist directory with npm run build.

License

Planetary.js is licensed under the MIT license. See the LICENSE file for more information.