Drawing rooted trees with KineticJS

Question

There's a webapp I'm developing that needs to draw rooted, n-ary trees dynamically, to map out the prerequisite relationships between skills. It actually already does this and you can see an example here. I'm trying to improve it though, using the algorithm laid out here in PyMag and I must admit, I'm a bit lost trying to figure out how to adapt it for my JavaScript code.

EDIT: Here is my current code for drawing these trees, from a Rails ERB partial (I would paste the code here, but it's a bit lengthy).

For those who do check out my code,gon.skills_map is an array in this format:

• gon.skills_map[0] is the title of the skill in a string
• gon.skills_map[1] is the URL of the skill, so that each node is clickable
• gon.skills_map[2] is an array of postrequisite (it's what I'm calling the opposite of a prerequisite) arrays in this exact same format
• gon.skills_map[3] is the rating of the prerequisite relationship (which influences line thickness)

Answer 1

You could use the d3.js data visualization library. Its a much better option than manually constructing the tree especially when the graphs get more complicated. d3 uses svg so you can have rich interactions with your graph like click, hover, drag etc.

You would need to transform your graph into the appropriate data structure though like so:

{
  title: 'Skill A',
  url: 'http://skilla.com',
  children: [
    {
      title: 'Skill B',
      url: 'http://skillb.com',
      rating: 3,
      children: [
        {
          title: 'Skill D',
          url: 'http://skilld.com',
          rating: 5
        }, 
        {
          title: 'Skill E',
          url: 'http://skilld.com',
          rating: 10
        }
      ]
    },
    {
      title: 'Skill C',
      url: 'http://skillc.com',
      rating: 1
    }
  ]
}

Here the rating shows the level of dependency on the parent skill. I've created a sample skill tree with d3 in this fiddle http://jsfiddle.net/atrniv/y8drq/2/

Additionally if you can pick up d3, you can create multiple different visualizations from the same dataset of skill dependencies.

d3 website - http://d3js.org/