A 2d function plotter powered by d3
Function Plot is a small library built on top of D3.js whose purpose is to render functions with little configuration (think of it as a little clone of Google's plotting utility: y = x * x
The library currently supports interactive line charts and scatterplots, whenever the graph scale is modified the function is evaluated again with the new bounds, result: infinite graphs!
Have a look at the homepage for a detailed explanation on what the library is capable of
Install
$ npm install --save function-plot
Usage
var d3 = window.d3
var functionPlot = require('function-plot');
functionPlot({
// options below
})
Example
See site/js/index.js
'use strict';
var d3 = window.d3;
var functionPlot = window.functionPlot;
functionPlot({
target: '#canvas',
data: [{
title: 'f(x)',
fn: function (x) {
return -x * x;
}
}, {
fn: function (x) {
return Math.sqrt(x);
},
graphOptions: {
type: 'scatter'
}
}, {
fn: function (x) {
return 1 / x;
},
graphOptions: {
limits: [0],
interpolate: 'linear'
}
}]
});
API
var functionPlot = require('function-plot');
functionPlot(options)
params, All the params are optional unless otherwise stated
options
options.title
{string} If set the chart will have it as a title on the topoptions.xDomain
{array} domain of the linear scale (used in the x axis)options.yDomain
{array} domain of the linear scale (used in the y axis)options.xLabel
{string} x axis labeloptions.yLabel
{string} y axis labeloptions.disableZoom
{boolean} true to disable drag and zoom on the graphoptions.tip
{object} configuration passed tolib/tip
, it's the helper shown on mouseover on the closest function to the current mose positionoptions.tip.xLine
{boolean} true to show a line parallel to the X axis on mouseoveroptions.tip.yLine
{boolean} true to show a line parallel to the Y axis on mouseoveroptions.tip.renderer
{function} Function to be called to define custom rendering on mouseover, called with thex
andf(x)
of the function which is closest to the mouse position (args:x, y
)
options.data
{array} required An array defining the functions to be renderedoptions.data[i].title
{string} title of the functionoptions.data[i].skipTip
{boolean} true to avoid this function from being a target of the tipoptions.data[i].fn
{function} the function that represents the curve, this function is evaluated with values which are inrange
limiting the values to the screen min/max coordinates forx
, i.e. at any given time the graph min/max x coordinates will limit the range of values to be plottedoptions.data[i].range
{number[]} if given the function will only be evaluated with multiple values from this rangeoptions.data[i].samples
{number} the fixed number of samples to be computed at the current domain endsoptions.data[i].deltaX
{number} the increment used in each iteration to reach the width of the chart i.e. this quantity is added k times to the x scale's min x value until it surpasses the x scale's max value, defaults to(max - min) / 100
options.data[i].derivative
{Object} Info of the instantaneous rate of change of y with respect to xoptions.data[i].derivative.fn
{Function} The derivative ofoptions.data[i].fn
options.data[i].derivative.x0
{number} The abscissa of the point which belongs to the curve represented byoptions.data[i].fn
whose tangent will be computed (i.e. the tangent line to the pointx0, fn(x0)
)options.data[i].derivative.updateOnMouseOver
{boolean} True to compute the tangent line by evaluatingoptions.data[i].derivative.fn
with the current mouse position (i.e. letx0
be the abscissa of the mouse position transformed to local coordinates, the tangent line to the pointx0, fn(x0)
)
options.data[i].graphOptions
{Object} options passed to the the files located inlib/type/
, the most useful property of this object istype
which is used to determine the type of graph to be rendered for a functionoptions.data[i].graphOptions.type
{string} the type of graph to render for the function (possible values: 'line', 'scatter')
Graph Options
Common options:
options
- experimental
options.limits
{number[]} x values which make the function undefined, e.g. in1/x
the value 0 makes the function invalid
- experimental
Depending on the type of graph:
line
options
options.interpolate
{string} passed tod3.svg.line().interpolate( ... )
Development
After cloning the repo and running npm install
node site.js // generate the examples shown on index.html
npm start
Open 127.0.0.1:5555
and that's it! Local development server powered beefy
Plain demo: 127.0.0.1:5555/demo.html
TODO
- baselines (parallel to the X axis) http://metricsgraphicsjs.org/examples.htm
- annotations (parallel to the Y axis)
- axis labeling
License
2015 MIT © Mauricio Poppe