From a6d34499be587a6a905308453bf70deb4ed51701 Mon Sep 17 00:00:00 2001 From: Brandon Tilley Date: Sat, 21 Dec 2013 00:12:19 -0800 Subject: [PATCH] Update readme --- README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/README.md b/README.md index f5356d0..3762042 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,47 @@ Planetary.js is a JavaScript library for building awesome interactive globes, li 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 + +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.