JSFiddle - React, Tailwind, and code Playground

by murray_3

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<body>
    <div id="chart"></div>

</body>

CSS

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var data = {
    "name": "My Root", 
    "step": 1,
    "total": 1,
    "id": "0.0",   
    "children": [
        {
        "name": "first level child 1", 
        "id": "0.1", 
        "step": 1,
        "children": [
            {
            "name": "second level child 1",                      "id": "0.1.1", 
            "step": 1,
            "children": [
                {
                "name": "third level child 1",
                "id": "0.1.1.1", 
                "step": 1,
                "children": []},
            {
                "name": "third level child 2", 
                "id": "0.1.1.2", 
                "step": 1,
                "children": []}

            ]},
                    ]}
    ]
};


var w = 960,
    h = 800,
    i = 0,
    barHeight = 20,
    barWidth = w * .8,
    duration = 400,
    root;

var tree = d3.layout.tree().size([h, 100]);

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

var vis = d3.select("#chart").append("svg:svg").attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(20,30)");

data.x0 = 0;
data.y0 = 0;
update(root = data);

function update(source) {

    // Compute the flattened node list. TODO use d3.layout.hierarchy.
    var nodes = tree.nodes(root);

    // Compute the "layout".
    nodes.forEach(function(n, i) {
        n.x = i * barHeight;
    });

    // Update the nodes…
    var node = vis.selectAll("g.node").data(nodes, function(d) {
        return d.id || (d.id = ++i);
    });

    var nodeEnter = node.enter().append("svg:g").attr("class", "node").attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    }).style("opacity", 1e-6);

    // Enter any new nodes at the parent's previous position.
    nodeEnter.append("svg:rect").attr("y", -barHeight / 2).attr("height",  barHeight).attr("width", barHeight).attr("fill","white").on("click", function(d) {
        if (d.selected) {
            d.selected =...