Planetoid

Description

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.

Requirments

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

Architecture

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

Core

Constructor options

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

Methods:

• 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>)

Events:

• 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

Plugins

General plugin structure

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

Lifecycle:

• 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()
        this.name = PLUGIN_NAME
    }

    draw() {
      
    }
}

dataloader

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>)

globe

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

landmap

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

pin

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

Methods

• 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})

zoom

Plugin zooms in/out sphere using mouse wheel.

drag

Plugin to rotate sphere using mouse.

autorotate

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

Methods

• 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)