Leap Data Plotter

Allows easy super trivial plotting of streaming data.

Dependencies: none. RequireJS-compatible.

Live Example

(insert hand)



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

    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



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)

id 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
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]


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


Thanks to @nashira for authoring this library.