plotty
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
Installation with Bower:bower install --save santilland/plottyInstallation with npm:
npm install plotty --saveDocs
http://santilland.github.io/plotty/Usage
Just include script to site and add a canvas element where you want to render the data.<head>
<script src="dist/plotty.min.js"></script>
</head>
<body>
<canvas id="canvas" width=100 height=100></canvas>
</body>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'
});
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)Development
The followingnpm 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.Examples
Generated data:
Scientific data:
