JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<div id="container">
    <div id="left-container">
            <div id="id-list"></div>
        <div id="center-container">
        <div id="infovis"></div>    
    </div>
    <div id="right-container">
        <div id="inner-details"></div>
    </div>
</div>
<div id="log"></div>

CSS

body {
    font-family: Arial;
}
#center-container {
    background-color:#1a1a1a;
    color:#ccc;
}

#infovis {
    width:100%;
    height:600px;
}

.tip-title {
    color: lightblue;
    text-decoration: underline;
}
.tip-text {
    color: yellow;
}

JavaScript

var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();


var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};

function init(){
  // init data
  var json = [
	// first node
    {
        id: "graphnode1",
        name: "A graph node (#1)",
        data: {
            $color: "#00FF00",
            $type: "circle",
            $dim: 10
        },
		adjacencies: [
			"graphnode2",
			{
				nodeTo: "graphnode3",
				data: {
					"$color": "#0000FF"
				}
			},
			"graphnode3",
			{
				nodeTo: "graphnode2",
				data: {
					"$color": "#00FF00"
				}
			}
		]
    },
    // second node
    {
        data: {
            $color: "#00FFFF",
            $type: "triangle",
            $dim: 10
        },
        id: "graphnode2",
        name: "Another graph node (#2)"
    },
    // third node
    {
        data: {
            $color: "#0000FF",
            $type: "square",
            $dim: 10
        },
        id: "graphnode3",
        name: "And another (#3)"
    }
];
  // end
  // init ForceDirected
  var fd = new $jit.ForceDirected({
    //id of the visualization...