Compare commits
No commits in common. "master" and "v1.0.0-rc.2" have entirely different histories.
master
...
v1.0.0-rc.
38
CHANGELOG.md
38
CHANGELOG.md
@ -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)
|
||||||
------------------------
|
------------------------
|
||||||
|
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@ -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
|
||||||
|
|||||||
12
bower.json
12
bower.json
@ -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"
|
||||||
]
|
]
|
||||||
|
|||||||
38
dist/planetaryjs-noplugins.js
vendored
38
dist/planetaryjs-noplugins.js
vendored
@ -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;
|
||||||
|
|||||||
4
dist/planetaryjs-noplugins.min.js
vendored
4
dist/planetaryjs-noplugins.min.js
vendored
@ -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
38
dist/planetaryjs.js
vendored
@ -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;
|
||||||
|
|||||||
4
dist/planetaryjs.min.js
vendored
4
dist/planetaryjs.min.js
vendored
@ -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});
|
||||||
2
dist/world-110m.json
vendored
2
dist/world-110m.json
vendored
File diff suppressed because one or more lines are too long
19
gulpfile.js
19
gulpfile.js
@ -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
4222
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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");
|
|
||||||
@ -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": {
|
||||||
|
|||||||
@ -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">
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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);
|
|
||||||
});
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
---
|
---
|
||||||
|
|||||||
@ -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
|
||||||
---
|
---
|
||||||
|
|||||||
@ -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
|
||||||
--------
|
--------
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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).
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
|
|||||||
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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'>
|
||||||
|
|||||||
@ -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'><canvas id='basicGlobe' width='400' height='400'></canvas></code></pre>
|
<pre><code class='language-html'><canvas id='basicGlobe' width='400' height='400'></canvas></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,
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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'><h1>Earthquakes: 2013</h1>
|
<pre><code class='language-html'><h1>Earthquakes: 2013</h1>
|
||||||
<ul id='magnitudes'></ul>
|
<ul id='magnitudes'></ul>
|
||||||
|
|
||||||
<canvas id='quakeCanvas'></canvas>
|
<canvas id='quakeCanvas'></canvas>
|
||||||
@ -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);
|
||||||
|
|||||||
@ -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));
|
|
||||||
@ -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
@ -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'><canvas id='rotatingGlobe' width='400' height='400'
|
<pre><code class='language-html'><canvas id='basicGlobe' width='400' height='400'
|
||||||
style='width: 400px; height: 400px; cursor: move;'></canvas></code></pre>
|
style='width: 400px; height: 400px; cursor: move;'></canvas></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 "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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
||||||
})();</code></pre>
|
})();</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
4
site/public/js/lib/planetaryjs.min.js
vendored
4
site/public/js/lib/planetaryjs.min.js
vendored
@ -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
@ -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 {
|
||||||
|
|||||||
28
src/body.js
28
src/body.js
@ -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
Loading…
Reference in New Issue
Block a user