VisualizerJS

Canvas visualization library, was originally part of my Soundcloud radio but decided to roll it out as a separate library.

Requirements

1. Node 0.10.18

Installing

Clone this repo and install the dependencies. Then build with Browserify

npm install
npm run minify

Usage:

var viz = new Visualizer();
viz.init({dataStream: yourdatastream,container: 'cont'})
  .barGraph({bgColor:'#000000',color:'#235478'})
  .start();

API:

func	options
init	container: id for your canvas container
	datastream: array of the data to be visualized
barGraph	bgColor: background color
	color: foreground color
	width: bar width
start

Adding your own visualization functions

var drawPeaks = function($ctx,$dataStream){
// this exposes the 2d context and datastream
// to your function
  var step = 3;
  $ctx.fillStyle = '#FFFFFF';
  $ctx.fillRect(0,0,$ctx.canvas.width,$ctx.canvas.height);
  $ctx.fillStyle = '#000000';
  for(var i = 0;i<$dataStream.length;i++){
    $ctx.fillRect(i*step,Math.floor(64 - 64*($dataStream[i]/256)),step,2);
  }
};
viz.addEffect(drawPeaks);

TODO

1. Write some tests maybe
2. Get more graphs and visualizations built in.