JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id=tree></div>

CSS

html {
    font: 10px sans-serif;
}
svg {
    border: 1px solid silver;
}
.node {
    cursor: pointer;
}
.node circle {
    stroke: steelblue;
    stroke-width: 1.5px;
}
.link {
    fill: none;
    stroke: lightgray;
    stroke-width: 1.5px;
}

JavaScript

var json = {
    "name": "11279 Perry Hwy Wexford PA 150909303 US",
        "children": [{
        "name": "SARALYN VOGEL",
            "label": "A"
    }, {
        "name": "KIMBERLY GORDON",
            "label": "A"
    }, {
        "name": "RANA ZIADEH",
            "label": "C"
    }, {
        "name": "SUN PARK",
            "label": "C"
    }, {
        "name": "JAMES ROMBERGER",
            "label": "B"
    }, {
        "name": "VICTORIA KISSLINGER",
            "label": "B"
    }, {
        "name": "DOUGLAS KRESS",
            "label": "E"
    }, {
        "name": "BARBARA MCNULTY",
            "label": "E"
    }, {
        "name": "KRISTIN FREDERICK",
            "label": "E"
    }, {
        "name": "REBECCA BICKEL",
            "label": "F"
    }, {
        "name": "MARGARET LAGNESE",
            "label": "G"
    }, {
        "name": "SONIKA BHATNAGAR",
            "label": "H"
    }, {
        "name": "RICHARD LANZ",
            "label": "G"
    }, {
        "name": "DAWN GOTKIEWICZ",
            "label": "A"
    }]
};

var jsonChild = {
    "name": "SARALYN VOGEL",
        "children": [{
        "name": "956006449",
         "label": "x"
    }, {
        "name": "9151624079",
        "label": "y"
    }, {
        "name": "F99540",
        "label": "z"
    }, {
        "name": "0016618540005",
        "label": "x"
    }]
};

var width = 700;
var height = 650;
var maxLabel = 150;
var duration = 500;
var radius = 5;

var i = 0;
var root;

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

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.y, d.x];
});

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

root = json;
root.x0 = height / 2;
root.y0 = 0;

root.children.forEach(collapse);

function update(source) {
    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse();
    var links =...