Meandering Thought

I've been working with the Flare visualization libraries a bunch lately and found myself wanting to use new shapes to represent nodes of a graph.  With a little research I found its possible to implement the IRenderer interface and set a custom renderer for each node.  This is a pretty simple implementation, but from it I think one can see the possibilities for more complex shapes / colors in data representations.  The following is the client code that sets up the graph and visits each node setting its renderer property ::

 
package {
 
	import com.extralongfingers.graphs.client.render.RoundBlockRenderer;
	import com.extralongfingers.graphs.client.utils.GraphUtil;
 
	import flare.animate.Transitioner;
	import flare.vis.Visualization;
	import flare.vis.data.NodeSprite;
	import flare.vis.data.Tree;
	import flare.vis.operator.layout.TreeMapLayout;
 
	import flash.display.Sprite;
	import flash.geom.Rectangle;
 
	public class Flare_RoundedBlockShapeRenderer extends Sprite
	{
		public function Flare_RoundedBlockShapeRenderer()
		{
			_init();
		}
 
		private function _init() : void
		{
			var t 		: Tree 			= GraphUtil.balancedTree(12,1);
			var vis 	: Visualization = new Visualization( t );
			vis.bounds 					= new Rectangle(0,0,250,250);
 
			vis.data.nodes.visit( _nodeVisit );
 
			var _tml 	: TreeMapLayout = new TreeMapLayout( "size" );
			vis.operators.add( _tml );
			addChild( vis );
			vis.update( new Transitioner(2) ).play();
 
		}
 
		private function _nodeVisit( n : NodeSprite ) : void
		{
			n.renderer 	= RoundBlockRenderer.instance;
			n.shape		= RoundBlockRenderer.ROUNDED_BLOCK;
			n.fillColor = Math.random() * 0xffffffff;
			n.size 		= Math.random();
		}
	}
}
 

And here is my implementation of a custom Renderer called RoundedBlockRenderer that draws a block for the TreeMapLayout with rounded corners instead of 90 degree angle corners.

 
 
package com.extralongfingers.graphs.client.render
{
	import flare.vis.data.DataSprite;
	import flare.vis.data.render.IRenderer;
 
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.geom.Matrix;
 
	public class RoundBlockRenderer implements IRenderer
	{
 
		public static const ROUNDED_BLOCK : String = "roundedblock";
 
		private static var _instance:RoundBlockRenderer = new RoundBlockRenderer();
 
		public var _defaultSize:Number;
 
		public static function get instance():RoundBlockRenderer { return _instance; }
 
		public function RoundBlockRenderer(defaultSize : Number = 6)
		{
			this._defaultSize = defaultSize;
		}
 
		public function render(d:DataSprite):void
		{
			var size:Number = d.size * _defaultSize;
			var g : Graphics = d.graphics;
			g.clear();
			var _n : Number = Math.random();
			g.beginGradientFill( 	GradientType.LINEAR,
									[ 0xffffffff* _n,0xaaaaaaaa* _n, 0x8c8c8cff* _n, 0x000000 ],
									[ .8, .8, .8, .8 ],
									[ 0,96, 128, 180 ],
									new Matrix()
								);
 
			switch( d.shape ) {
 
				case ROUNDED_BLOCK:
					g.drawRoundRect(d.u-d.x, d.v-d.y, d.w, d.h, 8, 8);
				break;
			}
 
		}
 
	}
}
 

Source Code ::Rounded Block Renderer Source.

And yet another visualization of an actionscript code framework :: PureMVC :: 

Here's another visualization of an actionscript framework. This time its the very simple Adobe Cairngorm framework.  I also tried out using the Transitioner Class from the Flare framework to straighten the edges of the graph when the visualization loads.  

Here is another visualization much like the Papervision 3d visualization in the previous post.  I'm going to keep posting these code visualizations for actionscript libraries in the coming days as I get more time. 

So I've become quite interested in the Flare actionscript library for graphing and started playing around with it this weekend.  Using the example given here ::: Flare Dependency Graph , I wrote some perl that parses an actionscript source tree and creates a JSON file suitable for import into the Flare libraries.  So here is what Papervision looks like when graphed using Flare :::