Plotting library experiments using WebGL and Canvas2D to apply color scale to a bufferarray object.
Clone or download


plotty is a library for helping plot 2D data and provide color scaling functionality. Put your array data in it and receive a fresh image.


Installation with Bower:

bower install --save santilland/plotty

Installation with npm:

npm install plotty --save



Just include script to site and add a canvas element where you want to render the data.

  <script src="dist/plotty.min.js"></script>
  <canvas id="canvas" width=100 height=100></canvas>

and render using predefined settings:

// Generate or load some data (Working with buffer arrays for now)
var width = 100;
var height = 100;
var exampledata = new Float32Array(height * width);

var xoff = width / 3;
var yoff = height / 3;

for (y = 0; y <= height; y++) {
  for (x = 0; x <= width; x++) {
    // calculate sine based on distance
    x2 = x - xoff;
    y2 = y - yoff;
    d = Math.sqrt(x2*x2 + y2*y2);
    t = Math.sin(d/6.0);

    // save sine
    exampledata[(y*width)+x] = t;

plot = new plotty.plot({
  canvas: document.getElementById("canvas"),
  data: exampledata, width: width, height: height,
  domain: [-1, 1], colorScale: 'viridis'

There is a list of predefined colorscales:

viridis inferno rainbow
jet hsv hot
cool spring summer
autumn winter bone
copper greys yignbu
greens yiorrd bluered
rdbu picnic portland
blackbody earth electric
magma plasma

It is also possible to define your own colorscale using the addColorScale function.

plotty.addColorScale("mycolorscale", ["#00ff00", "#0000ff", "#ff0000"], [0, 0.5, 1]);
//                  ( identifier   ,  color_steps,                    , percentage_steps)


The following npm commands are provided to help with the development:

  • npm run build: Build a non-minified version of plotty.
  • npm run build-min: Build a minified version of plotty.
  • npm run watch: Start a watcher that continuously builds plotty upon changes.
  • npm start: Start a development server.
  • npm run jsdoc: Build the documentation.


Generated data:

Example plotty rendering

Scientific data:

Second Example plotty rendering