Greg Houston Design

Lately I have been interested in information visualization and have started working with some of the basics.

See the Demo

Here are three simple functions for either cascading any number of elements in an array of elements or arranging those elements into a circle or grid. Elements move from one arrangement to another via the Mootools Fx.Morph.

Cascade

function arrangeCascade(elements, xOffset, yOffset) {
	var containerTopOffset = 50;
	var containerLeftOffset = 150;
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		containerTopOffset += yOffset;
		containerLeftOffset += xOffset;
			var myMorph = new Fx.Morph(el, {
				'duration': 400
			});
			myMorph.start({
				'top': containerTopOffset,
				'left': containerLeftOffset
			});
	});
}

Arrange in Circle

function arrangeCircle(elements, centerX, centerY, radius){
	var i = 1;
	var sides = ($$(elements).length);
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		var pointRatio = i/sides;
		var xSteps = Math.cos(pointRatio*2*Math.PI);
		var ySteps = Math.sin(pointRatio*2*Math.PI);
		var pointX = centerX + xSteps * radius;
		var pointY = centerY + ySteps * radius;
		var myMorph = new Fx.Morph(el, {
			'duration': 400
		});
		myMorph.start({
			'top': pointY,
			'left': pointX
		});
		i++;
	});
}

Arrange in Grid

function arrangeGrid(elements, columns, xOffset, yOffset){
	var containerTopOffset = 120;
	var containerLeftOffset = 150;
	var i = 1;
	$$(elements).each(function(el){
		indexLevel++;
		el.setStyle('zIndex', indexLevel);
		if (i > 1 && i <= columns){
			containerLeftOffset += xOffset;
		} else if (i > 1){
			containerLeftOffset = 150;
			containerTopOffset += yOffset;
			i = 1;
		}
		var myMorph = new Fx.Morph(el, {
			‘duration’: 400
		});
		myMorph.start({
			‘top’: containerTopOffset,
			‘left’: containerLeftOffset
		});
		i++;
	});
}