kylescholz.com :: blog

Digging into Paint Events in Firebug

2008-11-16T22:18:15Z

I'm always on the prowl for new tools and signals for analyzing and improving frontend performance. When Mozilla announced the new MozAfterPaint event in Firefox nightlies, I got excited and got to work.

John Resig posted a bookmarklet for viewing MozAfterPaint events, but I'm primarily interested in paint events that fire before onload(), so a bookmarklet isn't ideal. I stayed up late last night and created a simple Firebug extension for capturing and viewing these events. To use:

After restarting, you'll have a "Paints" tab in Firebug. Mouse over the events to see the clip areas highlighted.

Thanks to Mozilla for making MozAfterPaint available! I've only started digging in and I'll try to follow up with some observations. In the meantime, post away, I'm interested in yours.

A Quick svg2vml Example: Gradients

2007-03-26T20:37:29Z

A couple weeks ago I mentioned the first release of svg2vml, a lightweight library that enables cross platform, JavaScript-driven vector graphics. Here's a quick example where I use svg2vml to create Digg style gradient buttons:

If you're reading from a feed reader that doesn't embed iframes, you'll need to click through to see the example.

Check out the frame source for full details. Notice that the button itself is an HTML DIV and that we use CSS and HTML elements to define and position our text. So it's possible to mix HTML and vector graphics as you see fit.

We're just scratching the surface. svg2vml can do all kinds of cool stuff. Have fun!

svg2vml Project Announced

2007-03-11T04:44:21Z

Today on the JSViz Blog, Lorien announced svg2vml, a thin translation layer that enables VML capable browsers (Internet Explorer) to display a subset of SVG without any new code.

Checkout the full post for details.

Gone Googlin'

2007-02-09T21:15:53Z

Hey friends, sorry I haven't been posting or responding to any of your e-mails lately! I assure you I've got an excuse. I'm moving from my place in Rochester, New York to California next week to start a new job with Google. I'll let you know more when I can, but please hang tight in the meantime.

I've got plenty of JSViz news to share and I'll be posting as time and wifi permit over the next week.

Tutorial: Building a Snowflake Graph from XML

2007-01-23T01:27:27Z

I just posted this new tutorial on jsviz.org...

JSViz 0.3.3 includes a few examples to help you get started. In this tutorial, I'm going to go over one of them. We'll create a Snowflake Graph from the contents of an XML file. You can find the example source, with comments based on this tutorial in the 0.3.3 Distribution.

Here's the final product

1) Start with a new HTML file

Add appropriate JSViz imports and an empty "init()" function body:

Continue reading this post at jsviz.org...

JSViz 0.3.3 Released

2007-01-22T04:31:38Z

The jsviz.org website is now available but I'll be cross-posting big news here to keep subscribers and search traffic informed:

JSViz 0.3.3 is now available. This release includes two major features:

Snowflake Model is an updated implementation of the "Tree Model" offered in JSViz 0.2. This is a geometric model, offering superior speed to Force Directed layouts, but only capable of representing hierarchical data (sorry, no circuits).

An Example Snowflake Graph

Layouts offer a simplified interface to the core JSViz libraries. New projects can now be created with minimal code and simple configuration. Additional examples, using Layouts:

An Example Force Directed Graph with Data Loader
An Example Force Directed Graph with Randomly Generated Data

You can download the full source as a single ZIP archive or browse individual files on the Download page

I'll follow up with tutorials shortly.

More Music Mashing

2006-11-06T04:11:35Z

I've received a lots of great comments and e-mails about the music recommendations demo I posted a week or so ago. But a number of you mentioned that the recommendations were a little funny. Questions and observations so far:

Theivery Corporation is the center of the universe! Every album ever released is 3 or fewer hops away from a Theivery Corporation album.
Why is every album I search for related to Beck? or Moby? or Neil Young? Though I'll point out, the man has been in almost every band that's ever released an album. Seriously, that album by the Back Street Boys and Young is one of my favorites!
How is this tool useful if the only related albums to my search are by the same artist?

Right. So ... There's a lesson here:

There's always a little bit of "magic" in a mashup.

The music recommendations demo gets album relationships from Amazon.com's E-commerce API. Similarity is based on buying patterns, which apparently lead to some unexpected or disappointing results. So I decided to try out an alternative.

