Bookmark with submit Tutorial%3A%20Building%20a%20Snowflake%20Graph%20from%20XML reddit

Tutorial: Building a Snowflake Graph from XML

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:

    <script language="JavaScript" src="../geometry/SnowflakeGraphModel.js"></script>
    <script language="JavaScript" src="../layout/graph/SnowflakeLayout.js"></script>
    <script language="JavaScript" src="../layout/view/HTMLGraphView.js"></script>
    <script language="JavaScript" src="../layout/view/SVGGraphView.js"></script>

    <script language="JavaScript" src="../util/Timer.js"></script>
    <script language="JavaScript" src="../util/EventHandler.js"></script>

    <script language="JavaScript" src="../io/DataGraph.js"></script>
    <script language="JavaScript" src="../io/HTTP.js"></script>
    <script language="JavaScript" src="../io/XMLTreeLoader.js"></script>

    <script language="JavaScript">
      function init() {

    <style type="text/css">
      body { margin: 0; padding: 0; }
  <body onload="init()">

2) Create a new SnowflakeLayout

You can create your graph in virtually any HTML element. If you're going to place the graph in an element other than the <body>, remember that the element must have a known size and position (via element.offsetWidth, element.offsetHeight, element.offsetTop, element.offsetLeft). Append the following to "init()"

var layout = new SnowflakeLayout( document.body, true );

3) Configure the layout

A configuration defines how we handle the addition of different kinds of nodes to the graph. For each "type" of node, we tell the layout how to create a "model" and "view" of the new node.

