Tag Archives: data-visualization

Using SoundManager2 to create a texture of EQ spectrum data via javascript

onedayitwillmake 4 comments

I couldn’t find a snippet to fill a 256px size audio texture so I thought I would share mine incase it helps anyone:

View Demo

http://onedayitwillmake.com/blog/wp-content/uploads/2011/06/audiotexture/AudioTexture.html

Code Sample

function initSoundObject() {
	soundManager.flashVersion = 9;
	soundManager.url = '../../swf/';
	soundManager.useHighPerformance = true;
	soundManager.debugMode = true; // disable debug mode
 
	// When soundmanager has finished loading, loud our mp3
	soundManager.onready(function() {
	  // Ready to use; soundManager.createSound() etc. can now be called.
		soundObject = soundManager.createSound({
			id: 'mySound',
			url: 'img/ModulaScren-thisiswhoweare.mp3',
			autoLoad: true,
			autoPlay: true,
			usePeakData: false,
			useWaveformData: false,
			useEQData: true,
			volume: 50
		});
	});
}
 
var drawSoundData = function () {
	if(!soundObject)
		return;
 
	var textureWidth = 256;
	var textureHeight = 64;
	var textureCanvas = document.getElementById("dotc");
//	var textureCanvas = document.createElement("canvas");
	textureCanvas.width = textureWidth;
	textureCanvas.height = textureHeight;
	var textureContext = textureCanvas.getContext("2d");
	var textureImage = textureContext.getImageData(0, 0, textureWidth, textureWidth);
 
	var len = soundObject.eqData.left.length;
	for( var k = 0; k < len; k++ ) {
		// Set the RGBA data for this pixel - note: +soundObject.eqData.left[i] 
                // is just a unary operation to convert to a number
		var spectrumValue = (+soundObject.eqData.left[k] + +soundObject.eqData.right[k]) / 2.0;
			for (var j = 0; j < textureHeight; j += 1) {
				var column = k;
				var index = (j * textureWidth + column) * 4;
				var RGBA = spectrumValue * 255;
				textureImage.data[index + 0] = RGBA;
				textureImage.data[index + 1] = RGBA;
				textureImage.data[index + 2] = RGBA;
				textureImage.data[index + 3] = RGBA;
			}
		}
	textureContext.putImageData(textureImage, 0, 0);
 
	// Set the texture
	if(!window['gl']) return;
 
	var texture = gl.createTexture();
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 1, textureCanvas);
	gl.generateMipmap(gl.TEXTURE_2D);
};
 
window.setTimeout( drawSoundData, 1000 / 60 );

Shipping data visualization

onedayitwillmake 2 comments

I was tasked with the idea of creating some proof-of-concept (I notice i do a lot of those, imo they’re the most fun part of the project) data-visualizations involving the movement of objects on an international scale. You can obviously tell i’m trying to give out as few specific details as possible that could get me into trouble, so sorry for being so seemingly mysterious.

The first concept I had was to take the data, and use various classic key elements of infographics to denote and show at a glance the voluminous information displayed. One of the problems I came across was that I basically had more data than my computer could handle, so I had to truncate it, but that left me with information that heavily favored specific ports. In the end I used Perlin Noise to generate realistic feeling randomness to these proof-of-concepts.

(Sorry. Again, cant get into specifics, but this might be as close as this project gets to getting made so i thought i’d share.)
The key is as follows:
X axis represents something
Y axis represents a different value Logarithmicly scaled
Size is controlled by weight
Color is controlled by destination country