jsviz.org :: blog :: Tutorial: Building a Snowflake Graph from XML

Posted by kyle on January 21, 2007 11:49 PM

bookmark / share:

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:

<html>
  <head>
    <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>
    <style type="text/css">
      body { margin: 0; padding: 0; }
    </style>
  </head>
  <body onload="init()">
  </body>
</html>

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("http://www.w3.org/2000/svg", "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, modelNode.id )
      return nodeElement;
    } else {
      var nodeElement = document.createElement( 'div' );
      nodeElement.style.position = "absolute";
      nodeElement.style.width = "12px";
      nodeElement.style.height = "12px";
        
      var color = dataNode.color.replace( "#", "" );
      nodeElement.style.backgroundImage = "url(http://kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=888888&c=" + color + ")";
      nodeElement.innerHTML = '';
      nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
      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 ) {
      this.started=true;
      while( layout.dequeueNode() ) {};
    }
    if ( this.started && !d ) { return false; }
  }
}        
var buildTimer = new Timer(0);
buildTimer.subscribe( new SimpleBuilder );
buildTimer.start();

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.

Comments (46) | TrackBacks (0) | Tags: jsviz layout project snowflake tutorial

Trackback

TrackBack URL for this entry:
http://www.jsviz.org/cgi-bin/mt/mt-tb.cgi/5

Comments

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?

Eric

Posted by: Eric N. | January 24, 2007 08:49 AM

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.

Posted by: Kyle Scholz | January 24, 2007 09:42 AM

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 -- http://www.inportb.uni.cc/wordmap/

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.

Posted by: Jiang | January 24, 2007 09:51 PM

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:

http://kylescholz.com/projects/tree/wordnet2.html

(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.

Posted by: Kyle Scholz | January 28, 2007 10:59 PM

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!

Posted by: Jiang | January 30, 2007 02:17 AM

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.

thanks,
aaron
acohen22@student.scad.edu

Posted by: aaron | February 14, 2007 03:38 PM

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

Posted by: Kyle Scholz | February 14, 2007 09:55 PM

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.

Thanks
Kyle Bowerman

Posted by: Kyle Bowerman | May 3, 2007 12:02 AM

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.

Posted by: Kyle Scholz | May 3, 2007 07:52 PM

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.

Posted by: Kyle Bowerman | May 3, 2007 11:36 PM

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

Posted by: Samyar | July 29, 2007 10:03 AM

The link "0.3.3 Distribution" is to http://www.jsviz.org/wiki/index.php/Download
but
The requested URL /wiki/index.php/Download was not found on this server.

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

Posted by: paolo | August 9, 2007 05:56 AM

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

Posted by: denver pc service | March 18, 2010 11:24 AM

Perfect tutorial thanks. It will come in very handy!

Posted by: Web Design Sussex | March 21, 2010 10:49 PM

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

Posted by: Quick Draw | March 25, 2010 10:13 AM

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.

Posted by: book marking demon the best | April 2, 2010 05:44 PM

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.

Posted by: Huge list of social bookmarking sites | April 4, 2010 06:17 PM

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.

Posted by: Sharolyn Ipson | April 4, 2010 07:09 PM

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

Posted by: james | April 5, 2010 12:35 AM

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

Posted by: 11 x 17 Scanner | April 6, 2010 03:48 PM

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?

Posted by: Monika Hirner | April 7, 2010 07:32 AM

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.

Posted by: Video Game Violence | April 7, 2010 08:36 PM

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.

Posted by: Trucks | April 9, 2010 03:21 PM

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....

Posted by: Refugia Ovington | April 9, 2010 06:05 PM

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.

Posted by: Website Design | April 10, 2010 07:24 PM

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.

Posted by: Floor Plan Software | April 13, 2010 06:10 PM

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

Posted by: seofrank | April 14, 2010 01:37 PM

I discovered this superb post while researching some tech stuff, and I enjoyed reading this post, I have a similar blog at http://www.sinever.com/blogs please check it out.

Posted by: Burton Haynes | April 14, 2010 10:07 PM

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.

Posted by: Burton Haynes | April 14, 2010 10:55 PM

I just bookmarked your site, so glad I found it

Posted by: Lesley Kott | April 15, 2010 01:17 AM

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!

Posted by: Muscletech Hydroxycut Hardcore 120 Capsules | April 15, 2010 04:47 PM

this is important information, I appreciate your contribution

Posted by: Scott Finley | April 15, 2010 09:17 PM

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!

Posted by: Babara Wanat | April 18, 2010 11:18 PM

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

Posted by: Oren Barber | April 19, 2010 04:31 PM

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

Posted by: Perry Schmuck | April 20, 2010 04:44 AM

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

Posted by: Adult Text Link | April 20, 2010 01:50 PM

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

Posted by: Zachary Berendzen | April 20, 2010 07:18 PM

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

Posted by: skate shoes | April 21, 2010 03:35 AM

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.

Posted by: Stephania Kology | April 22, 2010 03:38 PM

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

Posted by: debt | April 24, 2010 09:10 PM

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

Posted by: games | April 26, 2010 12:42 PM

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

Posted by: Automated Backlinks | April 29, 2010 06:59 PM

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

Posted by: lesscaffee | May 4, 2010 05:22 PM

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

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

Best regards

Posted by: coffey | May 4, 2010 05:23 PM

appreciative to come across this band getting more attention.

Posted by: music makes us | May 6, 2010 11:20 PM

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

Posted by: Computer Repair | May 22, 2010 12:26 PM

Tutorial: Building a Snowflake Graph from XML

Trackback

Comments

Post a Comment