| Posted by kyle on June 8, 2006 10:26 PM | bookmark / share: |
|
I'm really pleased with the response to my first posts on Force Directed Graphs in JavaScript. A number of people have expressed interest in using these libararies in their own applications so I'm providing some details on how to do so here. Have fun!
Disclaimer
This is alpha code. I'm sharing it now because I want to see what you can do with it and what you think it should do.
License
This work is licensed under a Creative Commons Attribution 2.5 License.
JavaScript Files
- graph.js: The graphing engine and supporting objects. The engine is independent of a UI implementation.
- domui.js: A client to the graph engine. This implementation draws user interface components using the DOM.
- control.js: Encapsulates event handling functions.
- event.js: An event-handler factory.
- timer.js: A object wrapper around JavaScript's "settimeout".
Example Implementation
Here's a simplified example. For a more complete example, see Example #1.
Import all of the supporting js files.
<html>
<head>
<script src="event.js"></script>
<script src="timer.js"></script>
<script src="graph.js"></script>
<script src="domui.js"></script>
<script src="control.js"></script>
</head>
Add an "onload" event handler for the timer we're going to create below.
<body onload="timer.start()">
Add an element to represent the origin of our graph.
<div id="origin" style="position:absolute;"></div>
Add an element to frame to our graph.
<div id="frame" style="width:400px;height:400px;
position:absolute;left:0px;top:0px;border:1px solid #444444;"></div>
Create and initialize the timer that will control this graph.
<script>
var timer = new TimerControl();
timer.initialize( 1 );
Construct and initialize the object that draws the user interface components. We pass in the frame and origin elements from above and boolean flags indicated whether we wish to display origin and non-origin edges. For this example, we're going to display only the non-origin edges. See Example #1 for a better way to create the frame.
var graphui=new GraphUI();
graphui.initialize( document.getElementById('frame'),
document.getElementById('origin'),
false,
true
);
Create and initialize the Graph instance. We pass in the dimensions of the frame as well.
var graph=new Graph();
graph.initialize( 400, 400 );
Subscribe the GraphUI instance to the Graph so it will receive updates.
graph.setUI( graphui );
Timers control other objects via an observer pattern. We subscribe the Graph instance to the Timer.
timer.subscribe( graph );
Set up the control (which apparently knows about all the other objects ... yick).
var control = new UserControl();
control.initialize( timer, graph, graphui );
Finally, time for data. Add some nodes to the graph. A node may have text and mass, and connect to the origin with a specific edge weight.
var node1 = control.addNode( null, 3, true, 55 );
graphui.getNode( node1.id ).style.backgroundColor="#99ee55";
graphui.getNode( node1.id ).style.border="1px solid #69be25";
var node2 = control.addNode( null, 2, true, 55 );
graphui.getNode( node2.id ).style.backgroundColor="#eeee66";
graphui.getNode( node2.id ).style.border="1px solid #bebe36";
var node3 = control.addNode( null, 1, true, 55 );
graphui.getNode( node3.id ).style.backgroundColor="#ee9944";
graphui.getNode( node3.id ).style.border="1px solid #be6914";
var node4 = control.addNode( null, 3, true, 55 );
graphui.getNode( node4.id ).style.backgroundColor="#6688ee";
graphui.getNode( node4.id ).style.border="1px solid #3658be";
Add any edges.
control.addEdge( node1, node2, 45 );
</script>
</body>
</html>
That's it! This is what it looks like. Give it a shot with your data! And please please please post a link for the rest of us.