Information Visualizer

Information Visualizer

I have been working with JavaScript and jQuery and decided to convert the mixplex info vis tool from AS3 to JavaScript as an exercise. This was a good excuse to dive into easlejs. I wanted to have an easlejs tick message call an update function in the class that the easlejs container is composed into. This would be like using an enterFrame event in AS3. I am using the combination constructor/prototype pattern to create my classes. Here is a snippet from the Cluster constructor:

    this.container = new createjs.Container();
    this.container.handle = this;
    this.container.addEventListener("tick", function(event){
        event.target.handle.update(event);
    });

Then in the prototype:

Cluster.prototype = {
    constructor:Cluster,
    update: function (evnt){
        this.centerNode.container.x  = this.x = this.myDaddy.x + this.myRadius*Math.cos(this.myAngle);
        this.centerNode.container.y = this.y = this.myDaddy.y + this.myRadius*Math.sin(this.myAngle);
        this.g.clear();
        this.g.beginStroke(this.lineColor).setStrokeStyle(2);
        this.g.moveTo(this.myDaddy.x,this.myDaddy.y);
        this.g.lineTo(this.x, this.y);
    },

As I am not extending the container, or any other easlejs class, this.x and this.y are just convenient ways to cache the current x and y of the class. Cluster's update function is being called by the easlejs tick event.
 

Canvas is not supported.