d3.js Simple Tree and Cluster Demo

Displaying the same JSON data as tree and cluster. I rather have a transition, still working on it....

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Tree and Cluster Demo</title>
        <script src="https://d3js.org/d3.v2.js"></script>     
        <style>
            svg {
                border: solid 1px #ccc;
                font: 10px sans-serif;

}
            .link {
                fill: none;
                stroke: #ccc;
                stroke-width: 1.5px;
            }
        </style>

</head>
    <body>
        <button id="tree">Tree</button>
        <button id="cluster">Cluster</button>
        <div id="viz"></div>

//JSON object with the data
            var treeData = {"name" : "A", "info" : "tst", "children" : [
                    {"name" : "A1", "children" : [ 
                            {"name" : "A12" }, 
                            {"name" : "A13" }, 
                            {"name" : "A14" }, 
                            {"name" : "A15" }, 
                            {"name" : "A16" }
                        ] }, 
                    {"name" : "A2", "children" : [ 
                            {"name" : "A21" }, 
                            {"name" : "A22", "children" : [ 
                                    {"name" : "A221" }, 
                                    {"name" : "A222" }, 
                                    {"name" : "A223" }, 
                                    {"name" : "A224" }
                                ]}, 
                            {"name" : "A23" }, 
                            {"name" : "A24" }, 
                            {"name" : "A25" }] }, 
                    {"name" : "A3", "children": [
                            {"name" : "A31", "children" :[
                                    {"name" : "A311" }, 
                                    {"name" : "A312" }, 
                                    {"name" : "A313" }, 
                                    {"name" : "A314" }, 
                                    {"name" : "A315" }
                                ]}] }
                ]};

update(2);

d3.select("#tree")
            .on("click", function(d,i) {
                update(2)});
            d3.select("#cluster")
            .on("click", function(d,i) {
                update(1)});

function update(type) {
            
                d3.select("svg")
                .remove();

// Create a svg canvas
                var vis = d3.select("#viz").append("svg:svg")
                .attr("width", 400)
                .attr("height", 300)
                .append("svg:g")
                .attr("transform", "translate(40, 0)");

if (type==1) 
                    var layout = d3.layout.cluster().size([300,300]);
                else
                    var layout = d3.layout.tree().size([300,300]);

var diagonal = d3.svg.diagonal()
                // change x and y (for the left to right tree)
                .projection(function(d) { return [d.y, d.x]; });

// Preparing the data for the tree layout, convert data into an array of nodes
                var nodes = layout.nodes(treeData);
                // Create an array with all the links
                var links = layout.links(nodes);

var link = vis.selectAll("pathlink")
                .data(links)
                .enter().append("svg:path")
                .attr("class", "link")
                .attr("d", diagonal)

var node = vis.selectAll("g.node")
                .data(nodes)
                .enter().append("svg:g")
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

// Add the dot at every node
                node.append("svg:circle")
                .attr("r", 3.5);

// place the name atribute left or right depending if children
                node.append("svg:text")
                .attr("dx", function(d) { return d.children ? -8 : 8; })
                .attr("dy", 3)
                .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
                .text(function(d) { return d.name; });
            }

</script>
    </body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js