Tree Visualization

by SwampFall

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<textarea id="input">[0,1,[[5,[[3],[6]]],[4],[2]]]</textarea><br>
<button id="btnShow" onclick="read();">
Show
</button><br>
<div id="viz"></div>

CSS

html, body {
  margin: 3px;
  padding: 0px;
}
#input {
  width: 99%;
  height: 50px;
  padding: 3px;
  margin: 0px;
}
#viz {
  width: 100%;
  height: 90vh;
}

JavaScript

var trees = [];

function read() {
	var input = document.querySelector("#input").value;
  trees = input.split(/\r?\n/);
  show(0);
}

function getPos(s, p) {
  var t = s;
  for (let j = 0; j < p.length - 1; j++) {
    t = t[p[j]];
  }
  return t;
}

function getNextPath(s, p) {
	var pl = p.length - 1;
  var pos = getPos(s, p);
  if (p[pl] == pos.length - 1) {
    p.pop();
    while (p.length > 0) {
      p[p.length - 1]++;
      let t = getPos(s, p);
      if (t && t.length > p[p.length - 1] && t[p[p.length - 1]].constructor === Array) {
        p.push(0);
        return p;
      }
      p.pop();
    }
    return undefined;
  } else {
  	p[pl]++;
    if (pos[p[pl]].constructor === Array) {
    	p.push(0);
      p.push(0);
    }
    return p;
  }
}

function show(i) {
	var s = JSON.parse(trees[i]);
  var p = [0];
  
  var n_array = [];
  var e_array = [];
 	
  var index = 0;
  
  while (p != undefined) {
  	var n = getPos(s, p);
    n = n[p[p.length - 1]];
    var c = "red";
    if (n % 2 == 0) {
    	c = "blue";
    }
    n_array.push({id:index, label: '' + n.toString(), color: c, font:{size:30}, shape: 'big dot'});
    index++;
    p = getNextPath(s,p);
  }
  
  var nodes = new vis.DataSet(n_array);
  var edges = new vis.DataSet(e_array);

  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
  	nodes: {borderWidth: 2}
  };
  var container = document.querySelector("#viz");
  var network = new vis.Network(container, data, options);
}