JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//visjs.org/dist/vis.css">
<script src="//visjs.org/dist/vis.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script>
<!-- <button id="test">Update</button> -->
<!-- <div id="tooltip" class='vis-network-tooltip'>
   <p>Probabilities</p> 
</div> -->
<div id="mynetwork">

</div>

CSS

body {
  font: 10pt sans;
}
#mynetwork {
  width: 100%;
  height: 700px;
  border: 1px solid lightgray;
}
#tooltip2{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 180px;
  height: 70px;
  background: none;
  border: none;
}
#tooltip p{
  margin: 0 10px;
  font-weight: bold;
  font-family: Helvetica;
}
text.value{
  font-weight: bold;
}
text.value.confidence{
  font-weight: normal;
  fill: #aaa;
}

JavaScript

var nodes = null;
var edges = null;
var network = null;
var directionInput = {value: "UD"}

function destroy() {
    if (network !== null) {
        network.destroy();
        network = null;
    }
}

function draw() {
  destroy();
  nodes = [];
  edges = [];
  var connectionCount = [];

  // randomly create some nodes and edges
  for (var i = 0; i < 15; i++) {
      nodes.push({id: i,label: String(i)});
  }
  edges.push({from: 0, to: 1 });
  edges.push({from: 0, to: 6 });
  edges.push({from: 0, to: 13});
  edges.push({from: 0, to: 11});
  edges.push({from: 1, to: 2 });
  edges.push({from: 2, to: 3 });
  edges.push({from: 2, to: 4 });
  edges.push({from: 3, to: 5 });
  edges.push({from: 1, to: 10});
  edges.push({from: 1, to: 7 });
  edges.push({from: 2, to: 8 });
  edges.push({from: 2, to: 9 });
  edges.push({from: 3, to: 14});
  edges.push({from: 1, to: 12});
  nodes[0]["level"] = 0;
  nodes[1]["level"] = 1;
  nodes[2]["level"] = 3;
  nodes[3]["level"] = 4;
  nodes[4]["level"] = 4;
  nodes[5]["level"] = 5;
  nodes[6]["level"] = 1;
  nodes[7]["level"] = 2;
  nodes[8]["level"] = 4;
  nodes[9]["level"] = 4;
  nodes[10]["level"] = 2;
  nodes[11]["level"] = 1;
  nodes[12]["level"] = 2;
  nodes[13]["level"] = 1;
  nodes[14]["level"] = 5;
    
  /*
  nodes.forEach(function(n, i){
    n.title = "Node " + i
  })
  */
  var colpal = d3.scale.category10()
    
  nodes.forEach(function(n, i){
    var p = Math.round(Math.random()*100)/100
    var c1 = chroma(colpal(1)).alpha(1 - p).css()
    var c2 = chroma(colpal(2)).alpha(p).css()
    //n.prob = [p*0.5, 1 - p, p*0.5]  
    n.prob = {C1: p, C2: 1 - p}
    n.color = p < 1 - p ? c1 : c2;
    n.support = Math.round(Math.random()*100)/100
  })
  

  // create a network
  var container = document.getElementById('mynetwork');
  data = {
    nodes: new vis.DataSet(nodes),
    edges: new vis.DataSet(edges)
  };
   
  allNodes = data.nodes.get({returnType:"Object"});
  for (var nodeId in allNodes){
    allNodes[nodeId]._color =...