gl-axes2d

gl-plot2d

A WebGL based 2D rendering for large plots.

Example

Still messy here...

Install

With npm,

npm i gl-plot2d

API

Constructor

var plot = require('gl-plot2d')(options)

Constructs a new gl-plot2d object.

• options is 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:

• x The data coordinate of the tick
• text The text associated to the tict mark
• font The font for the text
• size The 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.

• options is 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