dndTree.js

/*Copyright (c) 2013-2016, Rob Schmuecker
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.
* The name Rob Schmuecker may not be used to endorse or promote products
  derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.*/


// Get JSON data
treeJSON = d3.json("portal.json", function(error, treeData) {

    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables for drag/drop
    var selectedNode = null;
    var draggingNode = null;
    // panning variables
    var panSpeed = 200;
    var panBoundary = 20; // Within 20px from edges will pan when dragging.
    // Misc. variables
    var i = 0;
    var duration = 750;
    var root;

    // size of the diagram
    var viewerWidth = $(document).width();
    var viewerHeight = $(document).height();

    var tree = d3.layout.tree()
        .size([viewerHeight, viewerWidth]);

    // define a d3 diagonal projection for use by the node paths later on.
    var diagonal = d3.svg.diagonal()
        .projection(function(d) {
            return [d.y, d.x];
        });

    // A recursive helper function for performing some setup by walking through all nodes

    function visit(parent, visitFn, childrenFn) {
        if (!parent) return;

        visitFn(parent);

        var children = childrenFn(parent);
        if (children) {
            var count = children.length;
            for (var i = 0; i < count; i++) {
                visit(children[i], visitFn, childrenFn);
            }
        }
    }

    // Call visit function to establish maxLabelLength
    visit(treeData, function(d) {
        totalNodes++;
        maxLabelLength = Math.max(d.name.length, maxLabelLength);

    }, function(d) {
        return d.children && d.children.length > 0 ? d.children : null;
    });


    // sort the tree according to the node names

    function sortTree() {
        tree.sort(function(a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
        });
    }
    // Sort the tree initially incase the JSON isn't in a sorted order.
    sortTree();

    // TODO: Pan function, can be better implemented.

    function pan(domNode, direction) {
        var speed = panSpeed;
        if (panTimer) {
            clearTimeout(panTimer);
            translateCoords = d3.transform(svgGroup.attr("transform"));
            if (direction == 'left' || direction == 'right') {
                translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed;
                translateY = translateCoords.translate[1];
            } else if (direction == 'up' || direction == 'down') {
                translateX = translateCoords.translate[0];
                translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed;
            }
            scaleX = translateCoords.scale[0];
            scaleY = translateCoords.scale[1];
            scale = zoomListener.scale();
            svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")");
            d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")");
            zoomListener.scale(zoomListener.scale());
            zoomListener.translate([translateX, translateY]);
            panTimer = setTimeout(function() {
                pan(domNode, speed, direction);
            }, 50);
        }
    }

    // Define the zoom function for the zoomable tree

    function zoom() {
        svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }


    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
    var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);

    function initiateDrag(d, domNode) {
        draggingNode = d;
        d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none');
        d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show');
        d3.select(domNode).attr('class', 'node activeDrag');

        svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's
            if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back
            else return -1; // a is the hovered element, bring "a" to the front
        });
        // if nodes has children, remove the links and nodes
        if (nodes.length > 1) {
            // remove link paths
            links = tree.links(nodes);
            nodePaths = svgGroup.selectAll("path.link")
                .data(links, function(d) {
                    return d.target.id;
                }).remove();
            // remove child nodes
            nodesExit = svgGroup.selectAll("g.node")
                .data(nodes, function(d) {
                    return d.id;
                }).filter(function(d, i) {
                    if (d.id == draggingNode.id) {
                        return false;
                    }
                    return true;
                }).remove();
        }

        // remove parent link
        parentLink = tree.links(tree.nodes(draggingNode.parent));
        svgGroup.selectAll('path.link').filter(function(d, i) {
            if (d.target.id == draggingNode.id) {
                return true;
            }
            return false;
        }).remove();

        dragStarted = null;
    }

    // define the baseSvg, attaching a class for styling and the zoomListener
    var baseSvg = d3.select("#tree-container").append("svg")
        .attr("width", viewerWidth)
        .attr("height", viewerHeight)
        .attr("class", "overlay")
        .call(zoomListener);


    // Define the drag listeners for drag/drop behaviour of nodes.
    dragListener = d3.behavior.drag()
        .on("dragstart", function(d) {
            if (d == root) {
                return;
            }
            dragStarted = true;
            nodes = tree.nodes(d);
            d3.event.sourceEvent.stopPropagation();
            // it's important that we suppress the mouseover event on the node being dragged. Otherwise it will absorb the mouseover event and the underlying node will not detect it d3.select(this).attr('pointer-events', 'none');
        })
        .on("drag", function(d) {
            if (d == root) {
                return;
            }
            if (dragStarted) {
                domNode = this;
                initiateDrag(d, domNode);
            }

            // get coords of mouseEvent relative to svg container to allow for panning
            relCoords = d3.mouse($('svg').get(0));
            if (relCoords[0] < panBoundary) {
                panTimer = true;
                pan(this, 'left');
            } else if (relCoords[0] > ($('svg').width() - panBoundary)) {

                panTimer = true;
                pan(this, 'right');
            } else if (relCoords[1] < panBoundary) {
                panTimer = true;
                pan(this, 'up');
            } else if (relCoords[1] > ($('svg').height() - panBoundary)) {
                panTimer = true;
                pan(this, 'down');
            } else {
                try {
                    clearTimeout(panTimer);
                } catch (e) {

                }
            }

            d.x0 += d3.event.dy;
            d.y0 += d3.event.dx;
            var node = d3.select(this);
            node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")");
            updateTempConnector();
        }).on("dragend", function(d) {
            if (d == root) {
                return;
            }
            domNode = this;
            if (selectedNode) {
                // now remove the element from the parent, and insert it into the new elements children
                var index = draggingNode.parent.children.indexOf(draggingNode);
                if (index > -1) {
                    draggingNode.parent.children.splice(index, 1);
                }
                if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') {
                    if (typeof selectedNode.children !== 'undefined') {
                        selectedNode.children.push(draggingNode);
                    } else {
                        selectedNode._children.push(draggingNode);
                    }
                } else {
                    selectedNode.children = [];
                    selectedNode.children.push(draggingNode);
                }
                // Make sure that the node being added to is expanded so user can see added node is correctly moved
                expand(selectedNode);
                sortTree();
                endDrag();
            } else {
                endDrag();
            }
        });

    function endDrag() {
        selectedNode = null;
        d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
        d3.select(domNode).attr('class', 'node');
        // now restore the mouseover event or we won't be able to drag a 2nd time
        d3.select(domNode).select('.ghostCircle').attr('pointer-events', '');
        updateTempConnector();
        if (draggingNode !== null) {
            update(root);
            centerNode(draggingNode);
            draggingNode = null;
        }
    }

    // Helper functions for collapsing and expanding nodes.

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    function expand(d) {
        if (d._children) {
            d.children = d._children;
            d.children.forEach(expand);
            d._children = null;
        }
    }

    var overCircle = function(d) {
        selectedNode = d;
        updateTempConnector();
    };
    var outCircle = function(d) {
        selectedNode = null;
        updateTempConnector();
    };

    // Function to update the temporary connector indicating dragging affiliation
    var updateTempConnector = function() {
        var data = [];
        if (draggingNode !== null && selectedNode !== null) {
            // have to flip the source coordinates since we did this for the existing connectors on the original tree
            data = [{
                source: {
                    x: selectedNode.y0,
                    y: selectedNode.x0
                },
                target: {
                    x: draggingNode.y0,
                    y: draggingNode.x0
                }
            }];
        }
        var link = svgGroup.selectAll(".templink").data(data);

        link.enter().append("path")
            .attr("class", "templink")
            .attr("d", d3.svg.diagonal())
            .attr('pointer-events', 'none');

        link.attr("d", d3.svg.diagonal());

        link.exit().remove();
    };

    // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.

    function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

    // Toggle children function

    function toggleChildren(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
        }
        return d;
    }

    // Toggle children on click.

    function click(d) {
        if (d3.event.defaultPrevented) return; // click suppressed
        d = toggleChildren(d);
        update(d);
        centerNode(d);
    }

    function update(source) {
        // Compute the new height, function counts total children of root node and sets tree height accordingly.
        // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
        // This makes the layout more consistent.
        var levelWidth = [1];
        var childCount = function(level, n) {

            if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function(d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
        var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line  
        tree = tree.size([newHeight, viewerWidth]);

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        // Set widths between levels based on maxLabelLength.
        nodes.forEach(function(d) {
            d.y = (d.depth * (maxLabelLength * 10)); //maxLabelLength * 10px
            // alternatively to keep a fixed scale one can set a fixed depth per level
            // Normalize for fixed-depth by commenting out below line
            // d.y = (d.depth * 500); //500px per level.
        });

        // Update the nodes…
        node = svgGroup.selectAll("g.node")
            .data(nodes, function(d) {
                return d.id || (d.id = ++i);
            });

        // Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("g")
            .call(dragListener)
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
            })
            .on('click', click);

        nodeEnter.append("circle")
            .attr('class', 'nodeCircle')
            .attr("r", 0)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        nodeEnter.append("text")
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("dy", ".35em")
            .attr('class', 'nodeText')
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            })
            .style("fill-opacity", 0);

        // phantom node to give us mouseover in a radius around it
        nodeEnter.append("circle")
            .attr('class', 'ghostCircle')
            .attr("r", 30)
            .attr("opacity", 0.2) // change this to zero to hide the target area
        .style("fill", "red")
            .attr('pointer-events', 'mouseover')
            .on("mouseover", function(node) {
                overCircle(node);
            })
            .on("mouseout", function(node) {
                outCircle(node);
            });

        // Update the text to reflect whether node has children or not.
        node.select('text')
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name + "(" + d3.format(',')(d.views) + ")";
            });

        // Change the circle fill depending on whether it has children and is collapsed
        node.select("circle.nodeCircle")
            .attr("r", 4.5)
            .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        // Fade the text in
        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + source.y + "," + source.x + ")";
            })
            .remove();

        nodeExit.select("circle")
            .attr("r", 0);

        nodeExit.select("text")
            .style("fill-opacity", 0);

        // Update the links…
        var link = svgGroup.selectAll("path.link")
            .data(links, function(d) {
                return d.target.id;
            });

        // Enter any new links at the parent's previous position.
        link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
                var o = {
                    x: source.x0,
                    y: source.y0
                };
                return diagonal({
                    source: o,
                    target: o
                });
            });

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
                var o = {
                    x: source.x,
                    y: source.y
                };
                return diagonal({
                    source: o,
                    target: o
                });
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // Append a group which holds all nodes and which the zoom Listener can act upon.
    var svgGroup = baseSvg.append("g");

    // Define the root
    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

    // Layout the tree initially and center on the root node.
    update(root);
    centerNode(root);
});

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
  
	.node {
    cursor: pointer;
  }
  .overlay{
      background-color:#EEE;
  }
   
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
   
  .node text {
    font-size:10px; 
    font-family:sans-serif;
  }
   
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
  .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
  }
  .ghostCircle.show{
      display:block;
  }
  .ghostCircle, .activeDrag .ghostCircle{
       display: none;
  }
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="dndTree.js"></script>
<body>
    <div id="tree-container"></div>
