https://github.com/BinaryMuse/planetary.js

:earth_americas: Awesome interactive globes for the web
https://github.com/BinaryMuse/planetary.js

d3 interactive-globes javascript topojson visualization

Last synced: 6 days ago
JSON representation

:earth_americas: Awesome interactive globes for the web

• Host: GitHub
• URL: https://github.com/BinaryMuse/planetary.js
• Owner: BinaryMuse
• License: mit
• Created: 2013-12-19T04:43:59.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2024-03-19T21:43:55.000Z (8 months ago)
• Last Synced: 2024-11-03T08:34:28.359Z (9 days ago)
• Topics: d3, interactive-globes, javascript, topojson, visualization
• Language: JavaScript
• Homepage: http://planetaryjs.com
• Size: 1.83 MB
• Stars: 1,602
• Watchers: 52
• Forks: 181
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Planetary.js

============

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

![Planetary.js Screenshot](screenshot.png)

Planetary.js is based on [D3.js](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/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](http://planetaryjs.com/).

Requirements

------------

* [D3](http://d3js.org/) version 3

* [TopoJSON](https://github.com/mbostock/topojson) version 1

Download

--------

Download Planetary.js from the [Planetary.js web site](http://planetaryjs.com/download/).

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

  

  

  

  

  

```

JavaScript (`yourApp.js`):

```javascript

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](http://planetaryjs.com).

Building

--------

Building the project requires [Node.js](http://nodejs.org/). 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.