3D scatter plot
3D WebGL scatter plots with custom point glyphs.
var shell = require"gl-now"tickRate: 2var camera = require"game-shell-orbit-camera"shellvar createPoints = require"gl-scatter-plot"var createAxes = require"gl-axes"var createSelect = require"gl-select"var mat4 = require"gl-matrix"mat4var points axes selectcameralookAt2126.96.36.19910shellon"gl-init"var gl = shellgl//Initialize point cloudvar initialData =position: 1 0 -1 0 1 -1 0 0 1 11-1 101 011glyph: "▼" "★" "■" "◆" "✚" "✖"color: 010 001 110 101 011 000size: 12orthographic: trueforvar i=0; i<100; ++ivar theta = i / 100.0 * 2.0 * MathPIvar x = Mathcosthetavar y = MathsinthetainitialDatapositionpush x y 0initialDataglyphpush"●"initialDatacolorpush1 0 0points = createPointsgl initialDataaxes = createAxesglbounds: -1-1 -1 111tickSpacing: 1 1 1select = createSelectgl shellheight shellwidth//Update size of select bufferselectshape = shellheight shellwidth//Begin pass, look for points within 30 pixels of mouseselectbeginshellmouse0 shellmouse1 30//Draw point cloud pick bufferpointsdrawPickcameraParams//End pass, retrieve selection informationvar selected = selectend//Look up point id in scatter plot, mark as highlightedvar target = pointspickselectediftarget >= 0pointshighlighttargetindex 000elsepointshighlightshellon"gl-render"var gl = shellgl//Compute camera paramtersvar cameraParams =view: cameraviewprojection: mat4perspectivemat4createMathPI/4.0shellwidth/shellheight0.11000.0//Turn on z-bufferglenableglDEPTH_TEST//Update point picking dataupdatePickcameraParams//Update camerapointsdrawcameraParamsaxesdrawcameraParams
npm install gl-scatter-plot
var createScatterPlot = require"gl-scatter-plot"
Constructs a scatter plot with the given parameters.
glis a WebGL context
optionsis a JSON object containing configuration data for the scatter plot. For more information, see the documentation in the
Returns A new scatter plot object
Updates the scatter plot object. The parameter
options is an object with the following properties:
position(Required) an array of length 3 arrays encoding the position of the points in the scatter plot.
colorA length 3 array encoding the color of the points in the scatter plot. To set colors per point, pass an array instead. Default is
glyphThe 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:
"☢", "☯", "❤", "▲", "⚑".
sizeThe 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
orthographicA flag, which if set to
truecauses the points to be drawn without perspective scaling.
pickIdAn 8 bit value which determines the tag for all elements within the pick buffer
lineWidththe width of the outline (set to 0 for no outline) Default is
lineColorthe color of the outline for each marker
fontthe font used for drawing the glyphs (default
anglean angle to rotate the glyphs by in radians (default
alignmenta 2d vector to offset text drawing by (default
projecta flag (or array of flags) which determines which axes to project onto
axisBoundsa pair of 3d arrays representing the bounds of the axes to project onto
projectOpacitythe opacity of the projected point sprites (default
projectScalethe scaling factor of the projected point sprites (default
Draws the scatter plot with the given camera parameters.
camera is a JSON object storing the camera parameters for the point cloud. It has the following properties:
modelthe model matrix, encoded as a length 16 array
viewthe view matrix of the camera, encoded as a length 16 array
projectionthe projection matrix of the camera, encoded as a length 16 array
Destroys the scatter plot object and releases all stored resources.
Draws the scatter plot into a pick buffer for point selection purposes.
camerais a camera object, with the same properties as in
Finds the index of a point selected by some mouse coordinate.
selectedis the selection information returned by calling end on a
Returns An object representing the highlighted point, or
null if no point is selected. The object has the following properties:
indexwhich is the index of the selected point
positionwhich the 3D position of the selected point in data coordinates
Highlights the point with index
pointId in the scatter plot by changing its color to
pointIdis the index of a point in the scatter plot
highlightColoris the color to draw the highlighted point with
If this function is called with no arguments, then it will deselect the currently highlighted point.
Lower and upper bounds on the point cloud
A pair of arrays that determine lower and upper bounds on the scatter plot to draw. These are useful for clipping the scatter plot to a smaller region.
(c) 2014 Mikola Lysenko. MIT License. Supported by plot.ly