gl-axes2d v1.0.0
gl-plot2d
A WebGL based 2D rendering for large plots.
Example
Still messy here...
Install
With npm,
npm i gl-plot2dAPI
Constructor
var plot = require('gl-plot2d')(options)
Constructs a new gl-plot2d object.
optionsis an object containing parameters for constructing the plot
Options can contain the following parameters,
Required properties
| Property | Description |
|---|---|
gl | A WebGLRenderingContext object, into which the plot is drawn |
pixelRatio | A scale factor which is applied to pixel coordinates |
screenBox | Bounds on the plot within the WebGL context |
viewBox | Pixel coordinates where the plot is drawn |
dataBox | Data coordinates for the view of the plot |
Note: Coordinates for screenBox, viewBox, dataBox, etc. are given by 4-tuples of bounding box coordinates in the form [xmin, ymin, xmax, ymax].
Border and background colors
| Property | Description | Default |
|---|---|---|
borderColor | Border color as a normalized RGBA tuple | [0,0,0,0] |
backgroundColor | Background color | [0,0,0,0] |
borderLineEnable | Toggle drawing lines for left,bottom,right,top of border | [true,true,true,true] |
borderLineWidth | Width of border lines | [2,2,2,2] |
borderLineColor | Color of border lines | [[0,0,0,1], [0,0,0,1], [0,0,0,1], [0,0,0,1]] |
Note: For properties which are specified per-screen direction like borderLineEnable etc., the components are always arranged in the order left,bottom,right,top.
Ticks
| Property | Description | Default |
|---|---|---|
ticks | See note below | [[], []] |
tickEnable | Turn on display of ticks for a given axis | [true, true, true, true] |
tickPad | Distance between tick text and tick marks | [15,15,15,15] |
tickAngle | Angle to draw ticks at | [0,0,0,0] |
tickColor | Color of ticks | [[0,0,0,1], [0,0,0,1], [0,0,0,1], [0,0,0,1]] |
tickMarkWidth | Tick marks | [0,0,0,0] |
tickMarkLength | [0,0,0,0] |
Note: Ticks are encoded as an array of objects, each with the following properties:
xThe data coordinate of the ticktextThe text associated to the tict markfontThe font for the textsizeThe font size for the tick
Labels
| Property | Description | Default |
|---|---|---|
labels | The label text for each axis | ['x', 'y'] |
labelEnable | Turns on/off rendering for the labels on the left,bottom,top,right | [true, true, true, true] |
labelAngle | Angle to draw label text | [0,Math.PI/2,0,3.0*Math.PI/2] |
labelPad | Padding for labels in pixel coordinates | [15,15,15,15] |
labelSize | Size of labels in pixels | [12, 12] |
labelFont | Font for labels | ['sans-serif', 'sans-serif'] |
labelColor | Color of labels | [[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]] |
Title
| Property | Description | Default |
|---|---|---|
title | Title text | '' |
titleEnable | Toggles title rendering | true |
titleCenter | Pixel coordinates for center of title | [0.5*(viewBox[0]+viewBox[2]), viewBox[3] - 40] |
titleAngle | Angle to draw title text | 0 |
titleColor | Color of title | [0,0,0,1] |
titleFont | Title font | 'sans-serif' |
titleSize | Title font size | 18 |
Grid lines
| Property | Description | Default |
|---|---|---|
gridLineEnable | Turns on grid lines per axis | [true, true] |
gridLineColor | Grid line color | [[0,0,0,0.5], [0,0,0,0.5]] |
gridLineWidth | Width of grid lines | [1, 1] |
zeroLineEnable | Toggle rendering of zero line | [true, true] |
zeroLineWidth | Width of zero line in pixels | [2, 2] |
zeroLineColor | Color of zero line | [[0,0,0,1], [0,0,0,1]] |
Methods
plot.update(options)
Updates the properties of the plot.
optionsis an option structure, as described in the constructor
plot.setScreenBox(box)
Changes the screen box of the plot
plot.setViewBox(box)
Changes the view box
plot.setDataBox(box)
Changes the view box
plot.draw()
Redraws the plot. Call this once per requestAnimationFrame()
plot.dispose()
Destroy plot and release all associated resources
License
(c) Mikola Lysenko. MIT License
Supported by plot.ly
9 years ago