JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 26515
  • Score
    100M100P100Q144986F
  • License MIT

3D scatter plot

Package Exports

  • gl-scatter3d
  • gl-scatter3d/pointcloud.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gl-scatter3d) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gl-scatter3d

3D WebGL scatter plots with custom point glyphs.

Example

var createScene = require('gl-plot3d')
var createPoints = require('gl-scatter3d')

var scene = createScene()

var initialData = {
  gl: scene.gl,
  position: [ [1, 0, -1], [0, 1, -1], [0, 0, 1], [1,1,-1], [1,0,1], [0,1,1] ],
  glyph: [  "▼", "★", "■", "◆", "✚", "✖" ],
  color: [ [0,1,0], [0,0,1], [1,1,0], [1,0,1], [0,1,1], [0,0,0] ],
  size: 12,
  orthographic: true
}

for(var i=0; i<100; ++i) {
  var theta = i / 100.0 * 2.0 * Math.PI
  var x = Math.cos(theta)
  var y = Math.sin(theta)
  initialData.position.push([ x, y, 0 ])
  initialData.glyph.push("●")
  initialData.color.push([1, 0, 0])
}

var points = createPoints(initialData)

scene.add(points)

Install

npm install gl-scatter3d

Basic interface

Constructor

var points = require('gl-scatter3d')(options)

Constructs a scatter plot with the given parameters. options is an object with the following properties:

  • gl is a WebGL context
  • position (Required) an array of length 3 arrays encoding the position of the points in the scatter plot.
  • color A length 3 array encoding the color of the points in the scatter plot. To set colors per point, pass an array instead. Default is [0,0,0]
  • glyph The glyph of each point. This is a UTF8 string representing some shape. Per point glyphs can be specified by passing an array. The default glyph is a circle, "●". For more glyph ideas, check out the unicode character set. Some other fun suggestions: "☢", "☯", "❤", "▲", "⚑".
  • size The size of each point, or specified per-point using an array. In orthographic, this is in screen coordinates, or in perspective this is in world coordinates. Default is 0.1
  • orthographic A flag, which if set to true causes the points to be drawn without perspective scaling.
  • lineWidth the width of the outline (set to 0 for no outline) Default is 0
  • lineColor the color of the outline for each marker
  • font the font used for drawing the glyphs (default normal)
  • angle an angle to rotate the glyphs by in radians (default 0)
  • alignment a 2d vector to offset text drawing by (default [0,0])
  • project a flag (or array of flags) which determines which axes to project onto
  • projectOpacity the opacity of the projected point sprites (default 1.0)
  • projectScale the scaling factor of the projected point sprites (default 2.0/3.0)

Returns A new scatter plot object

Update

points.update(options)

Updates the scatter plot object. The parameter options has the same properties as the constructor.

Properties

points.opacity

The opacity of the point set (default 1)

points.projectScale

A factor by which projections are rescaled

points.projectOpacity

The opacity of the projected points

points.axesProject

An array of projection values for each point

points.lineWidth

The width of the outline of each point

Credits

(c) 2014-2015 Mikola Lysenko. MIT License. Supported by plot.ly