🌎 Awesome interactive globes for the web

d3 interactive-globes javascript topojson visualization

Go to file

Brandon Tilley f0ef4db01f Remove gulp-gzip from build pipeline		2013-12-21 00:32:59 -08:00
site	Fix line width for borders and pings	2013-12-19 21:22:30 -08:00
src	Include world-110m.json in source and built output	2013-12-21 00:12:45 -08:00
.gitignore	First pass at implementation	2013-12-20 23:58:16 -08:00
gulpfile.js	Remove gulp-gzip from build pipeline	2013-12-21 00:32:59 -08:00
package.json	First pass at implementation	2013-12-20 23:58:16 -08:00
README.md	Update readme	2013-12-21 00:12:19 -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.