I worked up a quick mashup using the Audioscrobbler (Last.fm) API for Artist-to-Artist recommendations. Audioscrobbler uses the listening patterns of it's users to determine relationships. Unfortunately, the images served up with this API aren't especially useful in identifying artists, especially when scaled down. So this demo is currently text-only. If you're interested, the demo could be extended to grab an album image from Amazon.com. I tried this and bailed out quickly because it added a lot of latency to the addition of new nodes, but you may be able to cut this down using an image cache.

So give it a try.

Oh, one more thing! These demos don't work so well in ie7. This isn't an issue with the JSViz 0.3.1 API. I'll fix the demos when I have some spare time. Thanks for all the feedback. It's useful in driving this project.

New Dojo2D Enables Cross-Platform Vector Graphics

2006-10-25T04:45:54Z

I'm super excited about the new Dojo2D, available in Dojo 0.4.0, which now enables support for vector graphics in virtually every browser!

They've created an abstraction layer that supports vector graphics implementations in SVG and VML. So this covers:

Internet Explorer 5.0+ (VML)
Firefox 1.5+ (SVG)
Opera 9.0+ (SVG)
Safari (current dev builds) (SVG)

Check out these demos (in every browser you can find):

Clocks

100 Bubbles

The implications of this are huge. Developers and designers can now treat a web page as a 2D canvas and use the familiar DOM event model for user interaction. I'm eager to see what emerges without the constraints of HTML elements, CSS, and their disperate implementations.

Modeling Music Recommendations in JavaScript with JSViz

2006-10-17T17:52:14Z

Last week I showed you a tutorial that I put together for The Ajax Experience, where we built a force directed model from the contents of an XML file. Today I'm presenting an example with full source from another tutorial in this talk, where we make a complete, interactive application that models music recommendations using Amazon.com's Similarity API. I'll be covering this example in detail in my talk next week at The AJAX Experience. You may view, download, and modify the source in this example. It's available under a Creative Commons Attribution License.

This application will enable a user to search for music by artist. When the user selects an album, they'll see a graph model reperesenting the album's relationship to similar albums, based on Amazon.com buying history. Here's a screenshot:

Click here to use this example application...

A Note on Aesthetics

Sure, album covers are square, but circles work better in 2-dimensional, dynamic graphs because they don't have any corners that might obstruct our view -- I think they look neat, too. Credit for this concept belongs to the authors of MusicMap, who created a similar application in Flash in 2004.

Example Source

In the tutorial I posted last week, I introduced the JSViz API and demonstrated how to construct a model by implementing a "Loader" to populate a DataGraph and a "NodeHandler" to control the representation of nodes and edges in our model. I've done the same thing here. Here's the source used in this example:

Amazon.js: Loader and Search interface to Amazon.com E-commerce API.
HTTP.js: A simple AJAX HTTP client.
index.html: The HTML and JavaScript that tie the application together, including the NodeHandler.

Of course, this example also uses the JSViz 0.3.1 API. While I work on a permanent home for project files, you can access them in this post from last week.

Extending This Example

This example provides base functionality that you can use to build a rich, interactive application. You might extend or enhance the application by:

Providing album details and linking to Amazon.com, ITunes, or other retailer product pages
Linking to sample audio tracks
Using node size to convey meaning (ie: Amazon.com SalesRank)
Handling error conditions, like "no albums found"
Create circle images using JavaScript (I'm currently using PERL/Image Magick)
...or atleast use an Alpha Image Loader filter to support transparent backgrounds in IE

Tutorial: Building a Force Directed Graph from XML

2006-10-13T22:20:45Z

Part of my upcoming talk at The Ajax Experience is, of course, about graph-based data visualizations using JSViz. I've worked up a couple of tutorials using the new JSViz 0.3.1 and I'm sharing abbrieviated versions of them here. Conference attendees should find these posts useful as a recap and additional reference for coding your own apps.

In this first tutorial, we'll introduce the JSViz 0.3.1 API by modeling the contents of an XML file. The model will render in HTML or SVG if it's available. Of course you can take a look at what we're building before we get started:

Screenshot of SVG | Screenshot of HTML | "Live" Example | Hide

Create an HTML File and Import JSViz Files

<html>
  <head>
    <title>JSViz Demo: Modeling XML Data</title>

    
    <!-- JSViz Libraries -->
    <script language="JavaScript" src="DataGraph.js"></script>
    <script language="JavaScript" src="Magnet.js"></script>
    <script language="JavaScript" src="Spring.js"></script>
    <script language="JavaScript" src="Particle.js"></script>
    <script language="JavaScript" src="ParticleModel.js"></script>
    <script language="JavaScript" src="Timer.js"></script>
    <script language="JavaScript" src="EventHandler.js"></script>
    <script language="JavaScript" src="HTMLGraphView.js"></script>
    <script language="JavaScript" src="SVGGraphView.js"></script>
    <script language="JavaScript" src="RungeKuttaIntegrator.js"></script>
    <script language="JavaScript" src="Control.js"></script>

    <!-- Demo Libraries -->
    <script language="JavaScript" src="HTTP.js"></script>
    <script language="JavaScript" src="XMLLoader.js"></script>

    <script>
      function init() {

      }
    </script>
    
    <style type="text/css">
      html {
        filter: expression(document.execCommand("BackgroundImageCache", false, true));
      }

      body {
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body onload="init()">

  </body>
</html>

Identifying Nodes and Relationships

First, let's check out the XML file that contains the data we're going to model.

The file contains a simple XML hierarchy that indicates the relationships in our model. Each node in the graph will be a descendant of "root" and any node may have child nodes. Each node explicitly indicates the mass and color that should be used to represent it in the model. While this XML file defines our graph structure explictly, you may have XML or other data that doesn't. The first step in using JSViz is to process your data into a "DataGraph", where we define the nodes and relationships that we're going to model.

Here I've created a simple XMLLoader that will grab the XML, parse it, and populate our DataGraph.

Whether you're retrieving data from an XML file or REST service, you'll need to write some kind of "loader" to populate your DataGraph. Don't hesitate to extend DataGraphNode with any attributes (images, labels, etc.) that may be used to render a node's representation in your model.

Setting up our Model

Now we have all the tools we need to build our model. Let's get modelling! Earlier we created an HTML file, containing an empty init() function. Now we're going to populate it:

Get the width and height of our document. We'll use these to keep the nodes in our graph on the page. If you're going to render your graph inside an HTML element (a div or table, etc.), you should instead use the dimensions of that element.

var FRAME_WIDTH;
var FRAME_HEIGHT;

if (document.all) {
  FRAME_WIDTH = document.body.offsetWidth - 5;
  FRAME_HEIGHT = document.documentElement.offsetHeight - 5;
} else {
  FRAME_WIDTH = window.innerWidth - 5;
  FRAME_HEIGHT = window.innerHeight - 5;
}

Make a view to control the presentation of our model. We'll use SVG wherever it's supported and use HTML where it's not.

var view;
if ( document.implementation.hasFeature("org.w3c.dom.svg", '1.1') ) {
  view = new SVGGraphView( 0, 0, FRAME_WIDTH, FRAME_HEIGHT );
} else {
  view = new HTMLGraphView( 0, 0, FRAME_WIDTH, FRAME_HEIGHT );
}

Create a ParticleModel that will drive animated positioning of Particles in our model. The ParticleModel contains an animation timer that we can start and stop when appropriate. There aren't any particles in our model yet, but it's ok to start it up now.

var particleModel = new ParticleModel( view );
particleModel.start();

A set of basic user controls that handle drag-and-drop of particles and window resizing is provided. Most interactive applications will extend this to provide a richer user experience.

var control = new Control( particleModel, view );

Next we initialize the DataGraph that we discussed above and create a NodeHandler. We're going to code our own NodeHandler below so we'll talk more about it in a moment.

var dataGraph = new DataGraph();
var nodeHandler = new NodeHandler( dataGraph, particleModel, view, control );
dataGraph.subscribe( nodeHandler );

Initialize the XMLLoader and instruct it to load a file.

var xmlLoader = new XMLLoader( dataGraph );
xmlLoader.load( "nodes.xml" );

In this demo, we're going to add nodes over time, enabling the model to organize under less entropy. The build timer will add 1 node every 150ms.

var buildTimer = new Timer( 150 );
buildTimer.subscribe( nodeHandler );
buildTimer.start();

Phew! We're almost done. We just covered all of the contents of the init() function but we still need to implement a NodeHandler to tell our model and view how to interpret the nodes and relationships in the DataGraph.

Controlling Model and View behavior with a NodeHandler

The NodeHandler is where everything comes together. It interprets the DataGraph to determine how to model and present the graph. In this example, we also pass in the "control" defined above because it contains some event handlers that we'll attach to view elements.

var NodeHandler = function( dataGraph, particleModel, view, control ) {
  this.dataGraph = dataGraph;
  this.particleModel = particleModel;
  this.view = view;
  this.control = control;
  this.queue = new Array();

This NodeHandler observes a DataGraph. It must implement some functions to be notified of new nodes and relationships.

this['newDataGraphNode'] = function( dataGraphNode ) {
  this.enqueueNode( dataGraphNode );						
}

this['newDataGraphEdge'] = function( nodeA, nodeB ) {
  // Empty. We learn everything we need from newDataGraphNode()
}

This NodeHandler queues nodes for additon to the model. An external timer instructs it to dequeue nodes periodically.

this['enqueueNode'] = function( dataGraphNode ) {
  this.queue.push( dataGraphNode );
}

this['dequeueNode'] = function() {
  var node = this.queue.shift();
  if ( node ) {
    this.addParticle( node );						
  }
}

this.update = function() {
  this.dequeueNode();
}

Finally, we're about to implement the function that adds particles to our model and constructs the presentation. This one is big so I'm placing comments throughout.

this['addParticle'] = function( dataGraphNode ) {
  // Create a particle to represent this data node in our model.
  particle = this.particleModel.makeParticle( dataGraphNode.mass, 0, 0 );

  // Create view for SVG
  if ( document.implementation.hasFeature("org.w3c.dom.svg", '1.1') ) {
    var bubble = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    bubble.setAttribute('stroke', '#888888');
    bubble.setAttribute('stroke-width', '.25px');
    bubble.setAttribute('fill', dataGraphNode.color);
    bubble.setAttribute('r', 6 + 'px');
    bubble.onmousedown =  new EventHandler( control, control.handleMouseDownEvent, particle.id )
    var viewNode = this.view.addNode( particle, bubble );

    // Create view for HTML
  } else {
    var bubble = document.createElement( 'div' );
    bubble.style.position = "absolute";
    bubble.style.width = "12px";
    bubble.style.height = "12px";
						
    var color = dataGraphNode.color;
    color = color.replace( "#", "" );

    bubble.style.backgroundImage = "url(/cgi-bin/bubble.pl?title=&r=12&pt=8&b=888888&c=" + color + ")";

    bubble.innerHTML = '';
    bubble.onmousedown =  new EventHandler( control, control.handleMouseDownEvent, particle.id )
    var viewNode = this.view.addNode( particle, bubble );
  }

  // Determine if this particle's position should be fixed.
  if ( dataGraphNode.fixed ) { particle.fixed = true; }

  // Assign a random position to the particle.
  var rx = Math.random()*2-1;
  var ry = Math.random()*2-1;
  particle.positionX = rx;
  particle.positionY = ry;

  // Add a Spring Force between child and parent
  if ( dataGraphNode.parent ) {
    particle.positionX = dataGraphNode.parent.particle.positionX + rx;
    particle.positionY = dataGraphNode.parent.particle.positionY + ry;
    particleModel.makeSpring( particle, dataGraphNode.parent.particle, .2, .2, 10 );
    var props;
    if ( document.implementation.hasFeature("org.w3c.dom.svg", '1.1') ) {
      props = {
        'stroke': dataGraphNode.parent.color,
        'stroke-width': '2px',
        'stroke-dasharray': '2,4'
      }
    } else {
      props = {
        'pixelColor': dataGraphNode.color,
        'pixelWidth': '2px',
        'pixelHeight': '2px',
        'pixels': 5
      }
    }

    this.view.addEdge( particle, dataGraphNode.parent.particle, props );
  }

  // Add repsulsive force between this particle and all other particle.
  for( var j=0, l=this.particleModel.particles.length; j<l; j++ ) {
    if ( this.particleModel.particles[j] != particle ) {
      this.particleModel.makeMagnet( particle, this.particleModel.particles[j], -2000, 10 );
    }
  }

  dataGraphNode.particle = particle;

  // Set a width and height for this particle for bounds checking
  particle.width=12;
  particle.height=12;

  dataGraphNode.viewNode = viewNode;
  return dataGraphNode;
},

Got all that? There's a lot to do when we add a particle to the system. Make sure you remember the closing brace on NodeHandler.

We're all done! We've created a force directed graph from the contents of an XML file.

I'll be covering this tutorial and a lot more, in depth, in a little over a week at The Ajax Experience. I'll post again shortly with another tutorial from this talk. Please comment with any questions or to show us your work. Thanks!

Check out the final product.

It's new and improved! JSViz 0.3.1

2006-10-13T04:51:41Z

JSViz 0.3.1 is now available. This release includes many enhancements to Force Directed Graphs and a new, simpler API. A new Tree Graph implementation will be available shortly.

So let's see it in action!

Tomorrow I'll post a tutorial on how to make this demo:

Show Demo

What about the source?

The source is available under a Creative Commons Attribution License. Here are the source files for browsing. I'll provide a single file distribution shortly.

DataGraph.js	Defines the nodes and relationships in our model..
ParticleModel.js	The physical model used to position particles.
Particle.js
Magnet.js	An attractive or repulsive force between particles.
Spring.js	A spring force between particles.
Timer.js	The animation timer.
EventHandler.js	An event handler factory.
HTMLGraphView.js	A view of the model constructed with HTML.
SVGGraphView.js	A view of the model constructed with SVG.
RungeKuttaIntegrator.js	Performs fast and accurate approximation of differential equations.
Control.js	A simple template for event handlers in your user interface.

Live Filter, Guided Search, and User Experience

2006-09-10T19:53:07Z

An interesting post at Unspace discusses how for many applications, a filtering paradigm is more appropriate than traditional search. To use Pete Forde's words:

With a search, you start off with nothing and potentially end up with nothing. Counter to this approach is filtering, where we present everything available, and then encourage the user to progressively remove what they do not need.

Frequently I hear from the search gurus that under ideal circumstances, search is a conversation; that a dialog must occur between the information consumer and the search provider, guiding the consumer to the desired information. Right on! Search isn't easy. Language is ambiguous and searchers aren't interested in spending several minutes formulating precise queries with complex operators.

Guided search can manifest itself in different ways. Suggestions (1 2), recommendations, categorization, and contextualization (see right hand side of results) can all be methods for asking the user, “What did you mean?”. Pete adds filters to the mix and presents an example implementation.

I agree with Pete on the concept but wish his implementation provided a more responsive user interface. Currently, as a user applies filters, a counter is updated to indicate the number of matches. A more responsive user interface would include the list of matching products inline with the filter options. This would enable the user to identify when they have filtered enough or too much and quickly modify filter citeria accordingly.

In this way, a filter model can greatly enhance browsability. Notice that in a traditional search model, when a user reaches a result page, their options are rather limited: pick one of the results, or enter a new query. If the user enters a new query, it isn't related to their last query -- the result sets may not even intersect. By contrast, a filter model can enable the user to alter the scope of their query, effectively zooming in to a subset or zooming out to a superset of the results. Every action that a user performs is connected to the actions that preceeded it and actions can be undone when they don't provide a satisfactory result.

I hope to see more from Pete and Unspace. Thanks for getting the conversation started.

Webzari Search Visualization by Yahoo! Korea

2006-08-04T13:30:07Z

TechCrunch posted about WebZari, a Flash-based search visualization:

The Yahoo! Korea team has launched a service called Webzari for visualizing the weight of inbound links to any web page and saving the visualization query history in Yahoo!’s social bookmarking service. The interface is in Korean, and it’s not entirely clear how well it works yet, but the basic feature set is discernible and it’s an intriguing thought for the future. The Yahoo! Search team seeks feedback on the project on its blog.

I'm curious if people in Korea are more agreeable to the notion of using a 2D web interface to navigate search results, let alone a Flash-based interface that takes a few seconds to load. In any event, I like this for being fun and outside-the-box. Notice the animated comets and the rocket that follows your cursor, displaying the country-of-origin of each link. Hah!

Tutorial: Creating Animated Graphs with JavaScript and JSViz

2006-08-04T04:26:51Z

In this tutorial, you'll learn how to integrate JavaScript Force Directed and Tree graphs into your web page or application using:

HTML and CSS
JavaScript with the DOM
or JavaScript with SVG

Click here to see what we're building...

If you're new to JSViz, or even new to JavaScript, this tutorial should be enough to get you rolling. Let's start out with this HTML document:

<html>
  <head>
    <title>JSViz 0.2 Tutorial</title>
    <script language="JavaScript">
      function init() {
      }
    </script>
  </head>
  <body onload="init()">
    <center><br>
      <div id="frame" style="border:3px dashed #ccccdd;width:500px;height:350px;"></div>
    </center>
  </body>
</html>

The "frame" div that we've created will hold our graph. It's going to be useful to have the dimensions of the frame available in the next several steps, so let's add this code to the init() function:

    // Get the dimensions of our 'frame' element
    var frame = document.getElementById('frame');
    var frameLeft = parseInt(frame.offsetLeft);
    var frameTop = parseInt(frame.offsetTop);
    var frameWidth = parseInt(frame.style.width);
    var frameHeight = parseInt(frame.style.height);

Now it's decision time!

Which graph model will work best with your data? Force Directed Graphs look neat and can handle all kinds of connected graphs. Tree Graphs render faster, but can only support data that can be organized into branches and leaves (no circuits).

How do you want to create and display your graph? It depends on you and your audience. You can make a graph node out of virtually any HTML element on your page or create elements using JavaScript and your graph will display on most browsers. If you plan on just using shapes and text, SVG is prettier and maybe a little faster, but is only currently supported by FireFox 1.5 and above. Users with other browsers will require a plug-in.

I'm going to dive into detail on Force Directed Graphs with a DOM view. The interfaces to other models and views are very similar, so you'll learn how the libraries work. At the end of the article, you'll find an example worked up for the other Model / View combinations.

First, we need to import the appropriate libraries. Add these script imports to the <head> section of your HTML page.

    <script src="EventHandler.js"></script>
    <script src="Timer.js"></script>
    <script src="GraphModel.js"></script>
    <script src="FDGraphModel.js"></script>
    <script src="GraphView.js"></script>
    <script src="DOMGraphView.js"></script>
    <script src="DOMFDGraphController.js"></script>

Now we're going to do something strange ... You see, Internet Explorer is a little wonky when it comes to moving images around the screen. I can hardly believe it, but if we don't preload an image, IE tries to fetch it every time we reposition it! Since we're constantly moving images around, this results in hundreds or thousands of requests! The images flicker or don't even display until the graph settles. Dean Edwards and others have tackled this problem in clever ways, but I'm taking the cowards way out.

Add this to the <body> to preload all of the images we'll use in this tutorial:

    <div id="img_preload" style="position:absolute;display:none;">
      <img src="http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=656565&c=99ee55">
      <img src="http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=24&pt=8&b=656565&c=ee9944">
      <img src="http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=16&pt=8&b=656565&c=eeee66">
      <img src="http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=9&pt=8&b=656565&c=6688ee">
    </div>

Now we'll instantiate a controller. Most of your application's interaction with the graph takes place through this object.

Add the following to the init() function:

      // Instantiate the Controller
      var controller = new DOMFDGraphController( frameWidth, frameHeight, frameLeft, frameTop );

Next, we'll create a root node. In a Tree graph, this is the trunk of the Tree (it's gotta start somewhere, right?). In a Force Directed Graph, all of the nodes share an edge with the root. It keeps them from floating out into space. In your application, you may find it practical to have multiple root nodes.

You can create the node with HTML or JavaScript

To use HTML, add the following to the body of the document:

    <div id="domRoot" style="width:12px;height:12px;
    background-image:url('http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=656565&c=99ee55');
    display:none;">
    	<img width="1" height="1"
    ></div>

Then append the following to the init() function:

      var domRoot = document.getElementById('root');

Or, to use JavaScript, append the following to the init() function:

      var domRoot = document.createElement("div");
      domRoot.style.width = "12px";
      domRoot.style.height = "12px";
      domRoot.innerHTML = '<img width="1" height="1">'; // hacky, but necessary to render in IE
      // we use the background-image rather than a foreground image so we don't confuse the browser's
      // image drag-and-drop feature
      domRoot.style.backgroundImage = "url('http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=656565&c=99ee55')";
      document.body.appendChild( domRoot );

Then we add the root node to our graph, positioned in the center of our frame:

      var root = controller.addRootNode( domRoot, false, 8, true, parseInt(frameWidth/2), parseInt(frameHeight/2) );

There are a bunch of parameters to addRootNode(). Here's quick overview:

domElement: A reference to an element in the DOM that should either be cloned, or added directly to the graph.
doClone: A boolean indicated that specifies whether the domElement should be cloned or added directly.
mass: The mass of the new node, used in force calculations.
isStatic: A boolean that indicates whether this node can move.
startX: The initial x-coordinate of this node's position.
startY: The initial y-coordinate of this node's position.

Now we're ready to add other nodes to the graph! The easiest way to do this is to add a clone of the root node:

      var nodeA = root.addEdge( root, true, false );

Your application will probably create nodes to represent a dataset located on your HTML page or accessible via an AJAX call. There are a lot of different ways you can express your data. Let's experiment with different kinds nodes and edges, and different ways you can add them to your graph. All of this code can be appended to the init() function. First we'll add a large node with more mass:

      var domB = document.createElement("div");
      domB.style.width = "24px";
      domB.style.height = "24px";
      domB.innerHTML = '';
      domB.style.backgroundImage = "url('http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=24&pt=8&b=656565&c=ee9944')";
      document.body.appendChild( domB );
      var nodeB = root.addEdge( domB, false, false, 40, 8 );

Then we'll add a child node to this new node:

      var domC = document.createElement("div");
      domC.style.width = "9px";
      domC.style.height = "9px";
      domC.innerHTML = '';
      domC.style.backgroundImage = "url('http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=9&pt=8&b=656565&c=6688ee')";
      document.body.appendChild( domC );
      var nodeC = nodeB.addEdge( domC, false, true, 30, 3 );

Now we'll try a text node:

      var domD = document.createElement("div");
      domD.style.display = "inline";
      domD.innerHTML = 'text';
      document.body.appendChild( domD );
      var nodeD = nodeB.addEdge( domD, false, true, 30, 4 );

We can clone that text node and change it's contents:

      var nodeE = root.addEdge( domD, true, false, 50, 4 );
      nodeE.viewNode.innerHTML = 'more text';

And some other arbitrary nodes:

      for( var i=0; i<4; i++ ) {
        root.addEdge( domRoot, true, false );
        root.addEdge( domC, true, false, 50, 3 );
      }

How about another static node?

      var domF = document.createElement("div");
      domF.style.width = "16px";
      domF.style.height = "16px";
      domF.innerHTML = '';
      domF.style.backgroundImage = 
        "url('http://www.kylescholz.com/cgi-bin/bubble.pl?title=&r=16&pt=8&b=656565&c=eeee66')";
      document.body.appendChild( domF );
      var nodeF = 
        controller.addRootNode( domF, false, 6, true, parseInt(frameWidth/2)+50, parseInt(frameHeight/2) );

Finally, an HTML table to top it all off:

      var d1 = document.createElement("td");
      d1.innerHTML="column 1";
      var d2 = document.createElement("td");
      d2.innerHTML="column 2";
      var tr = document.createElement("tr");
      tr.appendChild(d1);
      tr.appendChild(d2);
      var tbody = document.createElement("tbody");
      tbody.appendChild( tr );
      var table = document.createElement("table");
      table.border=1;
      table.appendChild( tbody );
      document.body.appendChild(table);
      nodeF.addEdge( table, false, false, 50, 3 );

That's it! Give it a shot in your app and leave us a link!

JSViz 0.2a Design Overview

2006-08-02T20:18:49Z

I put together some diagrams to describe the JSViz 0.2a design. I'm looking for comments to guide the design of the 0.2 release. Please let me know what you think:

The core of the design is a traditional Model / View / Controller (MVC). I'm not going to go into detail about MVC here, but Wikipedia has plenty of detail here. MVC offers an elegant means to recycle and swap implementations of the principle components of a system. Here's a high level view of JSViz 2.0a:

Our components are:

GraphModel: Representation of nodes and edges in a graph, and also the algorithms used to position these objects in space. JSViz 0.2a supports "Force Directed" and "Tree" models.
GraphView: Produces a displayable representation of the model. JSViz 0.2a includes "DOM" and "SVG" views.
GraphController: Handles events that modify the model and view. In the current design, an implementation of GraphController is required for each model / view combination.

The abstract classes define a minimum set of functionality that must be included in each concrete implementation. For example, an implementation of GraphModel must enable a client to add nodes and edges, and update the positions of objects in the graph. And a GraphView must enable a client to draw nodes and edges as their positions change. The diagram below adds in some concrete classes.

Most of your application's interactions with the graph will take place through a concrete implementation of GraphController. This is better illustrated with code, so I'm going to follow up with a usage walk-through. If you have any comments in the meantime, please leave 'em below.