JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<link rel="stylesheet" href="http://philogb.github.io/jit/static/v20/Jit/Examples/css/base.css">
<body>
    <div id="container">
        <div id="left-container">
            <div class="text">
                 <h4>
Force Directed Static Graph    
        </h4> A static JSON Graph structure is used as input for this visualization.
                <br />
                <br />You can <b>zoom</b> and <b>pan</b> the visualization by <b>scrolling</b> and <b>dragging</b>.
                <br />
                <br />You can <b>change node positions</b> by <b>dragging the nodes around</b>.
                <br />
                <br />The clicked node's connections are displayed in a relations list in the right column.
                <br />
                <br />The JSON static data is customized to provide different node types, colors and widths.</div>
            <div id="id-list"></div>
            <div style="text-align:center;"><a href="example1.code.html">See the Example Code</a>

            </div>
        </div>
        <div id="center-container">
            <div id="infovis"></div>
        </div>
        <div id="right-container">
            <div id="inner-details"></div>
        </div>
        <div id="log"></div>
    </div>
</body>

</html>

CSS

#inner-details {
    font-size:12px;
}
span.close {
    color:#FF5555;
    cursor:pointer;
    font-weight:bold;
    margin-left:3px;
}
span.name {
    cursor: pointer;
}
/*TOOLTIPS*/
 .tip {
    text-align: left;
    width:auto;
    max-width:500px;
}
.tip-title {
    font-size: 11px;
    text-align:center;
    margin-bottom:2px;
}

JavaScript

/*var json = [{
    "adjacencies": [
        "graphnode21", {
        "nodeTo": "graphnode1",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#557EAA"
        }
    }, {
        "nodeTo": "graphnode13",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo": "graphnode14",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#557EAA"
        }
    }, {
        "nodeTo": "graphnode15",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#557EAA"
        }
    }, {
        "nodeTo": "graphnode16",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#557EAA"
        }
    }, {
        "nodeTo": "graphnode17",
            "nodeFrom": "graphnode0",
            "data": {
            "$color": "#557EAA"
        }
    }],
        "data": {
        "$color": "#83548B",
            "$type": "circle",
            "$dim": 10
    },
        "id": "graphnode0",
        "name": "graphnode0"
}, {
    "adjacencies": [{
        "nodeTo": "graphnode2",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#557EAA"
        }
    }, {
        "nodeTo": "graphnode4",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo": "graphnode5",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo": "graphnode6",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo": "graphnode7",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo": "graphnode8",
            "nodeFrom": "graphnode1",
            "data": {
            "$color": "#909291"
        }
    }, {
        "nodeTo":...