AndrewJakubowicz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Remake of this example using NetworkVizJS.
This example shows how easy it is to create a graph that changes dynamically.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://unpkg.com/networkvizjs@0.0.3/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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://unpkg.com/networkvizjs@0.0.3/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>