Plot
Create a 2-dimensional plot.
Usage
var Plot = require( '@stdlib/plot/ctor' );
Plot( [x, y,] [options] )
Returns a plot
instance for creating 2-dimensional plots.
var plot = new Plot();
// returns <Plot>
To provide plot data at instantiation, provide x
and y
data as arguments.
var x = [[0.10, 0.20, 0.30]];
var y = [[0.52, 0.79, 0.64]];
var plot = new Plot( x, y );
// returns <Plot>
The function accepts the following options
:
- autoRender:
boolean
indicating whether to re-render on achange
event. Default:false
. - autoView:
boolean
indicating whether to generate an updated view on arender
event. Default:false
. - colors: data color(s). Default:
category10
. - description: plot description. Default:
''
. - engine: plot engine. Default:
svg
. - height: plot height. Default:
400
(pixels). - labels: data labels.
- isDefined: accessor
function
indicating whether a datum is defined. - lineStyle: data line style(s). Default:
'-'
. - lineOpacity: data line opacity. Default:
0.9
. - lineWidth: data line width. Default:
2
(pixels). - paddingBottom: bottom padding. Default:
80
(pixels). - paddingLeft: left padding. Default:
90
(pixels). - paddingRight: right padding. Default:
20
(pixels). - paddingTop: top padding. Default:
80
(pixels). - renderFormat: render format. Default:
'vdom'
. - symbols: data symbols. Default:
'none'
. - symbolsOpacity: symbols opacity. Default:
0.9
. - symbolsSize: symbols size. Default:
6
(pixels). - title: plot title. Default:
''
. - viewer: plot viewer. Default:
'none'
. - width: plot width. Default:
400
(pixels). - x:
x
values. Default:[]
. - xAxisOrient:
x
-axis orientation. Default:'bottom'
. - xLabel:
x
-axis label. Default:'x'
. - xMax: maximum value of the
x
-axis domain. Default:null
. - xMin: minimum value of the
x
-axis domain. Default:null
. - xNumTicks: number of
x
-axis tick marks. Default:5
. - xRug:
boolean
indicating whether to render a rug plot along anx
-axis. - xRugOrient:
x
-axis rug orientation. Default:'bottom'
. - xRugOpacity:
x
-axis rug opacity. Default:0.1
. - xRugSize:
x
-axis rug tick (tassel) size. Default:6
(pixels). - xScale:
x
-axis scale. Default:'linear'
. - xTickFormat:
x
-axis tick format. Default:null
. - y:
y
values. Default:[]
. - yAxisOrient:
y
-axis orientation. Default:'left'
. - yLabel:
y
-axis label. Default:'y'
. - yMax: maximum value of the
y
-axis domain. Default:null
. - yMin: minimum value of the
y
-axis domain. Default:null
. - yNumTicks: number of
y
-axis tick marks. Default:5
. - yRug:
boolean
indicating whether to render a rug plot along any
-axis. - yRugOrient:
y
-axis rug orientation. Default:'left'
. - yRugOpacity:
y
-axis rug opacity. Default:0.1
. - yRugSize:
y
-axis rug tick (tassel) size. Default:6
(pixels). - yScale:
y
-axis scale. Default:'linear'
. - yTickFormat:
y
-axis tick format. Default:null
.
In addition to supporting x
and y
data as arguments, the constructor supports providing data via the x
and y
options.
var opts = {
'x': [[0.10, 0.20, 0.30]],
'y': [[0.52, 0.79, 0.64]]
};
var plot = new Plot( opts );
// returns <Plot>
Note that x
and y
arguments take precedence over x
and y
options.
var opts = {
'x': [[0.10, 0.20, 0.30]],
'y': [[0.52, 0.79, 0.64]]
};
var x = [[0.40, 0.50, 0.60]];
var y = [[0.37, 0.51, 0.44]];
var plot = new Plot( x, y, opts );
var x1 = plot.x;
// returns [[0.40, 0.50, 0.60]]
var y1 = plot.y;
// returns [[0.37, 0.51, 0.44]]
Methods
Plot.prototype.render( [format] )
Renders a plot.
var plot = new Plot();
var vtree = plot.render();
// returns <Object>
By default, the method renders a plot as a virtual DOM tree. To render to an alternative format, provide a format
argument.
var plot = new Plot();
var vtree = plot.render( 'html' );
// returns <string>
Plot.prototype.view( [viewer] )
Generates a plot view.
var plot = new Plot();
plot.view();
To generate a particular plot view without updating the viewer
property, provide a viewer
.
var plot = new Plot();
plot.view( 'stdout' );
// => '{...}'
Writable Properties
Plot.prototype.x
x
values. The x
property value must be an array
, where each element corresponds to a plotted dataset.
var plot = new Plot();
// Set:
plot.x = [
[ 1417563950959, 1417563952959 ], // dataset 1
[ 1417563950959, 1417563952959 ] // dataset 2
];
// Get:
var x = plot.x;
// returns [ [ 1417563950959, 1417563952959 ], [ 1417563950959, 1417563952959 ] ]
Plot.prototype.y
y
values. The y
property value must be an array
, where each element corresponds to a plotted dataset.
var plot = new Plot();
// Set:
plot.y = [
[ 0.25, 0.23 ], // dataset 1
[ 0.72, 0.89 ] // dataset 2
];
// Get:
var y = plot.y;
// returns [ [ 0.25, 0.23 ], [ 0.72, 0.89 ] ]
Plot.prototype.labels
Data labels. During plot creation, each plotted dataset is assigned a label
. If the number of labels
is less than the number of plotted datasets, labels
are reused using modulo arithmetic.
var plot = new Plot();
// Set:
plot.labels = [
'beep', // assigned to datasets 0,2,4,...
'boop' // assigned to datasets 1,3,5,...
];
// Get:
var labels = plot.labels;
// returns ['beep','boop']
Plot.prototype.isDefined( d, i )
An accessor function
which defines whether a datum is defined. This accessor is used to define how missing values are encoded. When invoked, the function is provided two arguments:
- d: datum
- i: datum index
function isDefined( d ) {
return ( d !== null );
}
var plot = new Plot();
// Set:
plot.isDefined = isDefined;
// Get:
var fcn = plot.isDefined;
// returns <Function>
The default behavior is to ignore values which are NaN
.
Plot.prototype.colors
Data colors. To set the color
for all plotted datasets, provide a color
name.
var plot = new Plot();
// Set:
plot.colors = '#474747';
// Get:
var colors = plot.colors;
// returns ['#474747']
To specify the colors for each dataset, provide an array
of colors. During plot creation, each plotted dataset is assigned one of the provided colors. If the number of colors is less than the number of plotted datasets, colors are reused using modulo arithmetic.
var plot = new Plot();
plot.colors = [
'#000', // assigned to datasets 0,3,6,9,...
'rgb(100,100,100)', // assigned to datasets 1,4,7,10,...
'red' // assigned to datasets 2,5,8,11,...
];
// Get:
var colors = plot.colors;
// returns ['#000','rgb(100,100,100)','red']
A plot
instance also supports providing the name of a predefined color scheme. The following schemes are supported:
- category10
- category20
- category20b
- category20c
var plot = new Plot();
// Set:
plot.colors = 'category20';
// Get:
var colors = plot.colors;
// returns <Array>
Plot.prototype.lineStyle
Data line style(s). The following line styles are supported:
'-'
: solid line.'--'
: dashed line.':'
: dotted line.'-.'
: alternating dashes and dots.'none'
: no line.
To set the line style for all plotted datasets,
var plot = new Plot();
// Set:
plot.lineStyle = '-'; // all solid lines
// Get:
var lineStyle = plot.lineStyle;
// returns ['-']
To specify the line style for each dataset, provide an array
of line styles. During plot creation, each plotted dataset is assigned a lineStyle
. If the number of line styles is less than the number of plotted datasets, line styles are reused using modulo arithmetic.
var plot = new Plot();
plot.lineStyle = [
':', // assigned to datasets 0,3,6,9,...
'none', // assigned to datasets 1,4,7,10,...
'--' // assigned to datasets 2,5,8,11,...
];
Plot.prototype.lineOpacity
Data line opacity, where an opacity of 0.0
makes a line completely transparent and an opacity of 1.0
makes a line completely opaque. To set the opacity for all plotted lines,
var plot = new Plot();
// Set:
plot.lineOpacity = 0.9;
// Get:
var opacity = plot.lineOpacity;
// returns [0.9]
To specify the line opacity for each dataset, provide an array
of opacities. During plot creation, each plotted dataset is assigned an opacity. If the number of opacities is less than the number of plotted datasets, opacities are reused using modulo arithmetic.
var plot = new Plot();
plot.lineOpacity = [
0.7, // assigned to datasets 0,3,6,9,...
0.2, // assigned to datasets 1,4,7,10,...
1.0 // assigned to datasets 2,5,8,11,...
];
Plot.prototype.lineWidth
Data line width(s). To set the line widths for all plotted lines,
var plot = new Plot();
// Set:
plot.lineWidth = 1;
// Get:
var width = plot.lineWidth;
// returns [1]
To specify the line width for each dataset, provide an array
of widths. During plot creation, each plotted dataset is assigned a line width. If the number of line widths is less than the number of plotted datasets, line widths are reused using modulo arithmetic.
var plot = new Plot();
plot.lineWidth = [
1, // assigned to datasets 0,2,4,...
3 // assigned to datasets 1,3,5,...
];
Plot.prototype.symbols
Data symbols. The following symbols are supported:
'closed-circle'
: closed circles.'open-circle'
: open circles.'none'
: no symbols.
To set the symbols for all plotted datasets,
var plot = new Plot();
// Set:
plot.symbols = 'closed-circle';
// Get:
var sym = plot.symbols;
// returns ['closed-circle']
To specify the symbols used for each dataset, provide an array
of symbols. During plot creation, each plotted dataset is assigned a symbol. If the number of symbols is less than the number of plotted datasets, symbols are reused using modulo arithmetic.
var plot = new Plot();
plot.symbols = [
'closed-circle', // assigned to datasets 0,3,6,9,...
'none', // assigned to datasets 1,4,7,10,...
'open-circle' // assigned to datasets 2,5,8,11,...
];
Plot.prototype.symbolsSize
Symbols size. To set the size of all symbols,
var plot = new Plot();
// Set:
plot.symbolsSize = 4;
// Get:
var size = plot.symbolsSize;
// returns [4]
To specify the symbols size for each dataset, provide an array
of sizes. During plot creation, each plotted dataset is assigned a symbols size. If the number of sizes is less than the number of plotted datasets, sizes are reused using modulo arithmetic.
var plot = new Plot();
plot.symbolsSize = [
4, // assigned to datasets 0,2,4,...
6 // assigned to datasets 1,3,5,...
];
Plot.prototype.symbolsOpacity
Symbols opacity, where an opacity of 0.0
makes a symbol completely transparent and an opacity of 1.0
makes a symbol completely opaque. To set the opacity for all plotted symbols,
var plot = new Plot();
// Set:
plot.symbolsOpacity = 0.9;
// Get:
var opacity = plot.symbolsOpacity;
// returns [0.9]
To specify the opacity for each dataset, provide an array
of opacities. During plot creation, each plotted dataset is assigned an opacity. If the number of opacities is less than the number of plotted datasets, opacities are reused using modulo arithmetic.
var plot = new Plot();
plot.symbolsOpacity = [
0.7, // assigned to datasets 0,3,6,9,...
0.2, // assigned to datasets 1,4,7,10,...
1.0 // assigned to datasets 2,5,8,11,...
];
Plot.prototype.width
Plot width (in pixels).
var plot = new Plot();
// Set:
plot.width = 720;
// Get:
var width = plot.width;
// returns 720
Plot.prototype.height
Plot height (in pixels).
var plot = new Plot();
// Set:
plot.height = 480;
// Get:
var height = plot.height;
// returns 480
Plot.prototype.paddingLeft
Plot left padding (in pixels). Left padding is typically used to create space for a left-oriented y
-axis.
var plot = new Plot();
// Set:
plot.paddingLeft = 120;
// Get:
var padding = plot.paddingLeft;
// returns 120
Plot.prototype.paddingRight
Plot right padding (in pixels). Right padding is typically used to create space for a right-oriented y
-axis.
var plot = new Plot();
// Set:
plot.paddingRight = 90;
// Get:
var padding = plot.paddingRight;
// returns 90
Plot.prototype.paddingTop
Plot top padding (in pixels). Top padding is typically used to create space for a title or top-oriented x
-axis.
var plot = new Plot();
// Set:
plot.paddingTop = 100;
// Get:
var padding = plot.paddingTop;
// returns 100
Plot.prototype.paddingBottom
Plot bottom padding (in pixels). Bottom padding is typically used to create space for a bottom-oriented x
-axis.
var plot = new Plot();
// Set:
plot.paddingBottom = 105;
// Get:
var padding = plot.paddingBottom;
// returns 105
Plot.prototype.xMin
Minimum value of the x
-axis domain. When retrieved, if the value has been set to null
, the returned value is computed from the x
data.
var plot = new Plot();
// Set:
plot.xMin = -1.0;
// Get:
var xMin = plot.xMin;
// returns -1.0
Plot.prototype.xMax
Maximum value of the x
-axis domain. When retrieved, if the value has been set to null
, the returned value is computed from the x
data.
var plot = new Plot();
// Set:
plot.xMax = 100.0;
// Get:
var xMax = plot.xMax;
// returns 100.0
Plot.prototype.yMin
Minimum value of the y
-axis domain. When retrieved, if the value has been set to null
, the returned value is computed from the y
data.
var plot = new Plot();
// Set:
plot.yMin = -50.0;
// Get:
var yMin = plot.yMin;
// returns -50.0
Plot.prototype.yMax
Maximum value of the y
-axis domain. When retrieved, if the value has been set to null
, the returned value is computed from the y
data.
var plot = new Plot();
// Set:
plot.yMax = 31.4;
// Get:
var yMax = plot.yMax;
// returns 31.4
Plot.prototype.xScale
Scale function for mapping values to a coordinate along the x
-axis. The following scales
are supported:
'linear'
: linear scale.'time'
: time scale.
To set the scale,
var plot = new Plot();
plot.xScale = 'time';
When retrieved, the returned value is a scale function
.
var plot = new Plot();
var xScale = plot.xScale;
// returns <Function>
Plot.prototype.yScale
Scale function for mapping values to a coordinate along the y
-axis. The following scales
are supported:
'linear'
: linear scale.'time'
: time scale.
To set the scale,
var plot = new Plot();
plot.yScale = 'linear';
When retrieved, the returned value is a scale function
.
var plot = new Plot();
var yScale = plot.yScale;
// returns <Function>
Plot.prototype.xTickFormat
x
-axis tick format. To set the tick format,
var plot = new Plot({
'xScale': 'time'
});
plot.xTickFormat = '%H:%M';
When retrieved, if the value has not been set to null
, the returned value is a formatting function
.
var plot = new Plot({
'xScale': 'time',
'xTickFormat': '%H:%M'
});
var fmt = plot.xTickFormat;
// returns <Function>
Plot.prototype.yTickFormat
y
-axis tick format. To set the tick format,
var plot = new Plot({
'yScale': 'linear'
});
plot.yTickFormat = '.0%';
When retrieved, if the value has not been set to null
, the returned value is a formatting function
.
var plot = new Plot({
'yScale': 'linear',
'yTickFormat': '.0%'
});
var fmt = plot.yTickFormat;
// returns <Function>
Plot.prototype.xNumTicks
Number of x
-axis tick marks. To set the number of tick marks,
var plot = new Plot();
// Set:
plot.xNumTicks = 10;
// Get:
var numTicks = plot.xNumTicks;
// returns 10
If the value is set to null
, the number of tick marks is computed internally.
var plot = new Plot();
plot.xNumTicks = null;
Plot.prototype.yNumTicks
Number of y
-axis tick marks. To set the number of tick marks,
var plot = new Plot();
// Set:
plot.yNumTicks = 5;
// Get:
var numTicks = plot.yNumTicks;
// returns 5
If the value is set to null
, the number of tick marks is computed internally.
var plot = new Plot();
plot.yNumTicks = null;
Plot.prototype.xAxisOrient
x
-axis orientation. The following orientations are supported:
'bottom'
'top'
To set the orientation,
var plot = new Plot();
// Set:
plot.xAxisOrient = 'top';
// Get:
var orient = plot.xAxisOrient;
// returns 'top'
Plot.prototype.yAxisOrient
y
-axis orientation. The following orientations are supported:
'left'
'right'
To set the orientation,
var plot = new Plot();
// Set:
plot.yAxisOrient = 'right';
// Get:
var orient = plot.yAxisOrient;
// returns 'right'
Plot.prototype.xRug
Boolean flag(s) indicating whether to display a rug plot along the x
-axis. To set the for flag all plotted datasets,
var plot = new Plot();
// Set:
plot.xRug = true;
// Get:
var flgs = plot.xRug;
// returns [true]
To specify the flag for each dataset, provide an array
of booleans
. During plot creation, each plotted dataset is assigned a flag. If the number of flags is less than the number of plotted datasets, flags are reused using modulo arithmetic.
var plot = new Plot();
plot.xRug = [
true, // assigned to datasets 0,2,4,...
false // assigned to datasets 1,3,5,...
];
Plot.prototype.yRug
Boolean flag(s) indicating whether to display a rug plot along the y
-axis. To set the for flag all plotted datasets,
var plot = new Plot();
// Set:
plot.yRug = true;
// Get:
var flgs = plot.yRug;
// returns [true]
To specify the flag for each dataset, provide an array
of booleans
. During plot creation, each plotted dataset is assigned a flag. If the number of flags is less than the number of plotted datasets, flags are reused using modulo arithmetic.
var plot = new Plot();
plot.yRug = [
false, // assigned to datasets 0,2,4,...
true // assigned to datasets 1,3,5,...
];
Plot.prototype.xRugOrient
x
-axis rug orientation. The following orientations are supported:
'bottom'
'top'
To set the orientation for all plotted datasets,
var plot = new Plot();
// Set:
plot.xRugOrient = 'top';
// Get:
var orient = plot.xRugOrient;
// returns ['top']
To specify the x
-axis rug orientation for each dataset, provide an array
of orientations. During plot creation, each plotted dataset is assigned an orientation. If the number of orientations is less than the number of plotted datasets, orientations are reused using modulo arithmetic.
var plot = new Plot();
plot.xRugOrient = [
'bottom', // assigned to datasets 0,2,4,...
'top' // assigned to datasets 1,3,5,...
];
Plot.prototype.yRugOrient
y
-axis rug orientation. The following orientations are supported:
'left'
'right'
To set the orientation for all plotted datasets,
var plot = new Plot();
// Set:
plot.yRugOrient = 'right';
// Get:
var orient = plot.yRugOrient;
// returns ['right']
To specify the y
-axis rug orientation for each dataset, provide an array
of orientations. During plot creation, each plotted dataset is assigned an orientation. If the number of orientations is less than the number of plotted datasets, orientations are reused using modulo arithmetic.
var plot = new Plot();
plot.yRugOrient = [
'left', // assigned to datasets 0,2,4,...
'right' // assigned to datasets 1,3,5,...
];
Plot.prototype.xRugOpacity
x
-axis rug opacity, where an opacity of 0.0
makes a rug completely transparent and an opacity of 1.0
makes a rug completely opaque. To set the opacity for all plotted datasets,
var plot = new Plot();
// Set:
plot.xRugOpacity = 0.2;
// Get:
var opacity = plot.xRugOpacity;
// returns [0.2]
To specify the x
-axis rug opacity for each dataset, provide an array
of opacities. During plot creation, each plotted dataset is assigned an opacity. If the number of opacities is less than the number of plotted datasets, opacities are reused using modulo arithmetic.
var plot = new Plot();
plot.xRugOpacity = [
0.1, // assigned to datasets 0,2,4,...
1.0 // assigned to datasets 1,3,5,...
];
Plot.prototype.yRugOpacity
y
-axis rug opacity, where an opacity of 0.0
makes a rug completely transparent and an opacity of 1.0
makes a rug completely opaque. To set the opacity for all plotted datasets,
var plot = new Plot();
// Set:
plot.yRugOpacity = 0.4;
// Get:
var opacity = plot.yRugOpacity;
// returns [0.4]
To specify the y
-axis rug opacity for each dataset, provide an array
of opacities. During plot creation, each plotted dataset is assigned an opacity. If the number of opacities is less than the number of plotted datasets, opacities are reused using modulo arithmetic.
var plot = new Plot();
plot.yRugOpacity = [
0.7, // assigned to datasets 0,2,4,...
0.1 // assigned to datasets 1,3,5,...
];
Plot.prototype.xRugSize
x
-axis rug tick (tassel) size. To set the tick size for all plotted datasets,
var plot = new Plot();
// Set:
plot.xRugSize = 4;
// Get:
var size = plot.xRugSize;
// returns [4]
To specify the x
-axis rug size for each dataset, provide an array
of sizes. During plot creation, each plotted dataset is assigned a tick size. If the number of sizes is less than the number of plotted datasets, sizes are reused using modulo arithmetic.
var plot = new Plot();
plot.xRugSize = [
4, // assigned to datasets 0,3,6,...
6, // assigned to datasets 1,4,7,...
4 // assigned to datasets 2,5,8,...
];
Plot.prototype.yRugSize
y
-axis rug tick (tassel) size. To set the tick size for all plotted datasets,
var plot = new Plot();
// Set:
plot.yRugSize = 4;
// Get:
var size = plot.yRugSize;
// returns [4]
To specify the y
-axis rug size for each dataset, provide an array
of sizes. During plot creation, each plotted dataset is assigned a tick size. If the number of sizes is less than the number of plotted datasets, sizes are reused using modulo arithmetic.
var plot = new Plot();
plot.yRugSize = [
6, // assigned to datasets 0,3,6,...
4, // assigned to datasets 1,4,7,...
4 // assigned to datasets 2,5,8,...
];
Plot.prototype.description
Plot description.
var plot = new Plot();
// Set:
plot.description = 'A plot of `x` vs `y`.';
// Get:
var desc = plot.description;
// returns 'A plot of `x` vs `y`.'
Plot.prototype.title
Plot title.
var plot = new Plot();
// Set:
plot.title = 'Time Series';
// Get:
var title = plot.title;
// returns 'Time Series'
Plot.prototype.xLabel
x
-axis label.
var plot = new Plot();
// Set:
plot.xLabel = 'time';
// Get:
var label = plot.xLabel;
// returns 'time'
Plot.prototype.yLabel
y
-axis label.
var plot = new Plot();
// Set:
plot.yLabel = 'value';
// Get:
var label = plot.yLabel;
// returns 'value'
Plot.prototype.engine
Plot rendering engine. The following engines are supported:
'svg'
var plot = new Plot();
// Set:
plot.engine = 'svg';
// Get:
var engine = plot.engine;
// returns 'svg'
Plot.prototype.renderFormat
Plot render format. The following formats are supported:
'vdom'
'html'
var plot = new Plot();
// Set:
plot.renderFormat = 'html';
// Get:
var fmt = plot.renderFormat;
// returns 'html'
Plot.prototype.autoRender
Rendering mode. If true
, an instance renders on each 'change'
event; otherwise, rendering must be triggered manually.
var plot = new Plot();
// Set:
plot.autoRender = false;
// Get:
var mode = plot.autoRender;
// returns false
Plot.prototype.viewer
Plot viewer. The following viewers are supported:
'none'
'stdout'
'window'
'browser'
var plot = new Plot();
// Set:
plot.viewer = 'window';
// Get:
var viewer = plot.viewer;
// returns 'window'
Plot.prototype.autoView
Viewer mode. If true
, an instance generates an updated view on each 'render'
event; otherwise, generating a view must be triggered manually.
var plot = new Plot();
// Set:
plot.autoView = true;
// Get:
var mode = plot.autoView;
// returns true
Computed Properties
Plot.prototype.graphWidth
Returns the expected graph width.
var plot = new Plot({
'width': 100,
'paddingLeft': 20,
'paddingRight': 10
});
var width = plot.graphWidth;
// returns 70
Plot.prototype.graphHeight
Returns the expected graph height.
var plot = new Plot({
'height': 500,
'paddingTop': 10,
'paddingBottom': 120
});
var height = plot.graphHeight;
// returns 370
Plot.prototype.xDomain
Returns the x
-axis domain.
var plot = new Plot({
'xMin': -1.0,
'xMax': 1.0
});
var domain = plot.xDomain;
// returns [-1.0,1.0]
Plot.prototype.yDomain
Returns the y
-axis domain.
var plot = new Plot({
'yMin': 0.0,
'yMax': 100.0
});
var domain = plot.yDomain;
// returns [0.0,100.0]
Plot.prototype.xRange
Returns the x
-axis range.
var plot = new Plot({
'width': 100,
'paddingLeft': 10,
'paddingRight': 10
});
var range = plot.xRange;
// returns [0,80]
Plot.prototype.yRange
Returns the y
-axis range.
var plot = new Plot({
'height': 500,
'paddingTop': 10,
'paddingBottom': 120
});
var range = plot.yRange;
// returns [370,0]
Plot.prototype.xPos
Returns a function
to map values to x
-axis coordinate values.
var plot = new Plot();
var xPos = plot.xPos;
// returns <Function>
Plot.prototype.yPos
Returns a function
to map values to y
-axis coordinate values.
var plot = new Plot();
var yPos = plot.yPos;
// returns <Function>
Examples
var randn = require( '@stdlib/random/base/box-muller' );
var Float64Array = require( '@stdlib/array/float64' );
var plot = require( '@stdlib/plot/ctor' );
var now;
var x;
var y;
var i;
// Create some data...
now = ( new Date() ).getTime();
x = new Float64Array( 100 );
y = new Float64Array( x.length );
for ( i = 0; i < x.length; i++ ) {
x[ i ] = now + (i*360000);
y[ i ] = 50.0 + (10.0*randn());
}
// Create a new plot:
var h = plot( [x], [y], {
'width': 600,
'height': 480,
'xScale': 'time',
'xTickFormat': '%H:%M',
'renderFormat': 'html',
'autoRender': true
});
// Render as a virtual DOM tree:
var vtree = h.render( 'vdom' );
console.log( JSON.stringify( vtree ) );
// Render as HTML:
var html = h.render();
console.log( html );
// Listen for 'render' events (e.g., when triggered due to changes in state):
h.on( 'render', onRender );
setTimeout( update, 1000 );
function update() {
h.width = 720;
}
function onRender( html ) {
console.log( html );
}