🌎 Awesome interactive globes for the web

d3 interactive-globes javascript topojson visualization

Go to file

Brandon Tilley 48f26916b3 Minor tweaks to site		2013-12-21 12:34:26 -08:00
dist	Implement site with actual library	2013-12-21 12:06:57 -08:00
site	Minor tweaks to site	2013-12-21 12:34:26 -08:00
src	Implement site with actual library	2013-12-21 12:06:57 -08:00
.gitignore	First pass at implementation	2013-12-20 23:58:16 -08:00
gulpfile.js	Align comments in gulpfile header	2013-12-21 00:56:16 -08:00
LICENSE	Add license	2013-12-21 11:07:16 -08:00
package.json	First pass at implementation	2013-12-20 23:58:16 -08:00
README.md	Add license	2013-12-21 11:07:16 -08:00
screenshot.png	Flesh out readme	2013-12-19 21:31:19 -08:00

README.md

Planetary.js

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

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

D3 version 3
TopoJSON version 1

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.

License

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