</body>
</html>

portal.json

{"views": 537994, "id": 1, "name": "Workspaces", "children": [{"views": 537994, "id": 9999, "name": "Global workspaces", "children": [{"views": 347107, "id": 6853, "name": "Portal", "children": [{"views": 347107, "id": 6851, "name": "Webportal", "children": [{"views": 4005, "id": 6852, "name": "Department News", "children": [{"views": 1, "id": 12405, "name": "Are You All In"}]}, {"views": 98, "id": 6858, "name": "Security Awareness"}, {"views": 12, "id": 6859, "name": "Department Links", "children": [{"views": 1, "id": 6860, "name": "Department Resource"}]}, {"views": 1600, "id": 6861, "name": "Resource Links"}, {"views": 3263, "id": 6862, "name": "Forms & Policies", "children": [{"views": 1223, "id": 6863, "name": "Department Policy"}, {"views": 1523, "id": 6864, "name": "Department Forms"}, {"views": 517, "id": 11101, "name": "Travel"}]}, {"views": 41, "id": 6867, "name": "Notices"}, {"views": 38, "id": 6873, "name": "Phone Information (VOIP)", "children": [{"views": 19, "id": 6874, "name": "Phone Info. VOIP Resource"}]}, {"views": 37347, "id": 6875, "name": "Important Links"}, {"views": 303, "id": 10648, "name": "Department Pictures", "children": [{"views": 21, "id": 10649, "name": "Christmas Party 2012"}, {"views": 268, "id": 11909, "name": "Christmas Party 2013"}]}, {"views": 203, "id": 11256, "name": "Scheduled Maintenance"}, {"views": 218, "id": 12322, "name": "2014 - 2019 Strategic Plan"}, {"views": 35960, "id": 12611, "name": "E-News Updates", "children": [{"views": 2551, "id": 12641, "name": "E-News Documents"}, {"views": 5381, "id": 12963, "name": "Photo Album", "children": [{"views": 158, "id": 12964, "name": "2015 Department Gathering"}, {"views": 5204, "id": 13676, "name": "State Employees Recognition Week - 2016"}]}]}, {"views": 1258, "id": 12856, "name": "Department Strategic Vision", "children": [{"views": 531, "id": 12857, "name": "Files"}, {"views": 127, "id": 12906, "name": "Manager's Corner", "children": [{"views": 28, "id": 12907, "name": "Blog"}, {"views": 14, "id": 12909, "name": "Files"}, {"views": 1, "id": 12910, "name": "Wiki"}]}, {"views": 47, "id": 12914, "name": "Manager's Links"}, {"views": 39, "id": 12967, "name": "Wiki"}, {"views": 31, "id": 13366, "name": "Manager's Corner Updated", "children": [{"views": 5, "id": 13370, "name": "Files"}, {"views": 2, "id": 13371, "name": "Wiki"}]}]}, {"views": 3652, "id": 12882, "name": "The Knowledge Vault", "children": [{"views": 19, "id": 12885, "name": "Files"}]}, {"views": 2493, "id": 12886, "name": "Microsoft Resources ", "children": [{"views": 61, "id": 12904, "name": "Resource Topics", "children": [{"views": 15, "id": 12912, "name": "FAQ Links"}, {"views": 22, "id": 12913, "name": "Q & A Links"}]}]}, {"views": 19, "id": 12915, "name": "What\u2019s Happening in DOAA", "children": [{"views": 3, "id": 12919, "name": "Files"}]}, {"views": 388, "id": 12935, "name": "EPMS Project Groups"}, {"views": 17, "id": 12954, "name": "Professional Training Program", "children": [{"views": 3, "id": 12957, "name": "PTP Meeting and Presentation Notes"}, {"views": 14, "id": 12958, "name": "PTP Other Files"}]}, {"views": 18, "id": 13605, "name": "Electronic Forms"}, {"views": 1516, "id": 13760, "name": "Go Figure", "children": [{"views": 165, "id": 13762, "name": "Strategic Vision"}, {"views": 452, "id": 13763, "name": "The Knowledge Vault"}, {"views": 119, "id": 13764, "name": "Defending State Auditor"}, {"views": 780, "id": 13765, "name": "Related Articles"}]}, {"views": 1, "id": 13761, "name": "Go Figure Intro"}]}]}]}, {"views": 190887, "id": 29, "name": "Division workspaces", "children": [{"views": 30266, "id": 6865, "name": "Admin", "children": [{"views": 2568, "id": 6869, "name": "Admin Description"}, {"views": 35, "id": 394, "name": "Admin Photo Album", "children": [{"views": 3, "id": 11747, "name": "Excellence in HR"}, {"views": 9, "id": 11746, "name": "Kaiser Permanente Walk 2013"}]}, {"views": 2, "id": 384, "name": "Admin Workspace", "children": [{"views": 2, "id": 385, "name": "Wiki"}]}, {"views": 1916, "id": 6866, "name": "Benefits Information", "children": [{"views": 3, "id": 13346, "name": "Benefits 2015"}, {"views": 19, "id": 13873, "name": "Open Enrollment presentation October 2016"}]}, {"views": 101, "id": 11428, "name": "Congratulations!"}, {"views": 23162, "id": 11585, "name": "CREW Team Workspace", "children": [{"views": 6494, "id": 11586, "name": "Care Team Surveys"}, {"views": 63, "id": 11211, "name": "CREW Team Calendar"}, {"views": 16605, "id": 11644, "name": "CREW Team Photos", "children": [{"views": 2467, "id": 13373, "name": "2015 BooBerry Breakfast"}, {"views": 2361, "id": 13876, "name": "2016 BooBerry Breakfast"}, {"views": 330, "id": 11864, "name": "BooBerry Breakfast 2013"}, {"views": 906, "id": 12562, "name": "BooBerry Breakfast 2014"}, {"views": 7568, "id": 13916, "name": "Chicken Biscuit Holiday Party 2016"}, {"views": 775, "id": 12755, "name": "Chicken Biscuit Party 2014"}, {"views": 1948, "id": 13512, "name": "Chicken Biscuit Party 2015"}, {"views": 198, "id": 11865, "name": "Fall Sports Spectacular 2013"}]}]}, {"views": 1865, "id": 6868, "name": "Information Links"}, {"views": 388, "id": 7894, "name": "Job SPEC Files"}, {"views": 121, "id": 6870, "name": "News & Announcements"}]}, {"views": 143037, "id": 6871, "name": "EAD", "children": [{"views": 1591, "id": 6872, "name": "EAD Description"}, {"views": 138299, "id": 340, "name": "EAD Workspace", "children": [{"views": 1, "id": 3370, "name": "Augusta", "children": [{"views": 1, "id": 3380, "name": "Photo album"}]}, {"views": 268, "id": 5678, "name": "Blog"}, {"views": 15, "id": 345, "name": "Calendar"}, {"views": 4, "id": 3381, "name": "Calhoun", "children": [{"views": 3, "id": 3391, "name": "Photo album"}, {"views": 1, "id": 3382, "name": "Wiki"}]}, {"views": 7, "id": 12222, "name": "EAD Discussions", "children": [{"views": 7, "id": 12223, "name": "Audit Program Discussion"}]}, {"views": 131209, "id": 7323, "name": "EAD Home", "children": [{"views": 84, "id": 11405, "name": "COAMs"}, {"views": 18895, "id": 7311, "name": "Colleges & Universities"}, {"views": 1140, "id": 7335, "name": "Employee Resources"}, {"views": 81, "id": 11364, "name": "Latest News"}, {"views": 114, "id": 11404, "name": "Regional Educational Service Agency (RESA)"}, {"views": 61356, "id": 7333, "name": "School Districts (LEA)"}, {"views": 1043, "id": 7312, "name": "Technical Colleges"}, {"views": 18730, "id": 7334, "name": "Templates & IT Resources", "children": [{"views": 6, "id": 8240, "name": "Updated Template Work Papers"}]}, {"views": 2032, "id": 7336, "name": "Training & Other Resources", "children": [{"views": 4, "id": 11884, "name": "FY2013 November LEA Training Discussion"}]}]}, {"views": 40, "id": 2930, "name": "EATL Workspace", "children": [{"views": 36, "id": 2936, "name": "Discussion"}]}, {"views": 26, "id": 2684, "name": "IT (Kristina, James)", "children": [{"views": 15, "id": 453, "name": "Risk Based Template"}]}, {"views": 1, "id": 10595, "name": "Saved School District Trackers"}, {"views": 23, "id": 2688, "name": "Template and IT Resources", "children": [{"views": 1, "id": 6406, "name": "2010 LEA Season Caseware Template", "children": [{"views": 1, "id": 6407, "name": "File Folder"}]}, {"views": 3, "id": 5886, "name": "College Season 2010", "children": [{"views": 3, "id": 5887, "name": "File Folder"}]}, {"views": 2, "id": 3017, "name": "EAD Audit Toolkit (ACL)"}, {"views": 14, "id": 2689, "name": "IT Group Wiki"}]}, {"views": 5, "id": 2908, "name": "WATL Workspace", "children": [{"views": 4, "id": 5060, "name": "WATL Tasks", "children": [{"views": 4, "id": 5062, "name": "Show All WATL Tasks"}]}]}]}, {"views": 6, "id": 6893, "name": "News & Announcements"}, {"views": 163, "id": 6894, "name": "Regional Office Numbers"}, {"views": 940, "id": 6895, "name": "Resource Links"}]}, {"views": 2831, "id": 6921, "name": "PAD", "children": [{"views": 19, "id": 6923, "name": "Information Links"}, {"views": 9, "id": 8333, "name": "News from PAD"}, {"views": 2683, "id": 55, "name": "PAD Workspace Home", "children": [{"views": 11, "id": 7337, "name": "Announcements"}, {"views": 1, "id": 13877, "name": "JoAnn's Test PM workspace", "children": [{"views": 1, "id": 13878, "name": "Milestones"}]}, {"views": 2262, "id": 7194, "name": "Resources", "children": [{"views": 2262, "id": 7314, "name": "PAD Resources"}]}, {"views": 376, "id": 7195, "name": "Training", "children": [{"views": 376, "id": 7493, "name": "Training Resources"}]}]}, {"views": 76, "id": 6922, "name": "PAO Description"}, {"views": 10, "id": 6924, "name": "Resource Links"}]}, {"views": 7076, "id": 12829, "name": "PSPD", "children": [{"views": 57, "id": 12851, "name": "Information Links"}, {"views": 20, "id": 12850, "name": "PSPD Description"}, {"views": 1039, "id": 12840, "name": "PSPD Workspace", "children": [{"views": 1019, "id": 12844, "name": "Files"}, {"views": 11, "id": 12846, "name": "Photo Album"}, {"views": 1, "id": 12848, "name": "Tasks"}, {"views": 6, "id": 12847, "name": "Wiki"}]}]}, {"views": 2455, "id": 6926, "name": "SGD", "children": [{"views": 730, "id": 6929, "name": "Information Links"}, {"views": 404, "id": 6930, "name": "Reference Materials"}, {"views": 447, "id": 329, "name": "SGD Workspace", "children": [{"views": 53, "id": 473, "name": "Frequently Asked Questions", "children": [{"views": 4, "id": 829, "name": "CaseWare FAQ"}, {"views": 10, "id": 833, "name": "Checksheet and EE FAQ"}, {"views": 6, "id": 832, "name": "Federal Compliance FAQ"}, {"views": 17, "id": 1972, "name": "General Auditing FAQ", "children": [{"views": 7, "id": 12345, "name": "identify instances of noncompliance with other laws"}]}, {"views": 14, "id": 831, "name": "Other Software FAQ"}]}, {"views": 1, "id": 11244, "name": "IT Users "}, {"views": 381, "id": 7754, "name": "SGD Files", "children": [{"views": 18, "id": 7698, "name": "Audit Documentation and Related"}, {"views": 71, "id": 4201, "name": "Audit Training "}, {"views": 7, "id": 7696, "name": "Federal Compliance and Related"}, {"views": 20, "id": 7697, "name": "Findings Management and Related "}, {"views": 68, "id": 7695, "name": "SGD Informational "}, {"views": 196, "id": 7674, "name": "Software Training"}]}]}, {"views": 510, "id": 6927, "name": "State Government Division"}]}, {"views": 147, "id": 6931, "name": "SRD", "children": [{"views": 36, "id": 6933, "name": "Information Links"}, {"views": 1, "id": 6934, "name": "News & Announcements"}, {"views": 42, "id": 6935, "name": "Resource Links"}, {"views": 43, "id": 6932, "name": "SRD Description"}]}]}]}