Vis.js directed graph

by Dan Shahin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js"></script>
<div id="relationships"></div>

CSS

#relationships{height:100vh;width:100vw;}

JavaScript

var knownColor = {background:'#CDCD4D', border:'#713E7F',highlight:{background:'red',border:'black'}};
        var unknownColor = {background:'gray', border:'#713E7F',highlight:{background:'black',border:'red'}};
        // create people.
        // value corresponds with the age of the person
        nodes = [
          {id: 1,  value: 100,  label: 'Target Account', color: '#5D5FA9', level : 0 },
          {id: 2,  value: 100, label: 'Hoom: CSO ?', shape: 'star', color: unknownColor, level : 1},
          {id: 3,  value: 20, label: 'Hoom: CTO - Sally Seeteo', shape: 'star', color: knownColor, level : 1},
          {id: 4,  value: 50, label: 'Hoom: CFO - Joe Ciefo', shape: 'star', color: knownColor, level : 1},
          {id: 5,  value: 1, label: 'Regional Rep', color: '#EC6F78', level : 2 },
          {id: 6,  value: 1, label: 'Product Rep', color: '#EC6F78', level : 2 },
          {id: 7,  value: 20, label: 'Hoom: Finance - Nancy Financi', shape: 'star', color: knownColor, level : 1},
        ];

        // create connections between people
        // value corresponds with the amount of contact between two people
        edges = [
          {from: 1, to: 2, value: 0, title: ''},
          {from: 1, to: 3, value: 0, title: ''},
          {from: 1, to: 4, value: 0, title: ''},
          {from: 1, to: 7, value: 0, title: ''},

          {from: 6, to: 4, value: 5, title: 'Tohoom Score: 5', color: '#6DC55F'},
          {from: 6, to: 7, value: 1, title: 'Tohoom Score: 1', color: '#6DC55F'},
          

        ];

    // create a network
    var container = document.getElementById('relationships');
    var data= {
      nodes: nodes,
      edges: edges,
    };
    var options = {
      width: '100%',
      height: '100%',
      layout: {
                    hierarchical: {
                        direction: 'UD'
                    }
                },
      "edges": {
        "smooth": {
          type: 'cubicBezier',
                       ...