JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="holder"></div>

CSS

path {marker-start:url("#Triangle")}

JavaScript

$j = jQuery.noConflict();
$j(function() {

    var WORKSPACE_WIDTH = 760;
    var WORKSPACE_HEIGHT = 700;
    var SHAPE_SPACING = 110;
    var SHAPE_HEIGHT = 40;
    var SHAPE_RADIUS = 10;

    var MARGIN = 20;
    var ARROW_LENGTH = 10;
    var ARROW_WIDTH = 10;

    var ADMIN_COLOR = "rgb(211,102,42)"
    var MANAGER_COLOR = "rgb(103,181,218)"
    var STANDARD_COLOR = "rgb(137,163,20)"
    var ROLE_COLORS = [STANDARD_COLOR, MANAGER_COLOR, ADMIN_COLOR]

    var shapes = new Object;
    var texts = new Object;
    var users_with_direct_employees = new Object;
    var data = new Object;


    Raphael.fn.connection = function(obj1, obj2, line, bg) {
        // obj1 is the source
        // obj2 is the destination
        // obj1 = obj1.box;
        // obj2 = obj2.box;
        if (obj1.line && obj1.from && obj1.to) {
            line = obj1;
            obj1 = line.from;
            obj2 = line.to;
        }
        var bb1 = obj1.getBBox(),
            bb2 = obj2.getBBox(),
            p = [{
                x: bb1.x + bb1.width / 2,
                y: bb1.y - 1},
            {
                x: bb1.x + bb1.width / 2,
                y: bb1.y + bb1.height + 1},
            {
                x: bb1.x - 1,
                y: bb1.y + bb1.height / 2},
            {
                x: bb1.x + bb1.width + 1,
                y: bb1.y + bb1.height / 2},
            {
                x: bb2.x + bb2.width / 2,
                y: bb2.y - 1},
            {
                x: bb2.x + bb2.width / 2,
                y: bb2.y + bb2.height + 1},
            {
                x: bb2.x - 1,
                y: bb2.y + bb2.height / 2},
            {
                x: bb2.x + bb2.width + 1,
                y: bb2.y + bb2.height / 2}],
            d = {},
            dis = [];
        for (var i = 0; i < 4; i++) {
            for (var j = 4; j < 8; j++) {
                var dx = Math.abs(p[i].x - p[j].x),
                    dy = Math.abs(p[i].y - p[j].y);
                if ((i == j...