Leap Data Plotter

Allows ~~easy~~ super trivial plotting of streaming data.

Dependencies: none. RequireJS-compatible.

Canvas auto-created
On the four corners, clockwise: name, max, min, and current values.

At its core:

plotter.plot('height', hand.palmPosition[1]);

Live Example

(insert hand)

Screenshot

Usage:


  // call this once per page, after the DOM is ready.
  window.plotter = new LeapDataPlotter();


  Leap.loop(function(frame){
    var hand = frame.hands[0];
    if (!hand) return;


    // call this once per frame per plot
    plotter.plot('height', hand.palmPosition[1], {
      precision: 3,
      units: 'mm'
    });


    plotter.plot('y velocity', hand.palmVelocity[1], {
      precision: 4,
      units: 'mm/s'
    });


    // call this once per frame
    plotter.update()

  });

LeapDataPlotter:

Calling plot will add a canvas to the page. The canvas will simply be appended to the body of `document.body`, with a classname of `leap-data-plotter`. Alternatively, you can pass in your own canvas element:


  // basic
  window.plotter = new LeapDataPlotter();

  // custom canvas
  window.plotter = new LeapDataPlotter({
    el: document.getElementById('my_canvas')
  });

LeapDataPlotter#plot(id, data, opts)

The name of the graph, persistent between frames
- The plot automatically resizes based upon input data

data

The datapoint to be added to the plot

opts

precision	decimal places to display in outputs [default: 5]
units	String suffix to print after the numeric output [default: '']
length	The number of data points which fit on to a graph. [default: 600]
width	[default: canvas width]
height	[default: 50]
color	Color of plotted line. Hex string. [default: auto]

LeapDataPlotter#update()

Redraws the canvas, updating the plot. Nothing will be visible without this being called.

Authors

Thanks to @nashira for authoring this library.