css/layout.css

@@ -14,9 +14,9 @@
     color: white;
     border-radius: 5px 5px 0px 0px;
     margin-right: 7px;
-    border-top: 2px solid #323232;
-    border-left: 2px solid #323232;
-    border-right: 2px solid #323232;
+    border-top: 1px solid #323232;
+    border-left: 1px solid #323232;
+    border-right: 1px solid #323232;
 }
 
 .layout-nav-item.active {
@@ -25,11 +25,12 @@
 }
 
 .layout-item {
-    padding: 10px;
+    padding: 100px;
+    padding-top: 10px;
     background-color: #2196f3;
-    border-top: 2px solid #323232;
-    border-left: 2px solid #323232;
-    margin-top: -2px;
+    border-top: 1px solid #323232;
+    border-left: 1px solid #323232;
+    margin-top: -1px;
 }
 .layout-item:not(.active) {
     display: none;

css/main.css

@@ -6,6 +6,13 @@ body {
     background: #9a9a9a;
 }
 
+@media (min-width: 1080px) {
+    body {
+        margin-left: 15%;
+        margin-right: 15%;
+    }
+}
+
 .title {
     display: block;
     font-size: 2em;
@@ -18,14 +25,22 @@ body {
     border-radius: 1em 0px 0px 0px;
 }
 
-img {
+img, object {
     width: 100%;
     height: auto;
     box-shadow: 1px 2px 6px 0px black;
     border-radius: 5px;
 }
 
-img[src=""] {
+object {
+    background-color: white;
+    min-height: 520px;
+    width: calc(100% - calc(50% - 250px));
+    overflow-x: hidden;
+    padding-left: calc(50% - 250px);
+}
+
+img[src=""], object[data=""] {
     display: none;
 }
 
@@ -39,5 +54,5 @@ img[src=""] {
 
 select, button {
     padding: 3px;
-    width: 25%;
+    width: 200px;
 }
\ No newline at end of file

index.html

@@ -28,7 +28,24 @@
           </select>
           <button id="compare">GO</button>
         </div>
-        <img id="comp" src=""/>
+        <img id="comp" src="al-dcph.svg"/>
+      </div>
+      <div class="layout-item" layout-name="Influence Graph">
+        <div class="title">Influence Graph</div>
+        <div class="comp-settings">
+          Show
+          <select name="ig-v" id="ig-v">
+            <option value="">--Please choose variable--</option>
+          </select>
+          influence graph at depth
+          <select name="ig-d" id="ig-d">
+            <option value="1">1</option>
+            <option value="2" selected>2</option>
+            <option value="3">3</option>
+          </select>
+          <button id="showgraph">GO</button>
+        </div>
+        <object id="ig" data="pop.html" type="text/html"></object>
       </div>
     </div>
   </body>

js/main.js

@@ -20,6 +20,7 @@ function connect() {
         if (data.type == "variables") {
             let va = '<option value="">--Please choose variable A--</option>';
             let vb = '<option value="">--Please choose variable B--</option>';
+            let v = '<option value="">--Please choose variable--</option>';
             
             let ini = data.data.ini;
             for (let k = 0; k < ini.length; k++) {
@@ -30,14 +31,18 @@ function connect() {
             for (let k = 0; k < vars.length; k++) {
                 va += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
                 vb += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
+                v  += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
             }
             document.getElementById('comp-va').innerHTML = va;
             document.getElementById('comp-vb').innerHTML = vb;
+            document.getElementById('ig-v').innerHTML = v;
             backend.init();
         } else if (data.type == "img") {
             document.getElementById('world').src = data.data;
         } else if (data.type == "imgcmp") {
             document.getElementById('comp').src = data.data;
+        } else if (data.type == "igraph") {
+            document.getElementById('ig').data = data.data;
         }
     })
     websocket.addEventListener("open", () => {
@@ -64,4 +69,12 @@ document.getElementById('compare').addEventListener('click', () => {
     if (va != "" && vb != "") {
         send(JSON.stringify({type: 'compare', va: va, vb: vb}));
     }
+})
+
+document.getElementById('showgraph').addEventListener('click', () => {
+    let v = document.getElementById('ig-v').value;
+    let d = document.getElementById('ig-d').value;
+    if (v != "" && d != "") {
+        send(JSON.stringify({type: 'igraph', v: [v], depth: parseInt(d)}));
+    }
 })
\ No newline at end of file

pop.html

+<html>
+<head>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </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>-->
+
+<style type="text/css">
+
+        #mynetwork {
+            width: 500px;
+            height: 500px;
+            background-color: #ffffff;
+            border: 1px solid lightgray;
+            position: relative;
+            float: left;
+        }
+
+        
+
+        
+
+        
+</style>
+
+</head>
+
+<body>
+<div id = "mynetwork"></div>
+
+
+<script type="text/javascript">
+
+    // initialize global variables.
+    var edges;
+    var nodes;
+    var network; 
+    var container;
+    var options, data;
+
+    
+    // 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([{"color": "#66CC00", "id": "uilpc", "label": "uilpc", "shape": "dot", "title": "urban and industrial land required per capita\nuilpc.k = tabhl(uilpct, iopc.k, 0, 1600, 200)\nInit: 0.01"}, {"color": "#0073E6", "id": "sopc", "label": "sopc", "shape": "dot", "title": "service output per capita\nsopc.k = so.k/pop.k\nInit: 90.00"}, {"color": "#66CC00", "id": "fpc", "label": "fpc", "shape": "dot", "title": "food per capita\nfpc.k = f.k/pop.k\nInit: 269.32"}, {"color": "#CF4125", "id": "p3", "label": "p3", "shape": "dot", "title": "Population 45 To 64\np3.k = p3.j + dt*(mat2.j-d3.j-mat3.j)\nInit: 190000000.00"}, {"color": "#CF4125", "id": "d4", "label": "d4", "shape": "dot", "title": "deaths 65 plus\nd4.k = p4.k * m4.krct\nInit: 6706797.29"}, {"color": "#0073E6", "id": "isopc1", "label": "isopc1", "shape": "dot", "title": "indicated services output per capita 1\nisopc1.k = tabhl(isopc1t, iopc.k, 0, 1600, 200)\nInit: 94.03"}, {"color": "#CF4125", "id": "p4", "label": "p4", "shape": "dot", "title": "Population 65 Plus\np4.k = p4.j + dt*(mat3.j - d4.j)\nInit: 60000000.00"}, {"color": "#CF4125", "id": "pop", "label": "pop", "shape": "dot", "title": "population\npop.k = p1.k + p2.k + p3.k + p4.k\nInit: 1600000000.00"}, {"color": "#888888", "id": "gdppc", "label": "gdppc", "shape": "dot", "title": "GDP per capita\ngdppc.k = tabhl(gdppct, iopc.k/ugdp, 0, 1000, 200)\nInit: 219.75"}, {"color": "#0073E6", "id": "fioacv", "label": "fioacv", "shape": "dot", "title": "fraction of industrial output allocated to consumption variable\nfioacv.k = tabhl(fioacvt, iopc.k/iopcd, 0, 2, 0.2)\nInit: 0.31"}, {"color": "#8080FF", "id": "pcrum", "label": "pcrum", "shape": "dot", "title": "per capita resource use multiplier\npcrum.k = tabhl(pcrumt, iopc.k, 0, 1600, 200)\nInit: 0.18"}, {"color": "#0073E6", "id": "fioas1", "label": "fioas1", "shape": "dot", "title": "fraction of industrial output allocated to services 1\nfioas1.k = tabhl(fioas1t, sopc.k/isopc.k, 0, 2, 0.5)\nInit: 0.11"}, {"color": "#CF4125", "id": "lmc", "label": "lmc", "shape": "dot", "title": "lifetime multiplier from crowding\nlmc.k = 1 - (cmi.k*fpu.k)\nInit: 0.93"}, {"color": "#66CC00", "id": "fioaa1", "label": "fioaa1", "shape": "dot", "title": "fraction of industrial output allocated to agriculture 1\nfioaa1.k = tabhl(fioaa1t, fpc.k/ifpc.k, 0, 2.5, 0.5)\nInit: 0.11"}, {"color": "#CF4125", "id": "b", "label": "b", "shape": "dot", "title": "births\nb.k = clip(d.k, (tf.k*p2.k*0.5/rlt), time.k, pet)\nInit: 58757448.02"}, {"color": "#CF4125", "id": "hsapc", "label": "hsapc", "shape": "dot", "title": "health services per capita\nhsapc.k = tabhl(hsapct, sopc.k, 0, 2000, 250)\nInit: 7.20"}, {"color": "#CF4125", "id": "fcapc", "label": "fcapc", "shape": "dot", "title": "fertility control allocation per capita\nfcapc.k = fsafc.k*sopc.k\nInit: 0.13"}, {"color": "#66CC00", "id": "fr", "label": "fr", "shape": "dot", "title": "food ratio\nfr.k = fpc.k/sfpc\nInit: 1.17"}, {"color": "#0073E6", "id": "jpicu", "label": "jpicu", "shape": "dot", "title": "jobs per industrial capital unit\njpicu.k = tabhl(jpicut, iopc.k, 50, 800, 150)*1e-3\nInit: 0.00"}, {"color": "#CF4125", "id": "mat2", "label": "mat2", "shape": "dot", "title": "maturation 44 to 45\nmat2.k = p2.k*(1 - m2.k)/30\nInit: 22914605.50"}, {"color": "#CF4125", "id": "d3", "label": "d3", "shape": "dot", "title": "deaths 45 to 64\nd3.k = p3.k * m3.k\nInit: 7406590.90"}, {"color": "#0073E6", "id": "jpscu", "label": "jpscu", "shape": "dot", "title": "jobs per service capital unit\njpscu.k = tabhl(jpscut, sopc.k, 50, 800, 150)*1e-3\nInit: 0.00"}, {"color": "#CF4125", "id": "d1", "label": "d1", "shape": "dot", "title": "deaths 0 to 14\nd1.k = p1.k * m1.k\nInit: 24952755.54"}, {"color": "#CF4125", "id": "fpu", "label": "fpu", "shape": "dot", "title": "fraction of population urban\nfpu.k = tabhl(fput, pop.k, 0, 16e9, 2e9)\nInit: 0.16"}, {"color": "#CF4125", "id": "fie", "label": "fie", "shape": "dot", "title": "family income expectation\nfie.k = (iopc.k - aiopc.k)/aiopc.k\nInit: 0.00"}, {"color": "#CF4125", "id": "diopc", "label": "diopc", "shape": "dot", "title": "delayed industrial output per capita\ndiopc.k = dlinf3(iopc.k, sad)\nInit: 41.56"}, {"color": "#CF4125", "id": "p1", "label": "p1", "shape": "dot", "title": "Population 0 To 14\np1.k = p1.j + dt*(b.j - d1.j - mat1.j)\nInit: 650000000.00"}, {"color": "#66CC00", "id": "ifpc1", "label": "ifpc1", "shape": "dot", "title": "indicated food per capita 1\nifpc1.k = tabhl(ifpc1t, iopc.k, 0, 1600, 200)\nInit: 281.95"}, {"color": "#0073E6", "id": "iopc", "label": "iopc", "shape": "dot", "title": "industrial output per capita\niopc.k = io.k/pop.k\nInit: 41.56"}]);
+        edges = new vis.DataSet([{"arrows": "to", "from": "sopc", "to": "hsapc"}, {"arrows": "to", "from": "sopc", "to": "fcapc"}, {"arrows": "to", "from": "sopc", "to": "fioas1"}, {"arrows": "to", "from": "sopc", "to": "jpscu"}, {"arrows": "to", "from": "fpc", "to": "fioaa1"}, {"arrows": "to", "from": "fpc", "to": "fr"}, {"arrows": "to", "from": "p3", "to": "pop"}, {"arrows": "to", "from": "p3", "to": "p3"}, {"arrows": "to", "from": "p3", "to": "d3"}, {"arrows": "to", "from": "d4", "to": "p4"}, {"arrows": "to", "from": "p4", "to": "pop"}, {"arrows": "to", "from": "p4", "to": "p4"}, {"arrows": "to", "from": "p4", "to": "d4"}, {"arrows": "to", "from": "pop", "to": "fpu"}, {"arrows": "to", "from": "pop", "to": "iopc"}, {"arrows": "to", "from": "pop", "to": "sopc"}, {"arrows": "to", "from": "pop", "to": "fpc"}, {"arrows": "to", "from": "b", "to": "p1"}, {"arrows": "to", "from": "mat2", "to": "p3"}, {"arrows": "to", "from": "d3", "to": "p3"}, {"arrows": "to", "from": "d1", "to": "p1"}, {"arrows": "to", "from": "fpu", "to": "lmc"}, {"arrows": "to", "from": "p1", "to": "pop"}, {"arrows": "to", "from": "p1", "to": "p1"}, {"arrows": "to", "from": "p1", "to": "d1"}, {"arrows": "to", "from": "iopc", "to": "diopc"}, {"arrows": "to", "from": "iopc", "to": "fie"}, {"arrows": "to", "from": "iopc", "to": "fioacv"}, {"arrows": "to", "from": "iopc", "to": "isopc1"}, {"arrows": "to", "from": "iopc", "to": "jpicu"}, {"arrows": "to", "from": "iopc", "to": "ifpc1"}, {"arrows": "to", "from": "iopc", "to": "uilpc"}, {"arrows": "to", "from": "iopc", "to": "pcrum"}, {"arrows": "to", "from": "iopc", "to": "gdppc"}]);
+
+        // 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": {
+        "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>
\ No newline at end of file

worldsim.py

@@ -59,6 +59,11 @@ class World:
         self.w.plot([va, vb], rescale=True, title='Comparison between {} and {}'.format(va, vb))
         plt.savefig('cmp-{}.svg'.format(name), bbox_inches='tight')
 
+    def graph(self, name, v, depth):
+        w = World3(1)
+        w.run()
+        w.show_influence_graph(variables=v, depth = depth).show('ig-{}.html'.format(name))
+
 clients = {}
 async def handler(websocket):
     print("New client: {}".format(websocket.id))
@@ -78,6 +83,9 @@ async def handler(websocket):
             elif data['type'] == 'compare':
                 clients[websocket.id]['w'].compare(websocket.id, data['va'], data['vb'])
                 await websocket.send(json.dumps({'type': 'imgcmp', 'data': "cmp-{}.svg".format(websocket.id)}))
+            elif data['type'] == 'igraph':
+                clients[websocket.id]['w'].graph(websocket.id, data['v'], data['depth'])
+                await websocket.send(json.dumps({'type': 'igraph', 'data': "ig-{}.html".format(websocket.id)}))
             elif data['type'] == 'update':
                 clients[websocket.id]['w'].updateVariable(data['name'], data['value'])
 
@@ -87,6 +95,7 @@ async def handler(websocket):
             del clients[websocket.id]
             os.system('rm -rf wg-{}.svg'.format(websocket.id))
             os.system('rm -rf cmp-{}.svg'.format(websocket.id))
+            os.system('rm -rf ig-{}.html'.format(websocket.id))
             break
         print(" >{}".format(message))
 
@@ -113,6 +122,7 @@ def thread_wsserver():
 if __name__ == "__main__":
     os.system('rm -rf wg-*.svg')
     os.system('rm -rf cmp-*.svg')
+    os.system('rm -rf ig-*.html')
 
     server = threading.Thread(target=thread_server)
     server.start()