JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<html>
<head><title>Hello</title>
<style>

.link line {
  stroke: #696969;
}

.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}

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

</style>
</head>
<body>
</body>
</html>

JavaScript

(function(){
  var width, height, rules, map, tasks, links, nodes, svg, tick, radius, force, link, node;
  width = 960;
  height = 500;
  rules = [['L5', 'L2'], ['L5', 'L2'], ['L4', 'L2'], ['L2', 'L1'], ['L3', 'L1'], ['L1', 'C1'],  ['C1', 'R2'], ['C1', 'R3'], ['R2', 'R4'], ['R3', 'R6'], ['R3', 'R7']];
  map = d3.map();
  rules.forEach(function(rule){
    map.set(rule[0], {
      fixed: false
    });
    return map.set(rule[1], false);
  });
  map.set('C1', {
    fixed: true,
    x: 100,
    y: height / 2
  });
  tasks = map.keys();
  links = rules.map(function(rule){
    return {
      source: tasks.indexOf(rule[0]),
      target: tasks.indexOf(rule[1])
    };
  });
  nodes = tasks.map(function(k){
    var entry;
    entry = {
      name: k
    };
    if (map.get(k).fixed) {
      entry.fixed = true;
      entry.x = map.get(k).x;
      entry.y = map.get(k).y;
    }
    return entry;
  });
  svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
 
  tick = function(){
    link.selectAll("line").attr("x1", function(d){
      return d.source.x;
    }).attr("y1", function(d){
      return d.source.y;
    }).attr("x2", function(d){
      return d.target.x;
    }).attr("y2", function(d){
      return d.target.y;
    }).attr("marker-end", "url(#arrow)");
    node.attr("transform", function(d){
      return "translate(" + d.x + "," + d.y + ")";
    });
  };
  radius = d3.scale.sqrt().range([0, 6]);
  force = d3.layout.force().size([width / 2, height]).charge(-400).linkDistance(function(d){
    return 40;
  });
  force.nodes(nodes).links(links).on("tick", tick).start();
  link = svg.selectAll(".link").data(links).enter().append("g").attr("class", "link");
  link.append("line").style("stroke-width", 1).attr("marker-end", "url(#arrow)");
  node = svg.selectAll(".node").data(nodes).enter().append("g").attr("class", "node")
  .on("mouseover", mouseoverC)
  .on("mouseout", mouseoutC)
  .call(force.drag);
    
    
    
 ...