user_explorer.html

<html>
    <head>
        <meta charset="utf-8">
        
            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
        
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 750px;
                 background-color: #222222;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }

             

             

             
        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"font": {"color": "white"}, "group": "topics", "id": "Topic_28", "label": "Topic 28", "shape": "dot", "size": 60, "title": "Topic 28: 1937 posts"}, {"color": "#00FF00", "font": {"color": "white"}, "group": "users", "id": "User_111134438961558652", "label": "User 111134438961558652", "shape": "dot", "size": 25}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_42", "label": "Topic 42", "shape": "dot", "size": 60, "title": "Topic 42: 2350 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_4", "label": "Topic 4", "shape": "dot", "size": 60, "title": "Topic 4: 7683 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_15", "label": "Topic 15", "shape": "dot", "size": 60, "title": "Topic 15: 2754 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_18", "label": "Topic 18", "shape": "dot", "size": 60, "title": "Topic 18: 19265 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_14", "label": "Topic 14", "shape": "dot", "size": 60, "title": "Topic 14: 2772 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_2", "label": "Topic 2", "shape": "dot", "size": 60, "title": "Topic 2: 17956 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_60", "label": "Topic 60", "shape": "dot", "size": 60, "title": "Topic 60: 1146 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_73", "label": "Topic 73", "shape": "dot", "size": 60, "title": "Topic 73: 732 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_8", "label": "Topic 8", "shape": "dot", "size": 60, "title": "Topic 8: 5681 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_51", "label": "Topic 51", "shape": "dot", "size": 60, "title": "Topic 51: 1799 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_38", "label": "Topic 38", "shape": "dot", "size": 60, "title": "Topic 38: 1386 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_1", "label": "Topic 1", "shape": "dot", "size": 60, "title": "Topic 1: 16132 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_59", "label": "Topic 59", "shape": "dot", "size": 60, "title": "Topic 59: 1014 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_19", "label": "Topic 19", "shape": "dot", "size": 60, "title": "Topic 19: 2479 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_83", "label": "Topic 83", "shape": "dot", "size": 60, "title": "Topic 83: 511 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_0", "label": "Topic 0", "shape": "dot", "size": 60, "title": "Topic 0: 244489 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_7", "label": "Topic 7", "shape": "dot", "size": 60, "title": "Topic 7: 5181 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_71", "label": "Topic 71", "shape": "dot", "size": 60, "title": "Topic 71: 4816 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_12", "label": "Topic 12", "shape": "dot", "size": 60, "title": "Topic 12: 3158 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_34", "label": "Topic 34", "shape": "dot", "size": 60, "title": "Topic 34: 1576 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_65", "label": "Topic 65", "shape": "dot", "size": 60, "title": "Topic 65: 896 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_75", "label": "Topic 75", "shape": "dot", "size": 60, "title": "Topic 75: 585 posts"}]);
                  edges = new vis.DataSet([{"from": "Topic_28", "to": "User_111134438961558652", "width": 9}, {"from": "Topic_42", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_4", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_15", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_18", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_14", "to": "User_111134438961558652", "width": 2}, {"from": "Topic_2", "to": "User_111134438961558652", "width": 4}, {"from": "Topic_60", "to": "User_111134438961558652", "width": 2}, {"from": "Topic_73", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_8", "to": "User_111134438961558652", "width": 18}, {"from": "Topic_51", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_38", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_1", "to": "User_111134438961558652", "width": 3}, {"from": "Topic_59", "to": "User_111134438961558652", "width": 12}, {"from": "Topic_19", "to": "User_111134438961558652", "width": 6}, {"from": "User_111134438961558652", "to": "Topic_83", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_0", "width": 23}, {"from": "User_111134438961558652", "to": "Topic_7", "width": 6}, {"from": "User_111134438961558652", "to": "Topic_71", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_12", "width": 2}, {"from": "User_111134438961558652", "to": "Topic_34", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_65", "width": 2}, {"from": "User_111134438961558652", "to": "Topic_75", "width": 1}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "barnesHut": {
            "avoidOverlap": 0,
            "centralGravity": 0.3,
            "damping": 0.09,
            "gravitationalConstant": -80000,
            "springConstant": 0.001,
            "springLength": 250
        },
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};

                  


                  

                  network = new vis.Network(container, data, options);

                  

                  

                  


                  

                  return network;

              }
              drawGraph();
        </script>
    </body>
</html>