Simple-function-plot NPM

simple-function-plot

A simple 2d function plotter powered by d3 and used on http://blog.maurizzzio.com

Install

$ npm install --save simple-function-plot

Usage

var simpleFunctionPlot = require('simple-function-plot');
var instance = simpleFunctionPlot({
  // see the API below
})
d3.select(' selector of the parent container for the chart ')
  .call(instance)

Example

See public/index.js

'use strict';
var d3 = window.d3;
var simpleFunctionPlot = require('../');
var instance = simpleFunctionPlot({
  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'
    }
  }]
});
d3.select('#canvas')
  .call(instance);

Screenshot (for the example located at public/index.js):

screen shot 2015-03-31 at 3 04 07 am

API

var simpleFunctionPlot = require('simple-function-plot');

`simpleFunctionPlot(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 top
- options.domainX {array} domain of the linear scale (used in the x axis)
- options.domainY {array} domain of the linear scale (used in the y axis)
- options.labelX {string} x axis label
- options.labelY {string} y axis label
- options.tip {object} configuration passed to lib/tip, it's the helper shown on mouseover on the closest function to the current mose position
  - options.tip.xLine {boolean} true to show a line parallel to the X axis on mouseover
  - options.tip.yLine {boolean} true to show a line parallel to the Y axis on mouseover
  - options.tip.renderer {function} Function to be called to define custom rendering on mouseover, called with the x and f(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 rendered
  - options.data[i].title {string} title of the function
  - options.data[i].skipTip {boolean} true to avoid this function from being a target of the tip
  - options.data[i].fn {function} the function itself, called with an independent value defined in range, it
  - options.data[i].increment {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].graphOptions {Object} options passed to the the files located in lib/type/, the most useful property of this object is type which is used to determine the type of graph to be rendered for a function
    - options.data[i].graphOptions.type {string} the type of graph to render for the function