Skip to content

Instantly share code, notes, and snippets.

@AndrewJakubowicz

AndrewJakubowicz/README.md

Last active March 11, 2021 05:47
Show Gist options
  • Save AndrewJakubowicz/d82570c509028e6b0a519ef885ab58f0 to your computer and use it in GitHub Desktop.
Save AndrewJakubowicz/d82570c509028e6b0a519ef885ab58f0 to your computer and use it in GitHub Desktop.
Download ZIP
Easy Dynamic graph using NetworkVizJS
Raw
README.md

Remake of this example using NetworkVizJS.

This example shows how easy it is to create a graph that changes dynamically.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist/index.umd.min.js"></script>
<div id="graphExample1"></div>
<script>
// Initialise the graph. The first parameter is the div ID to create the graph in.
// The second parameter is for user options.
var graph = networkVizJS("graphExample1", {
edgeLength: 100,
layoutType: "linkDistance",
nodeShape: "circle"
});
// Helper function for creating the edges between nodes.
const createEdge = function(source, target){
return {
subject: source,
predicate: {type: "normal"},
object: target}
};
// Currently all nodes need unique hashes.
// shortname left blank because we don't need labels on the nodes.
var node1 = {hash:"1", shortname: " "},
node2 = {hash:"2", shortname: " "},
node3 = {hash:"3", shortname: " "};
var edge1 = createEdge(node1, node2),
edge2 = createEdge(node2, node3),
edge3 = createEdge(node3, node1);
graph.addTriplet(edge1);
graph.addTriplet(edge2);
graph.addTriplet(edge3);
// Here we're just adding and removing the node every second.
var removingNode = true;
setInterval(() => {
if (removingNode){
graph.removeNode(node3.hash);
} else {
graph.addTriplet(edge2);
graph.addTriplet(edge3);
}
removingNode = !removingNode
}, 1000);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment