Compare commits

..

No commits in common. "master" and "v1.0.0-rc.2" have entirely different histories.

46 changed files with 132 additions and 4797 deletions

View File

@ -1,41 +1,3 @@
v1.1.2 (2015/11/22)
-------------------
* Update LICENSE and copyright notices
v1.1.1 (2014/05/18)
-------------------
* Set `planetaryjs` on root when using AMD
v1.1.0 (2014/02/03)
-------------------
**Core**
* Add `stop` method
* Add `onStop` hooks
v1.0.3 (2014/01/23)
-------------------
* Don't disable adaptive resampling on the projection
v1.0.2 (2014/01/16)
-------------------
* Update version dependencies for D3 and TopoJSON
v1.0.1 (2013/01/02)
-------------------
* Add D3 and TopoJSON as dependencies in `package.json`
v1.0.0 (2013/12/31)
-------------------
First stable release
v1.0.0-rc.2 (2013/12/26) v1.0.0-rc.2 (2013/12/26)
------------------------ ------------------------

View File

@ -1,4 +1,4 @@
Copyright (c) 2013 Michelle Tilley Copyright (c) 2013 Brandon Tilley
Permission is hereby granted, free of charge, to any person Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation obtaining a copy of this software and associated documentation

View File

@ -1,12 +1,10 @@
{ {
"name": "planetary.js", "name": "planetary.js",
"version": "1.1.2", "version": "1.0.0-rc.2",
"main": "dist/planetaryjs.min.js", "main": "dist/planetaryjs.min.js",
"description": "Awesome interactive globes for the web", "description": "Awesome interactive globes for the web",
"homepage": "http://planetaryjs.com", "homepage": "http://planetaryjs.com",
"authors": [ "authors": [ "Brandon Tilley <brandon@brandontilley.com>" ],
"Michelle Tilley <michelle@michelletilley.net>"
],
"license": "MIT", "license": "MIT",
"ignore": [ "ignore": [
".git", ".git",
@ -23,10 +21,8 @@
"topojson": "1.x" "topojson": "1.x"
}, },
"keywords": [ "keywords": [
"globe", "globe", "globes",
"globes", "planet", "planets",
"planet",
"planets",
"d3", "d3",
"topojson" "topojson"
] ]

View File

@ -1,14 +1,12 @@
/*! Planetary.js v1.1.3 /*! Planetary.js v1.0.0-rc.2
* Copyright (c) 2013 Michelle Tilley * Copyright (c) 2013 Brandon Tilley
* *
* Released under the MIT license * Released under the MIT license
* Date: 2018-10-30T18:49:58.804Z * Date: 2013-12-26T07:28:55.189Z
*/ */
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define(['d3', 'topojson'], function(d3, topojson) { define(['d3', 'topojson'], factory);
return (root.planetaryjs = factory(d3, topojson, root));
});
} else if (typeof exports === 'object') { } else if (typeof exports === 'object') {
module.exports = factory(require('d3'), require('topojson')); module.exports = factory(require('d3'), require('topojson'));
} else { } else {
@ -23,10 +21,6 @@
var doDrawLoop = function(planet, canvas, hooks) { var doDrawLoop = function(planet, canvas, hooks) {
d3.timer(function() { d3.timer(function() {
if (planet.stopped) {
return true;
}
planet.context.clearRect(0, 0, canvas.width, canvas.height); planet.context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < hooks.onDraw.length; i++) { for (var i = 0; i < hooks.onDraw.length; i++) {
hooks.onDraw[i](); hooks.onDraw[i]();
@ -82,14 +76,11 @@
}; };
var startDraw = function(planet, canvas, localPlugins, hooks) { var startDraw = function(planet, canvas, localPlugins, hooks) {
initPlugins(planet, localPlugins);
planet.canvas = canvas; planet.canvas = canvas;
planet.context = canvas.getContext('2d'); planet.context = canvas.getContext('2d');
if (planet.stopped !== true) {
initPlugins(planet, localPlugins);
}
planet.stopped = false;
runOnInitHooks(planet, canvas, hooks); runOnInitHooks(planet, canvas, hooks);
}; };
@ -109,8 +100,7 @@
var localPlugins = []; var localPlugins = [];
var hooks = { var hooks = {
onInit: [], onInit: [],
onDraw: [], onDraw: []
onStop: []
}; };
var planet = { var planet = {
@ -128,21 +118,10 @@
hooks.onDraw.push(fn); hooks.onDraw.push(fn);
}, },
onStop: function(fn) {
hooks.onStop.push(fn);
},
loadPlugin: function(plugin) { loadPlugin: function(plugin) {
localPlugins.push(plugin); localPlugins.push(plugin);
}, },
stop: function() {
planet.stopped = true;
for (var i = 0; i < hooks.onStop.length; i++) {
hooks.onStop[i](planet);
}
},
withSavedContext: function(fn) { withSavedContext: function(fn) {
if (!this.context) { if (!this.context) {
throw new Error("No canvas to fetch context for"); throw new Error("No canvas to fetch context for");
@ -155,7 +134,8 @@
}; };
planet.projection = d3.geo.orthographic() planet.projection = d3.geo.orthographic()
.clipAngle(90); .clipAngle(90)
.precision(0);
planet.path = d3.geo.path().projection(planet.projection); planet.path = d3.geo.path().projection(planet.projection);
return planet; return planet;

View File

@ -1,2 +1,2 @@
/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */ /*! Planetary.js 1.0.0-rc.2 | (c) 2013 Brandon Tilley | Released under MIT License */
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},u=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings())),o=0;o<t.length;o++)t[o](n)},p=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},u=function(){e>=o.onInit.length?r(n,t,o):i(u)};i(u)}else r(n,t,o)},c=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&u(n,o),n.stopped=!1,p(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){c(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return s}); !function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},u=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings())),o=0;o<t.length;o++)t[o](n)},c=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},u=function(){e>=o.onInit.length?r(n,t,o):i(u)};i(u)}else r(n,t,o)},a=function(n,t,o,e){u(n,o),n.canvas=t,n.context=t.getContext("2d"),c(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={plugins:{},draw:function(n){a(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return s});

38
dist/planetaryjs.js vendored
View File

@ -1,14 +1,12 @@
/*! Planetary.js v1.1.3 /*! Planetary.js v1.0.0-rc.2
* Copyright (c) 2013 Michelle Tilley * Copyright (c) 2013 Brandon Tilley
* *
* Released under the MIT license * Released under the MIT license
* Date: 2018-10-30T18:49:58.667Z * Date: 2013-12-26T07:28:54.997Z
*/ */
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define(['d3', 'topojson'], function(d3, topojson) { define(['d3', 'topojson'], factory);
return (root.planetaryjs = factory(d3, topojson, root));
});
} else if (typeof exports === 'object') { } else if (typeof exports === 'object') {
module.exports = factory(require('d3'), require('topojson')); module.exports = factory(require('d3'), require('topojson'));
} else { } else {
@ -23,10 +21,6 @@
var doDrawLoop = function(planet, canvas, hooks) { var doDrawLoop = function(planet, canvas, hooks) {
d3.timer(function() { d3.timer(function() {
if (planet.stopped) {
return true;
}
planet.context.clearRect(0, 0, canvas.width, canvas.height); planet.context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < hooks.onDraw.length; i++) { for (var i = 0; i < hooks.onDraw.length; i++) {
hooks.onDraw[i](); hooks.onDraw[i]();
@ -82,14 +76,11 @@
}; };
var startDraw = function(planet, canvas, localPlugins, hooks) { var startDraw = function(planet, canvas, localPlugins, hooks) {
initPlugins(planet, localPlugins);
planet.canvas = canvas; planet.canvas = canvas;
planet.context = canvas.getContext('2d'); planet.context = canvas.getContext('2d');
if (planet.stopped !== true) {
initPlugins(planet, localPlugins);
}
planet.stopped = false;
runOnInitHooks(planet, canvas, hooks); runOnInitHooks(planet, canvas, hooks);
}; };
@ -109,8 +100,7 @@
var localPlugins = []; var localPlugins = [];
var hooks = { var hooks = {
onInit: [], onInit: [],
onDraw: [], onDraw: []
onStop: []
}; };
var planet = { var planet = {
@ -128,21 +118,10 @@
hooks.onDraw.push(fn); hooks.onDraw.push(fn);
}, },
onStop: function(fn) {
hooks.onStop.push(fn);
},
loadPlugin: function(plugin) { loadPlugin: function(plugin) {
localPlugins.push(plugin); localPlugins.push(plugin);
}, },
stop: function() {
planet.stopped = true;
for (var i = 0; i < hooks.onStop.length; i++) {
hooks.onStop[i](planet);
}
},
withSavedContext: function(fn) { withSavedContext: function(fn) {
if (!this.context) { if (!this.context) {
throw new Error("No canvas to fetch context for"); throw new Error("No canvas to fetch context for");
@ -155,7 +134,8 @@
}; };
planet.projection = d3.geo.orthographic() planet.projection = d3.geo.orthographic()
.clipAngle(90); .clipAngle(90)
.precision(0);
planet.path = d3.geo.path().projection(planet.projection); planet.path = d3.geo.path().projection(planet.projection);
return planet; return planet;

View File

@ -1,2 +1,2 @@
/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */ /*! Planetary.js 1.0.0-rc.2 | (c) 2013 Brandon Tilley | Released under MIT License */
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},u=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&l(n,o),n.stopped=!1,a(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){u(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(e){if(t.world)o.plugins.topojson.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.plugins.topojson.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){var n=o.plugins.topojson.world;e=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null,i={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";e=t.mesh(r,l,i[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(t){var o=[];t=t||{};var e=function(n,e,i){i=i||{},i.color=i.color||t.color||"white",i.angle=i.angle||t.angle||5,i.ttl=i.ttl||t.ttl||2e3;var r={time:new Date,options:i};t.latitudeFirst?(r.lat=n,r.lng=e):(r.lng=n,r.lat=e),o.push(r)},i=function(n,t,e){for(var i=[],l=0;l<o.length;l++){var a=o[l],u=e-a.time;u<a.options.ttl&&(i.push(a),r(n,t,e,u,a))}o=i},r=function(t,o,e,i,r){var l=1-i/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var u=n.geo.circle().origin([r.lng,r.lat]).angle(i/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:e},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){i(n,o,t)})})}},c.plugins.zoom=function(t){t=t||{};var o=function(){},e=t.onZoomStart||o,i=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,u=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(u);null!==a&&void 0!==a?o.scale(a):o.scale(t.projection.scale()),o.on("zoomstart",e.bind(t)).on("zoomend",i.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){t=t||{};var o=function(){},e=t.onDragStart||o,i=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",e.bind(t)).on("dragend",i.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,e=n.event.dy,i=t.projection.rotate(),a=t.projection.scale(),u=n.scale.linear().domain([-1*a,a]).range([-90,90]),c=u(o),s=u(e);i[0]+=c,i[1]-=s,i[1]>90&&(i[1]=90),i[1]<-90&&(i[1]=-90),i[0]>=180&&(i[0]-=360),t.projection.rotate(i),l.call(t)});n.select(t.canvas).call(o)})}},c}); !function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=e.length-1;o>=0;o--)t.unshift(e[o]);for(0===t.length&&(u.plugins.earth&&n.loadPlugin(u.plugins.earth()),u.plugins.pings&&n.loadPlugin(u.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},c=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,i)},u={plugins:{},noConflict:function(){return o.planetaryjs=i,u},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){c(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return u.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},u.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},u.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},u.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},u.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){u.plugins.topojson(t)(n),u.plugins.oceans(o)(n),u.plugins.land(i)(n),u.plugins.borders(e)(n)}},u.plugins.pings=function(t){var o=[];t=t||{};var i=function(n,i,e){e=e||{},e.color=e.color||t.color||"white",e.angle=e.angle||t.angle||5,e.ttl=e.ttl||t.ttl||2e3;var r={time:new Date,options:e};t.latitudeFirst?(r.lat=n,r.lng=i):(r.lng=n,r.lat=i),o.push(r)},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var a=o[l],c=i-a.time;c<a.options.ttl&&(e.push(a),r(n,t,i,c,a))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var c=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(c),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},u.plugins.zoom=function(t){t=t||{};var o=function(){},i=t.onZoomStart||o,e=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,c=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(c);null!==a&&void 0!==a?o.scale(a):o.scale(t.projection.scale()),o.on("zoomstart",i.bind(t)).on("zoomend",e.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},u.plugins.drag=function(t){t=t||{};var o=function(){},i=t.onDragStart||o,e=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",i.bind(t)).on("dragend",e.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,i=n.event.dy,e=t.projection.rotate(),a=t.projection.scale(),c=n.scale.linear().domain([-1*a,a]).range([-90,90]),u=c(o),s=c(i);e[0]+=u,e[1]-=s,e[1]>90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e),l.call(t)});n.select(t.canvas).call(o)})}},u});

File diff suppressed because one or more lines are too long

View File

@ -4,18 +4,16 @@ var concat = require('gulp-concat');
var rename = require('gulp-rename'); var rename = require('gulp-rename');
var header = require('gulp-header'); var header = require('gulp-header');
var jshint = require('gulp-jshint'); var jshint = require('gulp-jshint');
var replace = require('gulp-replace');
var metadata = require('./package.json'); var metadata = require('./package.json');
var shortHeader = "/*! Planetary.js <%= version %> | (c) 2013 Michelle Tilley | Released under MIT License */\n" var shortHeader = "/*! Planetary.js {{version}} | (c) 2013 Brandon Tilley | Released under MIT License */"
var fullHeader = [ var fullHeader = [
"/*! Planetary.js v<%= version %>", "/*! Planetary.js v{{version}}",
" * Copyright (c) 2013 Michelle Tilley", " * Copyright (c) 2013 Brandon Tilley",
" *", " *",
" * Released under the MIT license", " * Released under the MIT license",
" * Date: <%= new Date().toISOString() %>", " * Date: {{now}}",
" */", " */"
""
].join("\n"); ].join("\n");
var fullSource = gulp.src(['./src/_umd_header.js', './src/body.js', './src/plugins.js', './src/_umd_footer.js']); var fullSource = gulp.src(['./src/_umd_header.js', './src/body.js', './src/plugins.js', './src/_umd_footer.js']);
@ -25,7 +23,7 @@ function build(source, name, headerText, minify) {
var js = source.pipe(concat(name)); var js = source.pipe(concat(name));
if (minify) { js = js.pipe(uglify()); } if (minify) { js = js.pipe(uglify()); }
js = js.pipe(header(headerText, { version: metadata.version })); js = js.pipe(header(headerText, { version: metadata.version }));
js.pipe(replace("\r\n", "\n")).pipe(gulp.dest('./dist')); js.pipe(gulp.dest('./dist'));
} }
gulp.task('jshint', function() { gulp.task('jshint', function() {
@ -43,4 +41,7 @@ gulp.task('build', function() {
gulp.src('./src/world-110m.json').pipe(gulp.dest('./dist')); gulp.src('./src/world-110m.json').pipe(gulp.dest('./dist'));
}); });
gulp.task('default', ['jshint', 'build']); gulp.task('default', function() {
gulp.run('jshint');
gulp.run('build');
});

4222
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,7 @@
{ {
"name": "planetary.js", "name": "planetary.js",
"version": "1.1.3", "version": "1.0.0-rc.2",
"description": "Awesome interactive globes for the web", "description": "Awesome interactive globes for the web",
"main": "dist/planetaryjs",
"scripts": { "scripts": {
"build": "rm -r dist/ ; gulp && cp dist/planetaryjs.min.js site/public/js/lib", "build": "rm -r dist/ ; gulp && cp dist/planetaryjs.min.js site/public/js/lib",
"jshint": "gulp jshint", "jshint": "gulp jshint",
@ -12,24 +11,19 @@
"type": "git", "type": "git",
"url": "git://github.com/BinaryMuse/planetary.js.git" "url": "git://github.com/BinaryMuse/planetary.js.git"
}, },
"author": "Michelle Tilley <michelle@michelletilley.net>", "author": "Brandon Tilley <brandon@brandontilley.com>",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/BinaryMuse/planetary.js/issues" "url": "https://github.com/BinaryMuse/planetary.js/issues"
}, },
"homepage": "http://planetaryjs.com", "homepage": "http://planetaryjs.com",
"devDependencies": { "devDependencies": {
"gulp": "~3.6.2", "gulp": "~3.2.0",
"gulp-concat": "BinaryMuse/gulp-concat", "gulp-concat": "BinaryMuse/gulp-concat",
"gulp-header": "~1.0.2", "gulp-header": "~0.4.0",
"gulp-uglify": "~0.3.0", "gulp-uglify": "~0.1.0",
"gulp-rename": "~1.2.0", "gulp-rename": "~0.2.1",
"bower": "~1.2.8", "bower": "~1.2.8",
"gulp-jshint": "~1.6.1", "gulp-jshint": "~1.3.1"
"gulp-replace": "~0.3.0"
},
"dependencies": {
"topojson": "^1.4.6",
"d3": "^3.3.13"
} }
} }

View File

@ -1,39 +0,0 @@
#!/usr/bin/env node
var fs = require('fs');
var spawn = require('child_process').spawn;
var type = process.argv[2];
var version = process.argv[3];
if ("stable" !== type && "unstable" !== type) {
console.log("You must specify 'stable' or 'unstable' version type.");
process.exit(1);
}
if (!version) {
console.log("You must specify a version.");
process.exit(1);
}
if (version[0] === 'v') {
version = version.replace(/^v/, '');
}
var package = require("../package.json");
var bower = require("../bower.json");
var site = require("../site/public/download/_data.json");
package.version = version;
bower.version = version;
site[type].latest = site[type].latest || {};
site[type].latest.version = "v" + version;
fs.writeFileSync('package.json', JSON.stringify(package, null, ' ') + "\n");
fs.writeFileSync('bower.json', JSON.stringify(bower, null, ' ') + "\n");
fs.writeFileSync('site/public/download/_data.json', JSON.stringify(site, null, ' ') + "\n");
spawn('npm', ['run', 'build']);
console.log("Tasks:\n\n - Update CHANGELOG.md\n - Regenerate site\n - Create release on GH");

View File

@ -9,7 +9,7 @@
"start": "harp server", "start": "harp server",
"compile": "harp compile" "compile": "harp compile"
}, },
"author": "Michelle Tilley <michelle@michelletilley.net>", "author": "Brandon Tilley <brandon@brandontilley.com>",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"dependencies": { "dependencies": {

View File

@ -3,8 +3,6 @@
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css"> <link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css"> <link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
<meta property="og:site_name" content="Planetary.js">

View File

@ -13,8 +13,7 @@
<a class='item minor <%- current.path[0] == 'documentation' ? 'active' : '' %>' href='/documentation/'> <a class='item minor <%- current.path[0] == 'documentation' ? 'active' : '' %>' href='/documentation/'>
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span> <i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
</a> </a>
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js' <a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span> <i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
</a> </a>
</div> </div>

View File

@ -1,10 +0,0 @@
<html>
<head>
<title>Planetary.js AMD Test</title>
</head>
<body>
<canvas id='globe' width='500' height='500'></canavs>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"
data-main="/amd/test.js"></script>
</body>
</html>

View File

@ -1,24 +0,0 @@
requirejs.config({
baseUrl: '/js/lib',
shim: {
d3: { exports: 'd3' },
topojson: { exports: 'topojson' }
},
paths: {
"d3": 'd3.v3.min',
"topojson": 'topojson.v1.min'
}
});
requirejs(['planetaryjs.min'], function(planetaryjs) {
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: '/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);
});

View File

@ -152,13 +152,6 @@ canvas#homepage-globe-canvas {
img { img {
width: 200px; width: 200px;
height: 200px; height: 200px;
float: left;
margin-right: 20px;
@media screen and (max-width: 768px) {
display: block;
float: none;
}
} }
} }

View File

@ -29,13 +29,13 @@ pre[class*="language-"] {
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; /* background: #b3d4fc; */
} }
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection { code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; /* background: #b3d4fc; */
} }
@media print { @media print {

View File

@ -15,10 +15,6 @@
Introduction Introduction
<i class='icon home'></i> <i class='icon home'></i>
</a> </a>
<a class='purple item <%- current.source == 'installation' ? 'active' : '' %>' href='/documentation/installation.html'>
Installation
<i class='icon download'></i>
</a>
<a class='blue item <%- current.source == 'core' ? 'active' : '' %>' href='/documentation/core.html'> <a class='blue item <%- current.source == 'core' ? 'active' : '' %>' href='/documentation/core.html'>
Core API Core API
<i class='icon setting'></i> <i class='icon setting'></i>

View File

@ -1,7 +1,7 @@
Borders Plugin Borders Plugin
============== ==============
The `borders` plugin renders the borders around (and between) countries. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.countries` in the TopoJSON object to calculate the borders. The `borders` plugin renders the borders around (and between) countries. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html).
API API
--- ---

View File

@ -1,7 +1,7 @@
Land Plugin Land Plugin
=========== ===========
The `land` plugin renders Earth's landmasses. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.land` in the TopoJSON object. The `land` plugin renders Earth's landmasses. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html).
API API
--- ---

View File

@ -1,6 +1,28 @@
Core API Core API
======== ========
Installation
------------
Once you've [downloaded Planetary.js](/download/), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
<div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div>
```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='path/to/planetaryjs.min.js'></script>
</head>
<body>
...
```
</div>
If you use the default `topojson` plugin (most people will), you'll also need to make sure `world-110m.json` (or some other TopoJSON data file) is available on your server. This file is also available from [the download page](/download/). See the [TopoJSON Plugin documentation](/documentation/builtin_topojson.html) for more information.
Core API Core API
-------- --------

View File

@ -44,4 +44,4 @@ planet's `draw` method.
**Q:** I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined." **Q:** I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."
**A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) libraries before Planetary.js. **A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) libraries before Planetary.js

