binarymuse / planetary.js Goto Github PK

View Code? Open in Web Editor NEW

1.6K 53.0 180.0 1.87 MB

:earth_americas: Awesome interactive globes for the web

Home Page: http://planetaryjs.com

License: MIT License

JavaScript 52.47% CSS 43.23% HTML 4.30%

topojson javascript interactive-globes d3 visualization

planetary.js's Introduction

Planetary.js

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

Planetary.js is based on D3.js and TopoJSON. It has built-in support for zoom, rotation, mouse interaction, and displaying animated "pings" at any coordinate. Via plugins, Planetary.js can be extended to do whatever you want!

Examples, documentation, and more can be found at planetaryjs.com.

Requirements

D3 version 3
TopoJSON version 1

Download

Download Planetary.js from the Planetary.js web site.

Quick Start

You'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax.

HTML:

<html>
<head>
  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
  <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
  <script type='text/javascript' src='planetaryjs.min.js'></script>
</head>
<body>
  <canvas id='globe' width='500' height='500'></canvas>
  <script type='text/javascript' src='yourApp.js'></script>
</body>
</html>

JavaScript (yourApp.js):

var planet = planetaryjs.planet();
// You can remove this statement if `world-110m.json`
// is in the same path as the HTML page:
planet.loadPlugin(planetaryjs.plugins.earth({
  topojson: { file: 'http/path/to/world-110m.json' }
}));
// Make the planet fit well in its canvas
planet.projection.scale(250).translate([250, 250]);
var canvas = document.getElementById('globe');
planet.draw(canvas);

Congratulations! You've rendered your first globe.

Documentation

In-depth documentation can be found at planetaryjs.com.

Building

Building the project requires Node.js. Once you've installed the project's dependencies with npm install, you can build the JavaScript to the dist directory with npm run build.

License

Planetary.js is licensed under the MIT license. See the LICENSE file for more information.

planetary.js's People

Contributors

Stargazers

Watchers

Forkers

wokeupsleepy brownman90 cdoru eliooses hasantayyar legui33 ferlyz05 bloider007 oprearocks alvarlaigna dragulceo aydev nvdnkpr savantos umaar marviljoy thetoke boghy8823 toddsantoro smillea bradparks jeremybatesdc helemaalbigt copypeng anurajricky stubben yomigits monsterfarias jf9327 gitlisted artyom4d eeertekin shovonnn lifuzu johncant lyshiep michaelwiss marszu georab oriolrivera msudak tjoen andy737 shashank11sharma nyneye seayou olivoil liangxiaobo mattwakeman fangtoby youngdev silky nordeveloper cloozis landsurveyorsunited hb9cwp originalsin cooganbluff huangsong fredwei sungha cuffery iwek nullnotfound shenmao1989 mohdvara voodoolsx zhangyanjia lseyesl johnulist chaudang binzeehale ljtijhuis jannekekoster manaliajudiya elitelinux danielquisbert bqingqing sweetymeow celalnsa excellents zhangweiabc saectar brianclopton mamounothman pablovaldivia mcanthony bruseshen philiej yeyuguo hhy5277 ukris zhhb roachhd bodonkey harry827 jatin0312 sifulove sofiembs hackur

planetary.js's Issues

Allow a planet to draw to more than one canvas simultaneously

Currently, the data and rendering of a planet is highly coupled; one side effect is that you cannot draw a planet to more than one canvas at a time. These concerns should be separated.

Not working add not defined error

I am working on following code (function() {
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
// 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({
topojson: { file: '/world-110m-withlakes.json' },
oceans: { fill: '#000080' },
land: { fill: '#339966' },
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.
globe.loadPlugin(planetaryjs.plugins.pings());
// The zoom and drag plugins enable
// manipulating the globe with the mouse.
globe.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
// Dragging the globe should pause the
// automatic rotation until we release the mouse.
onDragStart: function() {
this.plugins.autorotate.pause();
},
onDragEnd: function() {
this.plugins.autorotate.resume();
}
}));
// Set up the globe's initial scale, offset, and rotation.
globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);

// Every few hundred milliseconds, we'll draw another random ping.
var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(function() {
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150);

var canvas = document.getElementById('rotatingGlobe');
// Special code to handle high-density displays (e.g. retina, some phones)
// In the future, Planetary.js will handle this by itself (or via a plugin).
if (window.devicePixelRatio == 2) {
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext('2d');
context.scale(2, 2);
}
// Draw that globe!
globe.draw(canvas);

// This plugin will automatically rotate the globe around its vertical
// axis a configured number of degrees every second.
function autorotate(degPerSec) {
// Planetary.js plugins are functions that take a planet instance
// as an argument...
return function(planet) {
var lastTick = null;
var paused = false;
planet.plugins.autorotate = {
pause: function() { paused = true; },
resume: function() { paused = false; }
};
// ...and configure hooks into certain pieces of its lifecycle.
planet.onDraw(function() {
if (paused || !lastTick) {
lastTick = new Date();
} else {
var now = new Date();
var delta = now - lastTick;
// This plugin uses the built-in projection (provided by D3)
// to rotate the globe each time we draw it.
var rotation = planet.projection.rotate();
rotation[0] += degPerSec * delta / 1000;
if (rotation[0] >= 180) rotation[0] -= 360;
planet.projection.rotate(rotation);
lastTick = now;
}
});
};
};

// 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();
    });
  });
};

};
})();
Please help

how can i use planetary in react

i need to use plantaryjs in react,how can i do it?

country names

I'm just wondering if it's possible to identify specific countries based on name (for example to fill certain countries with a different color).
In d3.js examples there is an additional tsv file loaded for this purpose, like here: http://bl.ocks.org/mbostock/4183330

Can this be done with planetary.js ?

thanks

Remove Pings or redraw canvas?

Is there a method to remove any or all the pings? Or is there a method to redraw the canvas and reset everything including removing all the pings?

3d to 2d

Is possible to convert the 3D globe to a 2D flat map?

Pass the lineWidth as an option for the ping plugin

Depending on the size and the color, pings can be really difficult to see.

It would be good if this plugin had an option to pass the lineWidth like so:
line 267:

options.lineWidth = options.lineWidth || config.lineWidth || 1;

and line 301:

context.lineWidth = ping.options.lineWidth;

missing plugins?

Not sure if plugins aren't exported or I've missed a setup step (have scoured docs).
I can get a basic planet on the screen but I get an error when trying to use a plugin like in the docs.

I just have this import

import * as Planetaryjs from "planetary.js";

and then applying the plugin like so:

const planet = Planetaryjs.planet();
const canvas = document.getElementById("globe");
planet.loadPlugin(Planetaryjs.plugins.autocenter({ extraHeight: -120 }));

TypeError: Cannot read property 'orthographic' of undefined

Seems that the npm distribution is not working as intended. I tried the basic sample using npm and webpack but I'm getting TypeError: Cannot read property 'orthographic' of undefined.

More specifically it seems that d3.geo is undefined in this context.

Abandoned Project?

Hey, it looks great and the example is awesome, but it feels like this project is abandoned. Is there any predessor?

Fix download links

Download links on http://planetaryjs.com/download/ are broken, they are pointing to a releases/download folder instead of pointing to the dist folder

Allow more control over the animation loop

doDrawLoop currently decides how often to redraw planets (based on d3.timer). As per part of #12, it would be nice to allow end-users to customize the draw ticks. We should extract the main draw body:

planet.context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < hooks.onDraw.length; i++) {
  hooks.onDraw[i]();
}

and allow end-users to call it whenever they want.

Planets need to be able to be destroyed

There is no way to destroy a planet and stop the draw loop. See http://stackoverflow.com/questions/21365803/angular-with-canvas-animation-planetaryjs-jerks-after-switching-views.

Detach from a single canvas, pausing draw loop
Destroy planet instance, removing draw loop and all references

Flat Map

Is there any option to use the globe in a 'flat' view? And if so how can I draw an Arc between 2 points and not just a straight line

Something like this:

map tiles

Skinning map tiles (perhaps after porting to WebGL) onto the globe would be awesome. They'd change depending on the zoom level.

d3 and topojson missing from package.json dependencies

I tried to browserify planetary.js, but it complained

Error: Cannot find module 'd3' from 'planetary.js/dist'

because of this line:https://github.com/BinaryMuse/planetary.js/blob/master/dist/planetaryjs.js#L11

I think you just need to npm install --save d3 topojson

add onclick event when clicking on pings

Would be nice to be able to click on pings and trigger events.

Data conversion from Natural Earth

Hi all,
i downloaded http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/cultural/ne_110m_admin_0_countries.zip
file.
And as you wrote it in your example, I browse documentation of "TopoJSON command-line tool"
but I have no idea on how to convert their format to json format.
Any help please ?

Regards

npm package or?

Is there an NPM package or could there be one? I want to use this on a react project, adding a <script> js source is suboptimal.

webgl

It'd be awesome to convert this to WebGL so that it's buttery smooth even on older phones if they have a GPU.

I tested on my Lumia 1020 Windows Phone, and the fps was low. I mean, it's Windows, but still. IE11 supports WebGL (most of it), so the globe would probably be smooth on IE11 mobile if it were in WebGL. Many of the Three.js WebGL demos run buttery smooth on my Windows Phone.

Microsoft Edge is about to land on my phone in a day or two, which will have even better WebGL support!

Drawing lines between two points

Could you please provide a basic example on how to draw lines between two points. I have tried this, but the lines are straight and not projected (curved):

planet.onDraw(function () {
    planet.withSavedContext(function (context) {
        var arc = d3.geo.greatArc().source([lng1, lat1]).target([lng2, lat2])();
        context.beginPath();
        planet.path.context(context)(arc);
        context.stroke();
        context.closePath();
    });
});

I had > 100 plugins after a few minutes and the whole system came to a crawl. I fixed it by calling
globe.stop ( );
globe.draw ( canvas );
anytime

Improve browserify workflow

Waiting on topojson/topojson#129; see #1 for more information.

Update package.json to depend on version of TopoJSON with necessary changes
Update documentation to reflect improved workflow