example using d3 tree layout

from tutorial in http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/

by hrabinowitz

HTML

<form>
<input type="button" id="styleButton" value="style"></input>
</form>
<br>
<div id="container">
</div>

CSS

.link {
    stroke:blue;
    fill:none;
}
.node circle {
    fill:brown;
    stroke:black;
}
.node text {
    stroke: none;
    font: 11px sans-serif;
}

JavaScript

var treeData = {
    name: "The_universe",
    contents: [
        {
            name: "Applications",
            contents: [
                { name: "Mail.app" },
                { name: "iPhoto.app" },
                { name: "Keynote.app" },
                { name: "iTunes.app" },
                { name: "XCode.app" },
                { name: "Numbers.app" },
                { name: "Pages.app" }
            ]
        },
        {
            name: "System",
            contents: []
        },
        {
            name: "Library",
            contents: [
                {
                    name: "Application Support",
                    contents: [
                        { name: "Adobe" },
                        { name: "Apple" },
                        { name: "Google" },
                        { name: "Microsoft" }
                    ]
                },
                {
                    name: "Languages",
                    contents: [
                        { name: "Ruby" },
                        { name: "Python" },
                        { name: "Javascript" },
                        { name: "C#" }
                    ]
                },
                {
                    name: "Developer",
                    contents: [
                        { name: "4.2" },
                        { name: "4.3" },
                        { name: "5.0" },
                        { name: "Documentation" }
                    ]
                }
            ]
        },
        {
            name: "opt",
            contents: []
        },
        {
            name: "Users",
            contents: [
                { name: "pavanpodila" },
                { name: "admin" },
                { name: "test-user" }
            ]
        }
    ]
};

var containerName = document.getElementById('container');
var size = {height: 600, width: 900};
//var size = 
var maxLabelLength = 15;
var options = {nodeRadius: 5, fontSize:10};

var tree =...