View File

@ -15,7 +15,7 @@ The documentation is split up into several sections:
Quick Start Quick Start
----------- -----------
If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running (once you've [installed Planetary.js](/documentation/installation.html)). If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running.
Note that 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 (Ajax requests don't work when viewing a page directly from the filesystem). Note that 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 (Ajax requests don't work when viewing a page directly from the filesystem).

View File

@ -1,97 +0,0 @@
Installation
============
Once you've [downloaded Planetary.js](/download/), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
<div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div>
```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='path/to/planetaryjs.min.js'></script>
</head>
<body>
...
```
</div>
If you use the default `topojson` plugin (most people will), you'll also need to make sure `world-110m.json` (or some other TopoJSON data file) is available on your server. This file is also available from [the download page](/download/). See the [TopoJSON Plugin documentation](/documentation/builtin_topojson.html) for more information.
Planetary.js also supports installation via AMD and CommonJS loaders.
AMD
---
This example uses [RequireJS](http://requirejs.org/). Since neither D3 nor TopoJSON support AMD, we will use RequireJS's [shim configuration](http://requirejs.org/docs/api.html#config-shim).
<div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div>
```html
<body>
<canvas id='globe' width='500' height='500'></canavs>
<script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
data-main='/app.js'></script>
</body>
```
<div class='ui red ribbon label'>JavaScript</div>
```javascript
requirejs.config({
// Tell RequireJS to use `window.d3` and `window.topojson`
// for those libraries, respectively
shim: {
d3: { exports: 'd3' },
topojson: { exports: 'topojson' }
},
paths: {
'd3': 'path/to/d3.v3.min',
'topojson': 'path/to/topojson.v1.min'
}
});
requirejs(['planetaryjs'], function(planetaryjs) {
// Use Planetary.js here
});
```
</div>
CommonJS
--------
First, install `browserify` from npm (as well as `planetary.js` v1.0.2+, if you haven't already). Then, create your application (here referred to as `app.js`) and bundle it with browserify.
<div class='ui raised segment'>
<div class='ui red ribbon label'>JavaScript</div>
```javascript
var planetaryjs = require('planetary.js');
var planet = planetaryjs.planet();
var canvas = document.getElementById('canvas');
planet.draw(canvas);
```
<div class='ui purple ribbon label'>Shell</div>
```shell
$ npm install browserify
$ ./node_modules/.bin/browserify app.js > bundle.js
```
</div>
`bundle.js` is now ready to use! You may need to set the `charset` option on your script tag:
<div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div>
```html
<script type='text/javascript' src='bundle.js' charset='utf-8'></script>
```
</div>

View File

@ -94,24 +94,6 @@ planet.onDraw(function() {
``` ```
</div> </div>
**`planet.onStop( function(){} )`**
Registers a function to be called when the planet is stopped with the `stop` method. This can be used to clean up timers and remove references to internal planet properties and plugins, if necessary, so that it can be property garbage collected.
<div class='ui raised segment'>
<div class='ui red ribbon label'>JavaScript</div>
```javascript
var interval = setInterval(function() {
addRandomPing(planet); // uses `planet.plugins.pings`
}, 150);
planet.onStop(function() {
clearInterval(interval);
});
```
</div>
**`planet.withSavedContext( function(context){} )`** **`planet.withSavedContext( function(context){} )`**
Calls the function with the current canvas context as a parameter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was. Calls the function with the current canvas context as a parameter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
@ -137,7 +119,7 @@ Begins drawing the globe onto the given canvas. `canvas` should be a raw DOM ele
Calling `draw` will perform the following operations: Calling `draw` will perform the following operations:
1. Initialize each loaded plugin by calling the plugin function (note: this only happens the first time you call `draw`). 1. Initialize each loaded plugin by calling the plugin function.
2. Set `planet.canvas` and `planet.context` to the canvas and the canvas' context, respectively. 2. Set `planet.canvas` and `planet.context` to the canvas and the canvas' context, respectively.
3. Run each registered `onInit` hook in the order it was registered (note that `onInit` calls made by plugins will not be made until step 1, after `draw` has been called). 3. Run each registered `onInit` hook in the order it was registered (note that `onInit` calls made by plugins will not be made until step 1, after `draw` has been called).
4. Start the animation loop, each tick clearing the canvas and calling any registered `onDraw` hooks in order. 4. Start the animation loop, each tick clearing the canvas and calling any registered `onDraw` hooks in order.
@ -156,21 +138,3 @@ var canvas = document.getElementById('myCanvas');
planet.draw(canvas); planet.draw(canvas);
``` ```
</div> </div>
Once you've called `draw()` on a planet, you should not call it again unless you first call `stop()`.
**`planet.stop()`**
Stop drawing the planet to the canvas. This disables the internal draw loop. You can register functions to call when the planet is stopped using the `onStop` method; if you don't plan on reusing the planet, be sure to clean up timers and references to internal properties, if necessary, so that it can be garbage collected.
You can draw the planet to a new (or the same) canvas using the `draw` method as normal. All your plugins' `onInit` functions will fire, although the plugin function itself will not be called again.
Keep in mind that, since the internal draw loop is stopped, your plugins' `onDraw` functions are not being called. If you have timers or other mechanisms that continually push data into a data structure that an `onDraw` method cleans up, you should disable or pause it.
<div class='ui raised segment'>
<div class='ui red ribbon label'>JavaScript</div>
```javascript
planet.stop();
```
</div>

View File

@ -1,12 +1,11 @@
{ {
"stable": { "stable": {
"latest": { "latest": null
"version": "v1.1.2"
}
}, },
"unstable": { "unstable": {
"latest": { "latest": {
"version": "v1.0.0-rc.2" "version": "v1.0.0-rc.2",
"name": null
} }
} }
} }

View File

@ -10,10 +10,7 @@
<p>Up-to-the-minute releases, archived versions, and full release notes can be found <a href='https://github.com/BinaryMuse/planetary.js/releases'>on the GitHub releases page</a>.</p> <p>Up-to-the-minute releases, archived versions, and full release notes can be found <a href='https://github.com/BinaryMuse/planetary.js/releases'>on the GitHub releases page</a>.</p>
<% if (data.stable.latest) { %> <% if (data.stable.latest) { %>
<h2>Latest Stable Build: <%= data.stable.latest.version %></h2> <h2>Latest Stable Build: <%= data.stable.latest.version %> (<%= data.stable.latest.name %>)</h2>
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.stable.latest.version %>">Release notes</a>
|
<a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.stable.latest.version %>">GitHub tag</a></p>
<div class='ui list download-list'> <div class='ui list download-list'>
<div class='item'> <div class='item'>
@ -34,8 +31,8 @@
</div> </div>
<div class='item'> <div class='item'>
<i class='icon globe'></i> <i class='icon globe'></i>
Earth TopoJSON data ("land" and "countries" objects): [ Earth TopoJSON data: [
<a href='<%= dl(data.stable.latest.version, 'world-110m.json') %>'>download</a> <a href='<%= dl(data.stable.latest.version, 'world-110m.json') %>'>minified</a>
] ]
</div> </div>
<div class='item'> <div class='item'>
@ -57,9 +54,6 @@
<% if (data.unstable.latest) { %> <% if (data.unstable.latest) { %>
<h2>Latest Unstable Build: <%= data.unstable.latest.version %></h2> <h2>Latest Unstable Build: <%= data.unstable.latest.version %></h2>
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.unstable.latest.version %>">Release notes</a>
|
<a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.unstable.latest.version %>">GitHub tag</a></p>
<div class='ui list download-list'> <div class='ui list download-list'>
<div class='item'> <div class='item'>
@ -80,8 +74,8 @@
</div> </div>
<div class='item'> <div class='item'>
<i class='icon globe'></i> <i class='icon globe'></i>
Earth TopoJSON data ("land" and "countries" objects): [ Earth TopoJSON data: [
<a href='<%= dl(data.unstable.latest.version, 'world-110m.json') %>'>download</a> <a href='<%= dl(data.unstable.latest.version, 'world-110m.json') %>'>minified</a>
] ]
</div> </div>
<div class='item'> <div class='item'>

View File

@ -14,10 +14,10 @@
<div class='ui raised segment'> <div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div> <div class='ui blue ribbon label'>HTML</div>
<pre class='line-numbers'><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'&gt;&lt;/canvas&gt;</code></pre> <pre><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'&gt;&lt;/canvas&gt;</code></pre>
<div class='ui red ribbon label'>JavaScript</div> <div class='ui red ribbon label'>JavaScript</div>
<pre class='line-numbers'><code class='language-javascript'>(function() { <pre><code class='language-javascript'>(function() {
var canvas = document.getElementById('basicGlobe'); var canvas = document.getElementById('basicGlobe');
var planet = planetaryjs.planet(); var planet = planetaryjs.planet();
// Loading this plugin technically happens automatically, // Loading this plugin technically happens automatically,

View File

@ -4,7 +4,7 @@
<div class='ui top attached segment example-segment'> <div class='ui top attached segment example-segment'>
<div> <div>
<a href='/examples/basic.html'><img src='/images/ex-basic.png'></a> <a href='/examples/basic.html'><img src='/images/ex-basic.png' style='float: left; margin-right: 20px;'></a>
<a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a> <a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a>
<p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p> <p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
<span class='ui red horizontal label'>plugins: earth</span> <span class='ui red horizontal label'>plugins: earth</span>
@ -14,7 +14,7 @@
<div class='ui attached segment example-segment'> <div class='ui attached segment example-segment'>
<div> <div>
<a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a> <a href='/examples/rotating.html'><img src='/images/ex-rotating.png' style='float: left; margin-right: 20px;'></a>
<a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a> <a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a>
<p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p> <p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span> <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
@ -25,7 +25,7 @@
<div class='ui bottom attached segment example-segment'> <div class='ui bottom attached segment example-segment'>
<div> <div>
<a href='/examples/quake.html'><img src='/images/ex-quake.png'></a> <a href='/examples/quake.html'><img src='/images/ex-quake.png' style='float: left; margin-right: 20px;'></a>
<a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a> <a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a>
<p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p> <p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span> <span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>

View File

@ -8,11 +8,11 @@
<p>This is a more advanced example of what you can build with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of <a href='http://momentjs.com/'>Moment.js</a>, D3 scales, DOM manipulation, and loading external data.</p> <p>This is a more advanced example of what you can build with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of <a href='http://momentjs.com/'>Moment.js</a>, D3 scales, DOM manipulation, and loading external data.</p>
<h2><a href="/examples/quake/index.html"><i class='black icon play circle' style='text-decoration: none;'></i>View the demo</a></h2> <p><a href="/examples/quake/index.html">View the demo</a></p>
<div class='ui raised segment'> <div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div> <div class='ui blue ribbon label'>HTML</div>
<pre class='line-numbers'><code class='language-html'>&lt;h1&gt;Earthquakes: 2013&lt;/h1&gt; <pre><code class='language-html'>&lt;h1&gt;Earthquakes: 2013&lt;/h1&gt;
&lt;ul id='magnitudes'&gt;&lt;/ul&gt; &lt;ul id='magnitudes'&gt;&lt;/ul&gt;
&lt;canvas id='quakeCanvas'&gt;&lt;/canvas&gt; &lt;canvas id='quakeCanvas'&gt;&lt;/canvas&gt;
@ -28,7 +28,7 @@
<div class='ui red ribbon label'>JavaScript</div> <div class='ui red ribbon label'>JavaScript</div>
<pre class='line-numbers'><code class='language-javascript'>(function() { <pre><code class='language-javascript'>(function() {
var canvas = document.getElementById('quakeCanvas'); var canvas = document.getElementById('quakeCanvas');
// Create our Planetary.js planet and set some initial values; // Create our Planetary.js planet and set some initial values;
@ -42,7 +42,7 @@
land: { fill: '#06304e' }, land: { fill: '#06304e' },
borders: { stroke: '#001320' } borders: { stroke: '#001320' }
})); }));
planet.loadPlugin(planetaryjs.plugins.pings()); planet.loadPlugin(planetaryjs.plugins.pings({}));
planet.loadPlugin(planetaryjs.plugins.zoom({ planet.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [50, 5000] scaleExtent: [50, 5000]
})); }));
@ -63,8 +63,8 @@
// minimum magnitude in our data set is 2.5. // minimum magnitude in our data set is 2.5.
var colors = d3.scale.pow() var colors = d3.scale.pow()
.exponent(3) .exponent(3)
.domain([2, 4, 6, 8, 10]) .domain([2, 6, 10])
.range(['white', 'yellow', 'orange', 'red', 'purple']); .range(['yellow', 'orange', 'red']);
// Also create a scale for mapping magnitudes to ping angle sizes // Also create a scale for mapping magnitudes to ping angle sizes
var angles = d3.scale.pow() var angles = d3.scale.pow()
.exponent(3) .exponent(3)
@ -191,20 +191,16 @@
// Plugin to resize the canvas to fill the window and to // Plugin to resize the canvas to fill the window and to
// automatically center the planet when the window size changes // automatically center the planet when the window size changes
function autocenter(options) { function autocenter(options) {
options = options || {};
var needsCentering = false; var needsCentering = false;
var globe = null;
var resize = function() { var resize = function() {
var width = window.innerWidth + (options.extraWidth || 0); var width = window.innerWidth + (options.extraWidth || 0);
var height = window.innerHeight + (options.extraHeight || 0); var height = window.innerHeight + (options.extraHeight || 0);
globe.canvas.width = width; planet.canvas.width = width;
globe.canvas.height = height; planet.canvas.height = height;
globe.projection.translate([width / 2, height / 2]); planet.projection.translate([width / 2, height / 2]);
}; };
return function(planet) { return function(planet) {
globe = planet;
planet.onInit(function() { planet.onInit(function() {
needsCentering = true; needsCentering = true;
d3.select(window).on('resize', function() { d3.select(window).on('resize', function() {
@ -221,7 +217,6 @@
// Plugin to automatically scale the planet's projection based // Plugin to automatically scale the planet's projection based
// on the window size when the planet is initialized // on the window size when the planet is initialized
function autoscale(options) { function autoscale(options) {
options = options || {};
return function(planet) { return function(planet) {
planet.onInit(function() { planet.onInit(function() {
var width = window.innerWidth + (options.extraWidth || 0); var width = window.innerWidth + (options.extraWidth || 0);

View File

@ -1,28 +0,0 @@
#!/usr/bin/env node
var fs = require('fs');
var filename = process.argv[2];
if (!filename) {
console.log("Please specify a file to process");
process.exit(1);
}
if (!fs.existsSync(filename)) {
console.log("#{filename} not found.");
process.exit(2);
}
var data = fs.readFileSync(filename, 'utf8');
var json = JSON.parse(data);
var quakeData = json.features.map(function(feature) {
return {
time: feature.properties.time,
lat: feature.geometry.coordinates[1],
lng: feature.geometry.coordinates[0],
mag: feature.properties.mag
};
}).sort(function(a, b) { return a.time - b.time});
console.log(JSON.stringify(quakeData));

View File

@ -12,7 +12,7 @@
land: { fill: '#06304e' }, land: { fill: '#06304e' },
borders: { stroke: '#001320' } borders: { stroke: '#001320' }
})); }));
planet.loadPlugin(planetaryjs.plugins.pings()); planet.loadPlugin(planetaryjs.plugins.pings({}));
planet.loadPlugin(planetaryjs.plugins.zoom({ planet.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [50, 5000] scaleExtent: [50, 5000]
})); }));
@ -33,8 +33,8 @@
// minimum magnitude in our data set is 2.5. // minimum magnitude in our data set is 2.5.
var colors = d3.scale.pow() var colors = d3.scale.pow()
.exponent(3) .exponent(3)
.domain([2, 4, 6, 8, 10]) .domain([2, 6, 10])
.range(['white', 'yellow', 'orange', 'red', 'purple']); .range(['yellow', 'orange', 'red']);
// Also create a scale for mapping magnitudes to ping angle sizes // Also create a scale for mapping magnitudes to ping angle sizes
var angles = d3.scale.pow() var angles = d3.scale.pow()
.exponent(3) .exponent(3)
@ -161,20 +161,16 @@
// Plugin to resize the canvas to fill the window and to // Plugin to resize the canvas to fill the window and to
// automatically center the planet when the window size changes // automatically center the planet when the window size changes
function autocenter(options) { function autocenter(options) {
options = options || {};
var needsCentering = false; var needsCentering = false;
var globe = null;
var resize = function() { var resize = function() {
var width = window.innerWidth + (options.extraWidth || 0); var width = window.innerWidth + (options.extraWidth || 0);
var height = window.innerHeight + (options.extraHeight || 0); var height = window.innerHeight + (options.extraHeight || 0);
globe.canvas.width = width; planet.canvas.width = width;
globe.canvas.height = height; planet.canvas.height = height;
globe.projection.translate([width / 2, height / 2]); planet.projection.translate([width / 2, height / 2]);
}; };
return function(planet) { return function(planet) {
globe = planet;
planet.onInit(function() { planet.onInit(function() {
needsCentering = true; needsCentering = true;
d3.select(window).on('resize', function() { d3.select(window).on('resize', function() {
@ -191,7 +187,6 @@
// Plugin to automatically scale the planet's projection based // Plugin to automatically scale the planet's projection based
// on the window size when the planet is initialized // on the window size when the planet is initialized
function autoscale(options) { function autoscale(options) {
options = options || {};
return function(planet) { return function(planet) {
planet.onInit(function() { planet.onInit(function() {
var width = window.innerWidth + (options.extraWidth || 0); var width = window.innerWidth + (options.extraWidth || 0);

File diff suppressed because one or more lines are too long

View File

@ -8,8 +8,6 @@
<p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p> <p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p>
<p>We're using a specially-made TopoJSON file that includes lake data so that we can draw lakes on the globe with a custom plugin, which you can find at the bottom of the JavaScript. The custom TopoJSON was made using the <a href='https://github.com/mbostock/topojson/wiki/Command-Line-Reference'>TopoJSON command-line tool</a> and data from <a href='http://www.naturalearthdata.com/features/'>Natural Earth</a>; you can also <a href='/world-110m-withlakes.json'>download the JSON file</a> for your own use.</p>
<p>The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its <em>displayed</em> width and height the same via CSS styling.</p> <p>The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its <em>displayed</em> width and height the same via CSS styling.</p>
<div style='text-align: center;'> <div style='text-align: center;'>
@ -19,31 +17,24 @@
<div class='ui raised segment'> <div class='ui raised segment'>
<div class='ui blue ribbon label'>HTML</div> <div class='ui blue ribbon label'>HTML</div>
<pre class='line-numbers'><code class='language-html'>&lt;canvas id='rotatingGlobe' width='400' height='400' <pre><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'
style='width: 400px; height: 400px; cursor: move;'&gt;&lt;/canvas&gt;</code></pre> style='width: 400px; height: 400px; cursor: move;'&gt;&lt;/canvas&gt;</code></pre>
<div class='ui red ribbon label'>JavaScript</div> <div class='ui red ribbon label'>JavaScript</div>
<pre class='line-numbers'><code class='language-javascript'>(function() { <pre><code class='language-javascript'>(function() {
var globe = planetaryjs.planet(); var globe = planetaryjs.planet();
// Load our custom `autorotate` plugin; see below.
globe.loadPlugin(autorotate(10));
// The `earth` plugin draws the oceans and the land; it's actually // The `earth` plugin draws the oceans and the land; it's actually
// a combination of several separate built-in plugins. // a combination of several separate built-in plugins.
//
// Note that we're loading a special TopoJSON file
// (world-110m-withlakes.json) so we can render lakes.
globe.loadPlugin(planetaryjs.plugins.earth({ globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: '/world-110m-withlakes.json' }, topojson: { file: '/world-110m.json' },
oceans: { fill: '#000080' }, oceans: { fill: '#000080' },
land: { fill: '#339966' }, land: { fill: '#339966' },
borders: { stroke: '#008000' } borders: { stroke: '#008000' }
})); }));
// Load our custom `lakes` plugin to draw lakes; see below.
globe.loadPlugin(lakes({
fill: '#000080'
}));
// The `pings` plugin draws animated pings on the globe. // The `pings` plugin draws animated pings on the globe.
globe.loadPlugin(planetaryjs.plugins.pings()); globe.loadPlugin(planetaryjs.plugins.pings());
// Load our custom `autorotate` plugin; see below.
globe.loadPlugin(autorotate(10));
// The `zoom` and `drag` plugins enable // The `zoom` and `drag` plugins enable
// manipulating the globe with the mouse. // manipulating the globe with the mouse.
globe.loadPlugin(planetaryjs.plugins.zoom({ globe.loadPlugin(planetaryjs.plugins.zoom({
@ -69,7 +60,7 @@
var lng = Math.random() * 360 - 180; var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)]; var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 }); globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150); }, 250);
var canvas = document.getElementById('rotatingGlobe'); var canvas = document.getElementById('rotatingGlobe');
// Special code to handle high-density displays (e.g. retina, some phones) // Special code to handle high-density displays (e.g. retina, some phones)
@ -113,32 +104,6 @@
}); });
}; };
}; };
// This plugin takes lake data from the special
// TopoJSON we're loading and draws them on the map.
function lakes(options) {
options = options || {};
var lakes = null;
return function(planet) {
planet.onInit(function() {
// We can access the data loaded from the TopoJSON plugin
// on its namespace on `planet.plugins`. We're loading a custom
// TopoJSON file with an object called &quot;ne_110m_lakes&quot;.
var world = planet.plugins.topojson.world;
lakes = topojson.feature(world, world.objects.ne_110m_lakes);
});
planet.onDraw(function() {
planet.withSavedContext(function(context) {
context.beginPath();
planet.path.context(context)(lakes);
context.fillStyle = options.fill || 'black';
context.fill();
});
});
};
};
})();</code></pre> })();</code></pre>
</div> </div>

View File

@ -1,24 +1,17 @@
(function() { (function() {
var globe = planetaryjs.planet(); var globe = planetaryjs.planet();
// Load our custom `autorotate` plugin; see below.
globe.loadPlugin(autorotate(10));
// The `earth` plugin draws the oceans and the land; it's actually // The `earth` plugin draws the oceans and the land; it's actually
// a combination of several separate built-in plugins. // a combination of several separate built-in plugins.
//
// Note that we're loading a special TopoJSON file
// (world-110m-withlakes.json) so we can render lakes.
globe.loadPlugin(planetaryjs.plugins.earth({ globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: '/world-110m-withlakes.json' }, topojson: { file: '/world-110m.json' },
oceans: { fill: '#000080' }, oceans: { fill: '#000080' },
land: { fill: '#339966' }, land: { fill: '#339966' },
borders: { stroke: '#008000' } borders: { stroke: '#008000' }
})); }));
// Load our custom `lakes` plugin to draw lakes; see below.
globe.loadPlugin(lakes({
fill: '#000080'
}));
// The `pings` plugin draws animated pings on the globe. // The `pings` plugin draws animated pings on the globe.
globe.loadPlugin(planetaryjs.plugins.pings()); globe.loadPlugin(planetaryjs.plugins.pings());
// Load our custom `autorotate` plugin; see below.
globe.loadPlugin(autorotate(10));
// The `zoom` and `drag` plugins enable // The `zoom` and `drag` plugins enable
// manipulating the globe with the mouse. // manipulating the globe with the mouse.
globe.loadPlugin(planetaryjs.plugins.zoom({ globe.loadPlugin(planetaryjs.plugins.zoom({
@ -44,7 +37,7 @@
var lng = Math.random() * 360 - 180; var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)]; var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 }); globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150); }, 250);
var canvas = document.getElementById('rotatingGlobe'); var canvas = document.getElementById('rotatingGlobe');
// Special code to handle high-density displays (e.g. retina, some phones) // Special code to handle high-density displays (e.g. retina, some phones)
@ -88,30 +81,4 @@
}); });
}; };
}; };
// This plugin takes lake data from the special
// TopoJSON we're loading and draws them on the map.
function lakes(options) {
options = options || {};
var lakes = null;
return function(planet) {
planet.onInit(function() {
// We can access the data loaded from the TopoJSON plugin
// on its namespace on `planet.plugins`. We're loading a custom
// TopoJSON file with an object called "ne_110m_lakes".
var world = planet.plugins.topojson.world;
lakes = topojson.feature(world, world.objects.ne_110m_lakes);
});
planet.onDraw(function() {
planet.withSavedContext(function(context) {
context.beginPath();
planet.path.context(context)(lakes);
context.fillStyle = options.fill || 'black';
context.fill();
});
});
};
};
})(); })();

View File

@ -33,7 +33,7 @@
<div class='ui buttons'> <div class='ui buttons'>
<a class='ui green labeled icon button' href='/download/'><i class='icon download'></i>Download</a> <a class='ui green labeled icon button' href='/download/'><i class='icon download'></i>Download</a>
<div class='or'></div> <div class='or'></div>
<a class='ui labeled button' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">View Source</a> <a class='ui labeled button' href='https://github.com/BinaryMuse/planetary.js'>View Source</a>
</div> </div>
<div style='padding-top: 10px;'> <div style='padding-top: 10px;'>
@ -87,12 +87,12 @@
<p><a class='ui orange button' href='/documentation/'>Peruse the Documentation</a></p> <p><a class='ui orange button' href='/documentation/'>Peruse the Documentation</a></p>
</div> </div>
<div class='column'> <div class='column'>
<a class='ui icon header' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);"> <a class='ui icon header' href='https://github.com/BinaryMuse/planetary.js'>
<i class='ui huge icon github alternate'></i> <i class='ui huge icon github alternate'></i>
Source Code Source Code
</a> </a>
<p class='section-description'>Take a look at the source on GitHub and contribute to the project</p> <p class='section-description'>Take a look at the source on GitHub and contribute to the project</p>
<p><a class='ui purple button' href='https://github.com/BinaryMuse/planetary.js' onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">Examine the Source</a></p> <p><a class='ui purple button' href='https://github.com/BinaryMuse/planetary.js'>Examine the Source</a></p>
</div> </div>
</div> </div>

View File

@ -3,14 +3,11 @@
// The `earth` plugin draws the oceans and the land; it's actually // The `earth` plugin draws the oceans and the land; it's actually
// a combination of several separate built-in plugins. // a combination of several separate built-in plugins.
globe.loadPlugin(planetaryjs.plugins.earth({ globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: 'world-110m-withlakes.json' }, topojson: { file: 'world-110m.json' },
oceans: { fill: '#000080' }, oceans: { fill: '#000080' },
land: { fill: '#339966' }, land: { fill: '#339966' },
borders: { stroke: '#008000' } borders: { stroke: '#008000' }
})); }));
globe.loadPlugin(lakes({
fill: '#000080'
}));
// The `pings` plugin draws animated pings on the globe. // The `pings` plugin draws animated pings on the globe.
globe.loadPlugin(planetaryjs.plugins.pings()); globe.loadPlugin(planetaryjs.plugins.pings());
// Load our custom `autorotate` plugin; see below. // Load our custom `autorotate` plugin; see below.
@ -40,7 +37,7 @@
var lng = Math.random() * 360 - 180; var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)]; var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 }); globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150); }, 250);
var canvas = document.getElementById('homepage-globe-canvas'); var canvas = document.getElementById('homepage-globe-canvas');
// Special code to handle high-density displays (e.g. retina, some phones) // Special code to handle high-density displays (e.g. retina, some phones)
@ -54,27 +51,6 @@
// Draw that globe! // Draw that globe!
globe.draw(canvas); globe.draw(canvas);
function lakes(config) {
config = config || {};
return function(planet) {
var lakes = null;
planet.onInit(function() {
var world = planet.plugins.topojson.world;
lakes = topojson.feature(world, world.objects.ne_110m_lakes);
});
planet.onDraw(function() {
planet.withSavedContext(function(context) {
context.beginPath();
planet.path.context(context)(lakes);
context.fillStyle = config.fill || 'black';
context.fill();
});
});
};
};
// This plugin will automatically rotate the globe around its vertical // This plugin will automatically rotate the globe around its vertical
// axis a configured number of degrees every second. // axis a configured number of degrees every second.
function autorotate(degPerSec) { function autorotate(degPerSec) {

View File

@ -1,2 +1,2 @@
/*! Planetary.js 1.1.2 | (c) 2013 Michelle Tilley | Released under MIT License */ /*! Planetary.js 1.0.0-rc.2 | (c) 2013 Brandon Tilley | Released under MIT License */
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,i){return n.planetaryjs=t(o,i,n)}):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=e.length-1;o>=0;o--)t.unshift(e[o]);for(0===t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},u=function(n,t,o,i){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&l(n,o),n.stopped=!1,a(n,t,i)},c={plugins:{},noConflict:function(){return o.planetaryjs=i,c},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},i={plugins:{},draw:function(n){u(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){i.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](i)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90),i.path=n.geo.path().projection(i.projection),i}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(i)(n),c.plugins.borders(e)(n)}},c.plugins.pings=function(t){var o=[];t=t||{};var i=function(n,i,e){e=e||{},e.color=e.color||t.color||"white",e.angle=e.angle||t.angle||5,e.ttl=e.ttl||t.ttl||2e3;var r={time:new Date,options:e};t.latitudeFirst?(r.lat=n,r.lng=i):(r.lng=n,r.lat=i),o.push(r)},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var a=o[l],u=i-a.time;u<a.options.ttl&&(e.push(a),r(n,t,i,u,a))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var u=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},c.plugins.zoom=function(t){t=t||{};var o=function(){},i=t.onZoomStart||o,e=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,u=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(u);o.scale(null!==a&&void 0!==a?a:t.projection.scale()),o.on("zoomstart",i.bind(t)).on("zoomend",e.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){t=t||{};var o=function(){},i=t.onDragStart||o,e=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",i.bind(t)).on("dragend",e.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,i=n.event.dy,e=t.projection.rotate(),a=t.projection.scale(),u=n.scale.linear().domain([-1*a,a]).range([-90,90]),c=u(o),s=u(i);e[0]+=c,e[1]-=s,e[1]>90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e),l.call(t)});n.select(t.canvas).call(o)})}},c}); !function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=e.length-1;o>=0;o--)t.unshift(e[o]);for(0===t.length&&(u.plugins.earth&&n.loadPlugin(u.plugins.earth()),u.plugins.pings&&n.loadPlugin(u.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},c=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,i)},u={plugins:{},noConflict:function(){return o.planetaryjs=i,u},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){c(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return u.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},u.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},u.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),n.fill!==!1&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},u.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},u.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){u.plugins.topojson(t)(n),u.plugins.oceans(o)(n),u.plugins.land(i)(n),u.plugins.borders(e)(n)}},u.plugins.pings=function(t){var o=[];t=t||{};var i=function(n,i,e){e=e||{},e.color=e.color||t.color||"white",e.angle=e.angle||t.angle||5,e.ttl=e.ttl||t.ttl||2e3;var r={time:new Date,options:e};t.latitudeFirst?(r.lat=n,r.lng=i):(r.lng=n,r.lat=i),o.push(r)},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var a=o[l],c=i-a.time;c<a.options.ttl&&(e.push(a),r(n,t,i,c,a))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var c=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(c),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},u.plugins.zoom=function(t){t=t||{};var o=function(){},i=t.onZoomStart||o,e=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,c=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(c);null!==a&&void 0!==a?o.scale(a):o.scale(t.projection.scale()),o.on("zoomstart",i.bind(t)).on("zoomend",e.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},u.plugins.drag=function(t){t=t||{};var o=function(){},i=t.onDragStart||o,e=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",i.bind(t)).on("dragend",e.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,i=n.event.dy,e=t.projection.rotate(),a=t.projection.scale(),c=n.scale.linear().domain([-1*a,a]).range([-90,90]),u=c(o),s=c(i);e[0]+=u,e[1]-=s,e[1]>90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e),l.call(t)});n.select(t.canvas).call(o)})}},u});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,6 @@
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define(['d3', 'topojson'], function(d3, topojson) { define(['d3', 'topojson'], factory);
return (root.planetaryjs = factory(d3, topojson, root));
});
} else if (typeof exports === 'object') { } else if (typeof exports === 'object') {
module.exports = factory(require('d3'), require('topojson')); module.exports = factory(require('d3'), require('topojson'));
} else { } else {

View File

@ -4,10 +4,6 @@
var doDrawLoop = function(planet, canvas, hooks) { var doDrawLoop = function(planet, canvas, hooks) {
d3.timer(function() { d3.timer(function() {
if (planet.stopped) {
return true;
}
planet.context.clearRect(0, 0, canvas.width, canvas.height); planet.context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < hooks.onDraw.length; i++) { for (var i = 0; i < hooks.onDraw.length; i++) {
hooks.onDraw[i](); hooks.onDraw[i]();
@ -63,14 +59,11 @@
}; };
var startDraw = function(planet, canvas, localPlugins, hooks) { var startDraw = function(planet, canvas, localPlugins, hooks) {
initPlugins(planet, localPlugins);
planet.canvas = canvas; planet.canvas = canvas;
planet.context = canvas.getContext('2d'); planet.context = canvas.getContext('2d');
if (planet.stopped !== true) {
initPlugins(planet, localPlugins);
}
planet.stopped = false;
runOnInitHooks(planet, canvas, hooks); runOnInitHooks(planet, canvas, hooks);
}; };
@ -90,8 +83,7 @@
var localPlugins = []; var localPlugins = [];
var hooks = { var hooks = {
onInit: [], onInit: [],
onDraw: [], onDraw: []
onStop: []
}; };
var planet = { var planet = {
@ -109,21 +101,10 @@
hooks.onDraw.push(fn); hooks.onDraw.push(fn);
}, },
onStop: function(fn) {
hooks.onStop.push(fn);
},
loadPlugin: function(plugin) { loadPlugin: function(plugin) {
localPlugins.push(plugin); localPlugins.push(plugin);
}, },
stop: function() {
planet.stopped = true;
for (var i = 0; i < hooks.onStop.length; i++) {
hooks.onStop[i](planet);
}
},
withSavedContext: function(fn) { withSavedContext: function(fn) {
if (!this.context) { if (!this.context) {
throw new Error("No canvas to fetch context for"); throw new Error("No canvas to fetch context for");
@ -136,7 +117,8 @@
}; };
planet.projection = d3.geo.orthographic() planet.projection = d3.geo.orthographic()
.clipAngle(90); .clipAngle(90)
.precision(0);
planet.path = d3.geo.path().projection(planet.projection); planet.path = d3.geo.path().projection(planet.projection);
return planet; return planet;

File diff suppressed because one or more lines are too long