JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<button type="button" id="submit_button" style="float:right; margin-right: 25px;margin-top:20px;"> SUBMIT </button>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

<style>

    .node {
        stroke: #fff;
        stroke-width: 2px;
    }

    .link {
        fill: none;
        stroke: #000;
    }

</style>

JavaScript

var width = 960,
            height = 500;

    var tree = d3.layout.tree()
            .size([width - 20, height - 20]);

    var root = {},
            nodes = tree(root);

    root.parent = root;
    root.px = root.x;
    root.py = root.y;

    var diagonal = d3.svg.diagonal();

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(10,10)");

    var node = svg.selectAll(".node"),
            link = svg.selectAll(".link");

    var duration = 750;

    $("#submit_button").click(function() {
        update();
    });
        function update() {
            if (nodes.length >= 500) return clearInterval(timer);

            // Add a new node to a random parent.
            var n = {id: nodes.length},
                    p = nodes[Math.random() * nodes.length | 0];
            if (p.children) p.children.push(n); else p.children = [n];
            nodes.push(n);

            // Recompute the layout and data join.
            node = node.data(tree.nodes(root), function (d) {
                return d.id;
            });
            link = link.data(tree.links(nodes), function (d) {
                return d.source.id + "-" + d.target.id;
            });

            // Add entering nodes in the parent’s old position.
            var gelement = node.enter().append("g");
            
            gelement.append("circle")
                    .attr("class", "node")
                    .attr("r", 4)
                    .attr("cx", function (d) {
                        return d.parent.px;
                    })
                    .attr("cy", function (d) {
                        return d.parent.py;
                    });

            // Add entering links in the parent’s old position.
            link.enter().insert("path", ".g.node")
                    .attr("class", "link")
                    .attr("d", function (d) {
                     ...