layout.config._default = {
  model: function( dataNode ) {
    return {
      childRadius: 40,
      fanAngle: dataNode.root ? 360: 100,
      rootAngle: 0

The model attribute in this configuration dictates the underlying structure of our graph. For a SnowflakeModel, we need to define the following for each node:

  • childRadius: the edge length to this node's children
  • fanAngle: the maximum angle in which child nodes will be layed out
  • rootAngle: the base angle of the graph at the origin (this is automatically determined for all child nodes)

These parameters determine how this new node will interact with other nodes in our graph. The "model" attribute of a class in our configuration must return a JavaScript Object containing these values.

  view: function( dataNode, modelNode ) {
    if ( layout.svg ) {
      var nodeElement = document.createElementNS("", "circle");
      nodeElement.setAttribute('stroke', '#888888');
      nodeElement.setAttribute('stroke-width', '.25px');
      nodeElement.setAttribute('fill', dataNode.color);
      nodeElement.setAttribute('r', 6 + 'px');
      nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, )
      return nodeElement;
    } else {
      var nodeElement = document.createElement( 'div' ); = "absolute"; = "12px"; = "12px";
      var color = dataNode.color.replace( "#", "" ); = "url(" + color + ")";
      nodeElement.innerHTML = '';
      nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, )
      return nodeElement;

The view defines what the nodes in our graph look like. The view attribute of a configuration class must return a DOM element -- JSViz supports most HTML and SVG elements. You can control the appearance and behavior of view elements just like any DOM element. For more details, see the comments in the example source.

4) Override the default edge properties.

This is optional, of course. The SnowflakeLayout provides a default implementation, but let's replace it with a custom edge builder that draws edges in the color of the parent node.

layout.viewEdgeBuilder = function( dataNodeSrc, dataNodeDest ) {
  if ( this.svg ) {
    return {
      'stroke': dataNodeSrc.color,
      'stroke-width': '2px',
      'stroke-dasharray': '2,4'
  } else {
    return {
      'pixelColor': dataNodeSrc.color,
      'pixelWidth': '2px',
      'pixelHeight': '2px',
      'pixels': 8

5) Instantiate a loader to process the contents of our file.

The XMLTreeLoader is included in the JSViz distribution. It builds a simple graph based on the hierarchical structure of an XML document.

var loader = new XMLTreeLoader( layout.dataGraph );
loader.load( "treedata1.xml" );

See the XML source here

For your own projects, you may write a custom loader that reads XML, JSON or other formatted data from a file or REST interface.

6) Create a builder to add all of the nodes to the graph once we've finished reading the file.

var SimpleBuilder = function() {
  this.started = false;
  this.update = function() {
    var d = layout.dequeueNode();
    if ( !this.started && d ) {
      while( layout.dequeueNode() ) {};
    if ( this.started && !d ) { return false; }
var buildTimer = new Timer(0);
buildTimer.subscribe( new SimpleBuilder );

Check out the example source contains an alternate strategy for adding nodes.

We're finished. Take another look at the product.

So what can you do with JSViz 0.3.3? While we' post more examples and tutorials over the coming days and weeks, we encourage you to share your projects, ideas, and suggestions.


TrackBack URL for this entry:


Hi Kyle,

I've been playing with the new jsVis. Great job!

I'm now trying to add some text on a mouseOver, but am not sure how to go about doing this. I've read up on SVG, but it seems like you've created a system of callbacks to manage the nodes.

Any suggestions?


Hey Eric, is it just plain text that you're adding or do you need to control formatting and markup? SVG text nodes (or the subset supported by Firefox) are currently a bit limited: no line wrapping, rich formatting, or anchors. Let me know and I can post a quick example.

Hey Kyle,

I found your library and tutorial quite useful (and fun to play with). I saw your Visual Thesaurus alternative and was impressed. Because it didn't work very well in Konqueror (many AJAX scripts fail in Konqueror), I decided to make one that does not use AJAX --

It was originally done with jsviz 0.3.2, which worked in all browsers that it was tested in. 0.3.3 does not work very well in MSIE (the examples did not work very well either). The graph is drawn correctly, but an error is triggered when you try to drag a node. I thought you might want to know.

Jiang, Great! I've actually been working on an update to the Visual WordNet demo, myself -- There's a lot of interest in using it for foreign and cross-language WordNets. I'm basing the new work on a demo that I put together before releasing JSViz 0.2:

(it's old and incomplete ... sorry)

I should be done with the new version, based on JSViz 0.3.3, in a week or so and I'd like to compare notes. If there's enough interest, I'd like to spin this off into an independent opensource project.

Also, I've had some great feedback on the 0.3.3 release and I plan to post an update with fixes for known browser compatibility issues -- I'll post about this as soon as it's available. I'm also aware of the buggy IE7 behavior of the music-matching demos from my site. Somewhere on my todo list, I'm planning to update these and fix these issues (...much too do!).

Thanks for the useful feedback and helpful resource. I hope to make a gallery available shortly to promote projects like yours.

Thanks for your response! You've quite an elaborate GUI there, and I would expect no less from a master like you =]

I was actually intending to make a Chinese language version, but found that there are so many other languages available too.

You probably saw that my implementation was based on your idea of using XML to transfer data -- it is generated by the wordnet parser, and passed to Jsviz. If you used IE to view my implementation, you would be directed to Jsviz 0.3.2, in which the xml loader was modified to allow all attributes to be passed. Other viewers would see Jsviz 0.3.3, in which your xml loader already does that. I was thinking that the Jsviz session could be enclosed in an inline frame in the GUI. I suppose I'll keep going in this direction, and see what other interesting data I can pass to the "centralized" Jsviz.

But yeah, I love your new design! Thanks for making this awesome package available!

hey kyle, i love the script!! I'm not sure if my post went through, so i'm writing it again:

i am currently a graduate student in architecture working on my thesis project.

For my thesis analysis, I am trying to create a matrix that will list certain definitions, qualities and criteria of spatial analysis in order to show 3 dimensional relationships. I would like to set it up in a snowflake type diagram similar to the one that you have created. however, i would need for the children from one family to intersect with nodes of another family allowing the graph to fold onto itself. for example: if i pull up a primary node on social space, its characteristics will come up along with requirements for the definition as well as the case studies i have done/philosophies/theories.

i am completely new to scripting and definitely need some help.


Hey Aaron, I responded to your first post in the Comments, here. Thanks!

Great work Kyle. Building on Eric's question I have been trying to add text too. For both nodes and lines any example you could give would be great. I can build an xml file based on router topology but I can't label the routers or the circuits.

Kyle Bowerman

Hi Kyle. Do you plan to implement this mouseover text as HTML or SVG? With HTML, it's pretty easy to add tooltip-like functionality to your nodes and control the appearance with CSS. This is a very common request, and I've probably agreed to implement an example a dozen times. I'll see if I can put something together when I have a moment over the next few days.

Edges are less simple, because I haven't implemented any hooks to attach events, but this isn't an unreasonable request. I'll give this some thought and consider adding it as a feature request.

Thanks for the quick reply Kyle. How is your new life at google? I am planning on using my "labels" for node and edges on svg not html. I would prefer not to use mouse over because I would like all the labels of the nodes to appear. The thought was that you could select one seed router and draw only it's neighbor from a topology file or direct discovery. Then by mousedown on a neigbor you would add its new neigbors. I must clarify that I would like to label both the connector (circuit) and the ends of the connector (interfaces) and the nodes router name. I was able to do this with graphviz but would like to abondon that for jviz. Thanks again this is a wonderful package.

Hi Kyle.

I'm having problem with the script. Maybe I'm doing something wrong because I cant get it to work. The script only does the initialization of the snowflakeLayout and the XML parse, none of the configuration (model, view). What I'm I doing wrong?

Thanks for the help
Kind Regards Samyar

The link "0.3.3 Distribution" is to
The requested URL /wiki/index.php/Download was not found on this server.

Jsviz is great! Thanks for a great piece of software!

I never in a million years would have considered to look at things that way. This will make my life much easier.

Perfect tutorial thanks. It will come in very handy!

Thats a great entry, thanks for writing it. I've bookmarked your website and will be eager to reading more!

To my opinion you have to do more social bookmarking as well as backlinks. I am getting 40-45% of my unique visitors from google search... And believe me I am not kidding at all.

In my opiniuon there are thousants of social bookmarking sites. My favourite social bookmarking sites are digg stumbleupon. They could bring you a great traffic and good links if used properly. Look at my list of 2000+ social bookmarking sites.

I find myself coming back to to your blogs mainly because you have several awesome insights and also you happen to be at this a very long time, that's very inspiring and tells me you know a lot.

Thank you for this post. I am new to your blog and get really very nice. I will keep visiting your blog.

sensational stuff. don't stop saying it the truth Your blog is in the number one spot of my favorites.

Darn it
I just typed a whole long message, but when I tried to send it my FireFox freaked out.
Did you get it or do I need to retype the whole thing?

I am incredibly glad to find out that there is actually some fantastic content left out there. I have gotten used to google sending me junk.

What a relief to locate a blog post that's finally really worth reading through! I've been seeking about about this topic yet folks just set trash posts, or small unreadable posts. I have viewed a couple vids on youtube but it is now the same as reading through a good article. Great job! Sorry for my crooked english.

Thanks for this information. I have been looking every where , and due to the bad economy , me almost loosing my house I used this guys website to build a resume that landed me a job pronto , guys a genius....

This is a nice web site. Good fresh user interface and nice informative blogs. I will be coming back in a bit, thanks for the great article.

It is simple to select up plenty of floorplans on the Internet. It could not take lengthy before you ended up with a whole collection. Unfortunately, this will depart you with the restrictions of someone else's concept of a home - what should be your home.

I'm interested in knowing more on what one should pay for link building. Do you offer or know anyone who does link building.

I discovered this superb post while researching some tech stuff, and I enjoyed reading this post, I have a similar blog at please check it out.

Between me and my husband we've owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I've settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

I just bookmarked your site, so glad I found it

Hey great site wondered if anyone on here has used Controlled Labs White Flood and could maybe post a review for me or just let me know what they thought of it. Thanks!

this is important information, I appreciate your contribution

I'm experiencing a bit of fuss reading the end of the clause. The closing paragraph gets cut off halfway complete. You should have a look at that.However, the rest of the read was extraordinary!

good stuff, I was looking for info on this on google and found you, thanks alot for posting.

I think this type of tool is pretty much useful. It is absolutely perfect in the office most specially if you have a stock of datas into the system.. And just for instance you want to eliminate those files that slows your system , reg cleaner is perfect for the job. Your computer is often link to a newly acquired vehicle. Equivalent to this , a computer speed is accelerated when newly purchased but as the system ages and bulk files and programs are in stored then their is a big posibility that it will malfuntioned. That’s why registry cleaning software occurs. This is due to the fact that unused file or redundant files can be clean up or remove in the window registry. However buying a licensed software is always the best choice.cleaner free reg

Check out my website to buy, sell or trade text links.

Great article, it simply tells you that the topic we all need is available for free on the web.

Have you thought of adding more videos to your blog posts to keep the readers more entertained? I recently read the post and it was quite good…thank you for sharing

Would it be possible if I direct to your web site, from my web page? I'm needing to source as many bits of information as I can.

Apologize for my poor writing, I think its a informative piece of your writing. Well I will be suffering with having alot of difficulties in this condition however this blog helps me

I look forward of reading your posts- they’re so many awsome things, that i forget and you write about them

Great post. You are in google rss reader now so I can see more from you sometime again.

Hi, i'm trying getting started with jsviz...

Can anybody PLEASE show how to create a graph with just one Node (the
simplest way!)!
I want just see how this complicated library works, without loading
data from any xml-file and so on as the examples all show...
there is really no real documentation about that except the demos and
the code, which really doesn't help much (beginners in jsviz).

Just using the ForceDirectedLayout (or SnowflakeLayout) and how to add
a Node (maybe two) and an Edge, not more!

Best regards

Hi, i'm trying getting started with jsviz...

Can anybody PLEASE show how to create a graph with just one Node (the
simplest way!)!
I want just see how this complicated library works, without loading
data from any xml-file and so on as the examples all show...
there is really no real documentation about that except the demos and
the code, which really doesn't help much (beginners in jsviz).

Just using the ForceDirectedLayout (or SnowflakeLayout) and how to add
a Node (maybe two) and an Edge, not more!

Best regards

appreciative to come across this band getting more attention.

I really enjoyed this post. I'll send more people your way. :)

Post a Comment


Project Blog