example using d3 tree layout

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

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <select id="style">
        <option></option>
        <option>tree</option>
        <option>cluster</option>
        <option>partition</option>
        <option>pack</option>
    </select>
</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" }
            ]
        }
    ]
};

$(function() {
    $('#style').change(function() {
        var style = $('#style').val();
        restart(style);
    });  
});

function restart(style) {
    var containerName =...