vis.js playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.css">
<div id="mynetwork"></div>

CSS

#mynetwork {
            width: 100%;
            height: 300px;
        }

JavaScript

var nodes = new vis.DataSet([
		 {id:1,label:"tree root", x:0,  y:0}
     
    ,{id:2,label:"subitem_angle", x:0,  y:100, hidden:true}
    ,{id:3,label:"subitem", x:100,y:100}
    ,{id:4,label:"subitem_angle", x:0,  y:200, hidden:true}
    ,{id:5,label:"subitem2",x:100,y:200}
    
    ,{id:6,label:"intermediate_angle", x:100,  y:150, hidden:true}
    ,{id:7,label:"intermediate",x:200,y:150}
    ,{id:8,label:"intermediate_angle", x:300,  y:150, hidden:true}
    
    ,{id:9,label:"leaf_angle", x:300,  y:100, hidden:true}
    ,{id:10,label:"leaf_angle", x:300,  y:130, hidden:true}
    ,{id:11,label:"leaf_angle", x:300,  y:160, hidden:true}
    ,{id:12,label:"leaf_angle", x:300,  y:190, hidden:true}
    ,{id:13,label:"leaf_angle", x:300,  y:220, hidden:true}
    ,{id:14,label:"leaf", x:350,  y:100}
    ,{id:15,label:"leaf", x:350,  y:130}
    ,{id:16,label:"leaf", x:350,  y:160}
    ,{id:17,label:"leaf", x:350,  y:190}
    ,{id:18,label:"leaf", x:350,  y:220}
]);
var edges = new vis.DataSet([
     {from:1, to:2}
    
    ,{from:2, to:3}
    ,{from:2, to:4}
    ,{from:4, to:5}
    ,{from:3, to:6}
    
    ,{from:6, to:7}
    ,{from:7, to:8}
    
    ,{from:8, to:9}
    ,{from:8, to:10}
    ,{from:8, to:11}
    ,{from:8, to:12}
    ,{from:8, to:13}
    
    ,{from:9, to:14}
    ,{from:10, to:15}
    ,{from:11, to:16}
    ,{from:12, to:17}
    ,{from:13, to:18}
]);
var data = {
    nodes: nodes,
    edges: edges
};
// create a network
var container = document.getElementById('mynetwork');
    
var options = {
		physics: false,
		edges: {
    },
		nodes: {
        color:{border:'black','background':'white'},
        shape:'box'
    }
};
    
var network = new vis.Network(container, data, options);