FME_PythonNetworkVisualizations/ExampleOutput/Employees.html at main · J-J-E/FME_PythonNetworkVisualizations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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>Employee</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: 100%;
            height: 94%;
            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": "BLUE", "id": "vEmployee", "label": "vEmployee", "shape": "dot", "size": 24.759631762948114, "title": " Neighbors:StateProvince  |  PersonPhone  |  PhoneNumberType  |  EmailAddress  |  CountryRegion  |  Employee  |  BusinessEntityAddress  |  Address  |  Person"}, {"color": "RED", "id": "Address", "label": "Address", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "BusinessEntityAddress", "label": "BusinessEntityAddress", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "CountryRegion", "label": "CountryRegion", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "EmailAddress", "label": "EmailAddress", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "Employee", "label": "Employee", "shape": "dot", "size": 12.544000000000002, "title": " Neighbors:vEmployee  |  vEmployeeDepartment  |  vEmployeeDepartmentHistory"}, {"color": "RED", "id": "Person", "label": "Person", "shape": "dot", "size": 12.544000000000002, "title": " Neighbors:vEmployee  |  vEmployeeDepartment  |  vEmployeeDepartmentHistory"}, {"color": "RED", "id": "PersonPhone", "label": "PersonPhone", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "PhoneNumberType", "label": "PhoneNumberType", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "RED", "id": "StateProvince", "label": "StateProvince", "shape": "dot", "size": 10, "title": " Neighbors:vEmployee"}, {"color": "BLUE", "id": "vEmployeeDepartment", "label": "vEmployeeDepartment", "shape": "dot", "size": 14.049280000000003, "title": " Neighbors:Employee  |  Person  |  Department  |  EmployeeDepartmentHistory"}, {"color": "BLUE", "id": "vEmployeeDepartmentHistory", "label": "vEmployeeDepartmentHistory", "shape": "dot", "size": 15.735193600000004, "title": " Neighbors:EmployeeDepartmentHistory  |  Department  |  Shift  |  Employee  |  Person"}, {"color": "RED", "id": "Department", "label": "Department", "shape": "dot", "size": 11.200000000000001, "title": " Neighbors:vEmployeeDepartment  |  vEmployeeDepartmentHistory"}, {"color": "RED", "id": "EmployeeDepartmentHistory", "label": "EmployeeDepartmentHistory", "shape": "dot", "size": 11.200000000000001, "title": " Neighbors:vEmployeeDepartment  |  vEmployeeDepartmentHistory"}, {"color": "RED", "id": "Shift", "label": "Shift", "shape": "dot", "size": 10, "title": " Neighbors:vEmployeeDepartmentHistory"}]);
        edges = new vis.DataSet([{"color": "black", "from": "vEmployee", "label": 1, "to": "Address", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "BusinessEntityAddress", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "CountryRegion", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "EmailAddress", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "Employee", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "Person", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "PersonPhone", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "PhoneNumberType", "weight": 1}, {"color": "black", "from": "vEmployee", "label": 1, "to": "StateProvince", "weight": 1}, {"color": "black", "from": "Employee", "label": 1, "to": "vEmployeeDepartment", "weight": 1}, {"color": "black", "from": "Employee", "label": 1, "to": "vEmployeeDepartmentHistory", "weight": 1}, {"color": "black", "from": "Person", "label": 1, "to": "vEmployeeDepartment", "weight": 1}, {"color": "black", "from": "Person", "label": 1, "to": "vEmployeeDepartmentHistory", "weight": 1}, {"color": "black", "from": "vEmployeeDepartment", "label": 1, "to": "Department", "weight": 1}, {"color": "black", "from": "vEmployeeDepartment", "label": 1, "to": "EmployeeDepartmentHistory", "weight": 1}, {"color": "black", "from": "Department", "label": 1, "to": "vEmployeeDepartmentHistory", "weight": 1}, {"color": "black", "from": "EmployeeDepartmentHistory", "label": 1, "to": "vEmployeeDepartmentHistory", "weight": 1}, {"color": "black", "from": "vEmployeeDepartmentHistory", "label": 1, "to": "Shift", "weight": 1}]);

        // adding nodes and edges to the graph
        data = {nodes: nodes, edges: edges};

        var options = {"nodes": {"color": {"highlight": {"border": "rgba(129,11,233,1)"}}, "font": {"size": 12, "face": "verdana", "strokeWidth": 2}, "shadow": {"enabled": true, "size": 9, "x": 6, "y": 7}, "shapeProperties": {"borderRadius": 3}, "size": null}, "physics": {"enabled": true, "barnesHut": {"avoidOverlap": 0.5}, "minVelocity": 3, "solver": "barnesHut"}};


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


        return network;

    }

    drawGraph();

</script>
</body>
</html>