Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including planetoid with all npm packages installed. Try it out:

var planetoid = require("planetoid")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

planetoid v0.0.26

Library to visualise planets



This is a library of modeling planets using d3 and topojson, written using es6. The main point is to use es6 syntax and to be able to import it into project.

NOTE: version < 0.1.x is under development so please do not use it.


This project requires node >= 8.0.x to build it.


Overall structure is core part, class Planetoid. The module runs draw loop, which is executing plugins that are drawing the data. Core contains observer to comunicate between plugins using events(NOTE: event object should include field name).

Project parts:

  • Core - file planetoid.js, includes class Planetoid
  • Logger - file log.js, includes logger class
  • Constants - file constants.js, includes log types and etc
  • Events - file events.js, includes events


Constructor options

  • canvasSelector - string, id of canvas element
  • dataExtractor - function, function that can access data


  • addPlugin - adds plugin to planetoid, .addPlugin(new PlanetoidPlugin())
  • getPlugin - gets plugin from App instance, getPlugin(<plugin name>)
  • draw - starts draw loop, .draw()
  • stop - stops draw loop, .stop()
  • addEventListener - adds event listener, .addEventListener(<event name>, <callback>)
  • notify - triggers event listeners, .notify(<event object>), {name: <event name>, ...}
  • getEventGeoCoordinates - converts event point into coords, .getEventGeoCoordinates(<event>)


  • drawLoopStart - fires when draw loop started
  • beforeDrawIteration - fires each time before draw iteration
  • afterDrawIteration - fires each time after draw iteration
  • canvasResize - fires when canvas should be resized by outer app, like notify({name: "canvasResize"})
  • mouseMove - fires on each mouse move over canvas


General plugin structure

Plugin is a class inherited from PlanetoidPlugin. Plugin should contain name.


  • initialize - this method is called once, before main draw loop is started
  • beforeDraw - this method is called each time before draw
  • draw - this method should contain code that is visualizing data
  • afterDraw -this method is called each time after draw

Plugin example:

import PlanetoidPlugin from "./plugin"

const PLUGIN_NAME = "SomePlugin"

export default class FooPlugin extends PlanetoidPlugin{
    constructor(options={}) {
        super() = PLUGIN_NAME

    draw() {


Plugin loads json data and stores it under the key

Constructor options:

  • dataRequests - list of objects {url: <url>, key: <data key>}

Data can be accessed to from any plugin using code this.getData(<data key>)


Plugin draws basic Sphere and color. Graticule can be added to sphere.

Constructor options:

  • globeColor - string, globe color hash
  • globeOpacity - float, globe color opacity 0..1
  • withGraticule - bool, if true adds graticule to sphere
  • graticuleColor - string, graticule color hash
  • graticuleOpacity - float, graticule opacity 0..1


Plugin draws continents according to given json data

Constructor options:

  • dataKey - string, name of the key where the data for the plugin is stored
  • landColor - string, the fill color of the land, for example yellow, rgba(255, 0, 0, 0.5), #f00, #ff0000
  • borderColor - string, color of the land border, for example yellow, rgba(255, 0, 0, 0.5), #f00, #ff0000
  • borderWidth - string, width of the land border in pixels, for eample 1px, 2px


Plugin draws ping on the globe

Constructor options:

  • pins - list, objects that declares pins
  • dataKey - string, name of the key to extract data from common data storage

Pins objects fields

  • lng - float, longetude of the point
  • lat - float latitude of the point
  • color - string, color of the point
  • radius - float, raius of the point circle
  • precision - int, precision of the point circle


  • addPin - adds single ping to map, .addPin({pin object})
  • addPins - adds a list of pins to existing map, .addPins(<{pin object}>)
  • removePins - removes all pins from map, .removePins()
  • replacePins - replaces existing pins, .replacePins(<{pin object}>)
  • highlightPins - updates pin data to makethem highlighted, .highlightPins(pin => pin.x === 25, {radius: 3})


Plugin zooms in/out sphere using mouse wheel.


Plugin to rotate sphere using mouse.


Plugin to autorotate sphere. This plugin is syncronized with drag plugin, when drag is executed autorotate is not working.


  • start - enables globe rotation, .start()
  • stop - disables globe rotation, .stop()
  • isRotating - returns Boolean weather globe is rotating, .isRotating()

Constructor options:

  • degreePerSec - int, number of degrees per second of rotation
  • type - string, horisontal|vertical
  • direction -string, positive(left->right)|negative(right->left)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free