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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    
</head> 

<body> 
<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>
<div id="chart"></div>
<div data-role="footer" data-position="fixed">
<div data-role="fieldcontain">
<input type="range" name="slider1" id="slider1" value="5" min="0" max="5"></div>

</div>
</body>
</html>

CSS

#slider1 {
  
}

.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,
    "this_step": 5,
    "total": 5,
    "id": "0.0",   
    "children": [
        {
        "name": "first level child 1", 
        "id": "0.1", 
        "step":2,
        "children": [
            {
            "name": "second level child 1",                      "id": "0.1.1", 
            "step": 3,
            "children": [
                {
                "name": "third level child 1",
                "id": "0.1.1.1", 
                "step": 4,
                "children": []},
            {
                "name": "third level child 2", 
                "id": "0.1.1.2", 
                "step": 5,
                "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,parseInt(data.total));

function update(source,_step) {
    //root.children.filter(function(d) { return d.step <= _step; });
    // Compute the flattened node list. TODO use d3.layout.hierarchy.
    var nodes = tree.nodes(root).filter(function(d) { return d.step <= _step; });

    // 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",...