vis.js playground

by laike9m

HTML

<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

CSS

#mynetwork {
            width: 500px;
            height: 500px;
            border: 1px solid lightgray;
        }

JavaScript

// create an array with nodes
    var nodes = [{
        "id": "1",
        "label": "1",
        "level": 1,
      },
      {
        "id": "2",
        "label": "2",
        "level": 2
      },
      {
        "id": "3",
        "label": "3",
        "level": 3
      },
      {
        "id": "4",
        "label": "4",
        "level": 3
      },
      {
        "id": "x",
        "label": "x",
        "level": 1,
        "color": {
          "background": 'red'
        },
        "x": 200
      },
      {
        "id": "7",
        "label": "y",
        "level": 3,
        "color": {
          "background": 'red'
        },
        "x": 200
      }
    ];
    var edges = [{
      "from": "1",
      "to": "2"
    }, {
      "from": "2",
      "to": "3"
    }, {
      "from": "2",
      "to": "4"
    }];


    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
      nodes: nodes,
      edges: edges
    };
    var options = {
      width: "500px",
      height: "500px",
      interaction: {
        dragNodes: false,
      },
      layout: {
        hierarchical: {
          direction: "UD", // From up to bottom.
        },
      },
    };

    // initialize your network!
    var network = new vis.Network(container, data, options);