HTML Tree Diagram using JSON data

Question 1

I've recently implemented the exact same thing, with knockout, but rendered with DOM elements, not a canvas.

How I did it:

<script ko template = "node">
    <div class="node">
        <a href="#" data-bind="click: toggleChildren()">Open children</a>
        <div class="children" data-bind="visible: childrenOpen, foreach: children, template: node"> 
        </div>   
    </div>
</script ko template>

<div class="nodes" data-bind="foreach: children, template: node">
</div>

On the ViewModel side:

function MyVM() {
    this.nodes = ko.observable([]); // this is a list of Node objects. each Node object has a list of children, that are also Node objects
}

ko.applyBindings(new MyVM());

On the Model side:

function Node(name, etc.) {
    var self = this;

    this.childrenOpen = ko.observable(false);
    this.children = ko.observable([]);

    this.toggleChildren = function() {
        self.childrenOpen(!self.childrenOpen());
    }
}

All that's left to do is: 1) populate nodes on the ViewModel; 2) write CSS so that it looks like a tree.

I actually used nested unordered lists (< ul >< li >) but that should not matter.

Now, this is just displaying. If you need interactivity you'll probably need to implement a couple of tree walking algorithms and keep references to parent nodes in children (this helps a lot).

Question 2

Assuming you are ie8+ you can use the JSON object. This code is untested but the main idea is that you are using recursion and passing in the bounds which the element is allowed to print in. That way each element can print itself without knowing about it's siblings or grand-children. Also, this code assumes you have room to print everything and a magic function drawLine.

function printLevel(elem, start, end, level) {
    var width = end - start;  // Width this elem gets for printing
    var mid = start + mid / 2;  // midpoint for printing this elem's name
    var myName = document.createElement("p");
    myName.appendChild(document.createTextNode(elem.name));
    myName.x = mid - fontSize * elem.name.length / 2;  // fontSize in pixels
    myName.y = level * 20; 
    document.body.appendChild(myName);
    var children = elem.children;
    if (children !== null) {
        var childWidth = width / children.length;  // Each child gets a portion of elem's width
        for (var i = 0; i < children.length; i++) {
            printLevel(children[i], start + i * childWidth, end + (i + 1) * childWidth, level + 1);
            drawLine(elem, children[i]);
        }
    }
 }
 var tree = JSON.parse(response.text);
 printLevel(tree, 0, screen.innerWidth, 0);

Question 3

Sorry, I don't know much in other language but PHP. In PHP I will use

// first degree
foreach ($result->children as $arr) { 
// Where $result is data i got from json_decode(fetch_data())
  echo $arr->name; // Sub-section A

     // second degree
     foreach ($arr->children as $arr2) {
        echo $arr2->name; //Procedure 1, Procedure 2 , ...
     }
}

Hope you get my point and apply to your java.