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/plottyInstallation with npm:
npm install plotty --savehttp://santilland.github.io/plotty/
Just include script to site and add a canvas element where you want to render the data.
<head><scriptsrc="dist/plotty.min.js"></script></head><body><canvasid="canvas" width=100height=100></canvas></body>and render using predefined settings:
// Generate or load some data (Working with buffer arrays for now)varwidth=100;varheight=100;varexampledata=newFloat32Array(height*width);varxoff=width/3;varyoff=height/3;for(y=0;y<=height;y++){for(x=0;x<=width;x++){// calculate sine based on distancex2=x-xoff;y2=y-yoff;d=Math.sqrt(x2*x2+y2*y2);t=Math.sin(d/6.0);// save sineexampledata[(y*width)+x]=t;}}plot=newplotty.plot({canvas: document.getElementById("canvas"),data: exampledata,width: width,height: height,domain: [-1,1],colorScale: 'viridis'});plot.render();There is a list of predefined colorscales:
| viridis | inferno | turbo |
| rainbow | jet | hsv |
| hot | cool | spring |
| summer | autumn | winter |
| bone | copper | greys |
| ylgnbu | greens | ylorrd |
| 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:
Scientific data:
