https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js
<!–
http://../node_modules/vis/dist/vis.js–>
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js
#mynetwork {
width: 100%;
height: 800px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
// 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”: “black”}, “group”: 1, “id”: “Forestry Act \u0026 Bill”, “label”: “Forestry Act \u0026 Bill”, “shape”: “box”, “title”: “Legislation”}, {“font”: {“color”: “black”}, “group”: 1, “id”: “Environmental Planning Act 2019”, “label”: “Environmental Planning Act 2019”, “shape”: “box”, “title”: “Legislation”}, {“font”: {“color”: “black”}, “group”: 1, “id”: “Ministry of Environment Act”, “label”: “Ministry of Environment Act”, “shape”: “box”, “title”: “Legislation”}, {“font”: {“color”: “black”}, “group”: 1, “id”: “Bahamas National Trust Act”, “label”: “Bahamas National Trust Act”, “shape”: “box”, “title”: “Legislation”}, {“font”: {“color”: “black”}, “group”: 1, “id”: “Coast Protection Act”, “label”: “Coast Protection Act”, “shape”: “box”, “title”: “Legislation”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Ministry of Environment”, “label”: “Ministry of Environment”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Department of Forestry”, “label”: “Department of Forestry”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Dept. of Environmental Planning (DEPP)”, “label”: “Dept. of Environmental Planning (DEPP)”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Department of Marine Resources”, “label”: “Department of Marine Resources”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Department of Agriculture”, “label”: “Department of Agriculture”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 2, “id”: “Bahamas National Trust (BNT)”, “label”: “Bahamas National Trust (BNT)”, “shape”: “ellipse”, “title”: “Department/Body”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Minister”, “label”: “Minister”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Director of Forestry”, “label”: “Director of Forestry”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Director of DEPP”, “label”: “Director of DEPP”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Director of Marine Resources”, “label”: “Director of Marine Resources”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Director of Agriculture”, “label”: “Director of Agriculture”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Forest/Environmental Officers”, “label”: “Forest/Environmental Officers”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Attorney-General”, “label”: “Attorney-General”, “shape”: “circle”, “title”: “Role/Position”}, {“font”: {“color”: “black”}, “group”: 3, “id”: “Magistrates/Courts”, “label”: “Magistrates/Courts”, “shape”: “circle”, “title”: “Role/Position”}]);
edges = new vis.DataSet([{“arrows”: “to”, “from”: “Ministry of Environment Act”, “label”: “Establishes”, “to”: “Ministry of Environment”}, {“arrows”: “to”, “from”: “Forestry Act \u0026 Bill”, “label”: “Establishes”, “to”: “Department of Forestry”}, {“arrows”: “to”, “from”: “Environmental Planning Act 2019”, “label”: “Establishes”, “to”: “Dept. of Environmental Planning (DEPP)”}, {“arrows”: “to”, “from”: “Bahamas National Trust Act”, “label”: “Empowers”, “to”: “Bahamas National Trust (BNT)”}, {“arrows”: “to”, “from”: “Ministry of Environment”, “label”: “Headed by”, “to”: “Minister”}, {“arrows”: “to”, “from”: “Minister”, “label”: “Oversees”, “to”: “Director of Forestry”}, {“arrows”: “to”, “from”: “Minister”, “label”: “Oversees”, “to”: “Director of DEPP”}, {“arrows”: “to”, “from”: “Department of Forestry”, “label”: “Led by”, “to”: “Director of Forestry”}, {“arrows”: “to”, “from”: “Dept. of Environmental Planning (DEPP)”, “label”: “Led by”, “to”: “Director of DEPP”}, {“arrows”: “to”, “from”: “Director of Forestry”, “label”: “Commands”, “to”: “Forest/Environmental Officers”}, {“arrows”: “to”, “from”: “Director of DEPP”, “label”: “Commands”, “to”: “Forest/Environmental Officers”}, {“arrows”: “to”, “from”: “Forestry Act \u0026 Bill”, “label”: “Consults”, “to”: “Director of Marine Resources”}, {“arrows”: “to”, “from”: “Forestry Act \u0026 Bill”, “label”: “Consults”, “to”: “Director of Agriculture”}, {“arrows”: “to”, “from”: “Environmental Planning Act 2019”, “label”: “Coordinates”, “to”: “Director of Forestry”}, {“arrows”: “to”, “from”: “Forest/Environmental Officers”, “label”: “Arrest/Charge”, “to”: “Magistrates/Courts”}, {“arrows”: “to”, “from”: “Coast Protection Act”, “label”: “Dispute Resolution”, “to”: “Magistrates/Courts”}, {“arrows”: “to”, “from”: “Forestry Act \u0026 Bill”, “label”: “Prosecution”, “to”: “Attorney-General”}, {“arrows”: “to”, “from”: “Bahamas National Trust (BNT)”, “label”: “Enforcement”, “to”: “Magistrates/Courts”}]);
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 = {“nodes”: {“font”: {“size”: 40, “face”: “Arial”}}, “edges”: {“font”: {“size”: 24, “face”: “Arial”, “align”: “middle”}}, “physics”: {“barnesHut”: {“gravitationalConstant”: -100000, “springLength”: 350}}};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
Science and Perspective 