Last active
September 23, 2021 15:28
-
-
Save jermnelson/c430eb37133170e84f3c22734c52702c to your computer and use it in GitHub Desktop.
PCC-BIBFRAME-Exchange-02021-September-9
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| kglab |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/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([{"id": 0, "label": "\u003chttp://id.loc.gov/resources/works/21223749\u003e", "shape": "dot", "title": "\u003chttp://id.loc.gov/resources/works/21223749\u003e"}, {"id": 1, "label": "bf:Text", "shape": "dot", "title": "bf:Text"}, {"id": 2, "label": "\u003chttp://share-vde.org/sharevde/rdfBibframe/Work/7985783-1\u003e", "shape": "dot", "title": "\u003chttp://share-vde.org/sharevde/rdfBibframe/Work/7985783-1\u003e"}, {"id": 3, "label": "_:ub5bL5C14", "shape": "dot", "title": "_:ub5bL5C14"}, {"id": 4, "label": "Parable of the sower", "shape": "dot", "title": "Parable of the sower"}, {"id": 5, "label": "\u003chttp://share-vde.org/sharevde/rdfBibframe/Title_996/0409b9ef-0416-3b57-8826-259ebc9fdb53\u003e", "shape": "dot", "title": "\u003chttp://share-vde.org/sharevde/rdfBibframe/Title_996/0409b9ef-0416-3b57-8826-259ebc9fdb53\u003e"}, {"id": 6, "label": " Parable of the sower", "shape": "dot", "title": " Parable of the sower"}, {"id": 7, "label": "\u003chttps://api.stage.sinopia.io/resource/addeddfb-d87a-4e67-bcd3-c1e5a8df4e7c\u003e", "shape": "dot", "title": "\u003chttps://api.stage.sinopia.io/resource/addeddfb-d87a-4e67-bcd3-c1e5a8df4e7c\u003e"}, {"id": 8, "label": "_:ub6bL5C14", "shape": "dot", "title": "_:ub6bL5C14"}, {"id": 9, "label": "Parable of the Sower", "shape": "dot", "title": "Parable of the Sower"}, {"id": 10, "label": "bf:Work", "shape": "dot", "title": "bf:Work"}, {"id": 11, "label": "bf:Title", "shape": "dot", "title": "bf:Title"}]); | |
| edges = new vis.DataSet([{"from": 0, "label": "rdf:type", "to": 1}, {"from": 2, "label": "rdf:type", "to": 1}, {"from": 3, "label": "rdfs:label", "to": 4}, {"from": 2, "label": "bf:title", "to": 5}, {"from": 5, "label": "rdfs:label", "to": 6}, {"from": 7, "label": "rdf:type", "to": 1}, {"from": 8, "label": "rdfs:label", "to": 9}, {"from": 7, "label": "bf:title", "to": 8}, {"from": 2, "label": "rdf:type", "to": 10}, {"from": 8, "label": "rdf:type", "to": 11}, {"from": 3, "label": "rdf:type", "to": 11}, {"from": 0, "label": "rdf:type", "to": 10}, {"from": 7, "label": "rdf:type", "to": 10}, {"from": 0, "label": "bf:title", "to": 3}]); | |
| // adding nodes and edges to the graph | |
| data = {nodes: nodes, edges: edges}; | |
| var options = { | |
| "configure": { | |
| "enabled": false | |
| }, | |
| "edges": { | |
| "color": { | |
| "inherit": true | |
| }, | |
| "smooth": { | |
| "enabled": false, | |
| "type": "continuous" | |
| } | |
| }, | |
| "interaction": { | |
| "dragNodes": true, | |
| "hideEdgesOnDrag": false, | |
| "hideNodesOnDrag": false | |
| }, | |
| "physics": { | |
| "enabled": true, | |
| "forceAtlas2Based": { | |
| "avoidOverlap": 0, | |
| "centralGravity": 0.01, | |
| "damping": 0.4, | |
| "gravitationalConstant": -50, | |
| "springConstant": 0.08, | |
| "springLength": 100 | |
| }, | |
| "solver": "forceAtlas2Based", | |
| "stabilization": { | |
| "enabled": true, | |
| "fit": true, | |
| "iterations": 1000, | |
| "onlyDynamicEdges": false, | |
| "updateInterval": 50 | |
| } | |
| } | |
| }; | |
| network = new vis.Network(container, data, options); | |
| return network; | |
| } | |
| drawGraph(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment