VIS: Contoh Network Visualization Untuk Network Analysis Sederhana

Catatan ini berisi contoh sederhana penggunaan vis-network untuk menampilkan aliran dana dari satu node ke node lainnya. Node ini bisa berupa orang, perusahaan atau lainnya. Catatan ini dibuat dalam rangka untuk mengukur kemampuan vis untuk digunakan pada project audit keuangan.

Contoh lengkapnya adalah sebagai berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>
    <style type="text/css">
      #mynetwork {
        width: 100%;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "BIG BOSS", level:1, color:'red', font:{color:'white'} },
        { id: 2, label: "BUDAIRI", level:2, color:'green', font:{color:'white'}  },
        { id: 3, label: "WIDI UTAMI", level:3, color:'violet', font:{color:'white'} },
        { id: 4, label: "KEVIN MUZAKKA",level:4, color:'blue', font:{color:'white'} },
        { id: 5, label: "HADA NURUSSHOFA", level:4, color:'maroon', font:{color:'white'} },
        { id: 6, label: "CONTENT CREATOR 1", level:4 },
        { id: 7, label: "CONTENT CREATOR 2", level:4 },
        { id: 8, label: "CONTENT CREATOR 3", level:4 },
        { id: 9, label: "ADSENSE", level:3,color:'gold', font:{color:'white'} },
        { id: 10, label: "AGENCY", level:3,color:'chocolate', font:{color:'white'} },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 2 },
        { from: 2, to: 3},
        { from: 9, to: 3},
        { from: 10, to: 3},
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 4 },
		{ from: 3, to: 5 },
		{ from: 3, to: 6 },
		{ from: 3, to: 7 },
		{ from: 3, to: 8 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
     const options = {
    nodes: {
      font: {
        size: 22
      },
      borderWidth: 3
    },
    edges: {
      font: {
        align: "top"
      },
 
      arrows: {
        to: { enabled: true, scaleFactor: 1, type: "arrow" }
      }
    },
    interaction: {
      tooltipDelay: 200,
      hover: true
    },
    physics: {
      enabled: false
    },

};
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>