VivaGraphJS with link labels

Demo of VivaGraphJS https://github.com/anvaka/VivaGraphJS with link labels

by ken tsai

HTML

<script src="https://rawgithub.com/anvaka/VivaGraphJS/master/dist/vivagraph.js"></script>

CSS

html, body, svg { width: 100%; height: 100%;}

JavaScript

var graph = Viva.Graph.graph();

var theUI = {"nodes":{"temis":{"color":"red", "shape":"rect", "label":"Temis", "alpha":1, "link":"http://www.temis.com/fr"}, "colombia":{"color":"green", "shape":"dot", "label":"Colombia", "alpha":1}, "paris":{"color":"blue", "shape":"dot", "label":"Paris", "alpha":1}, "luxidNav":{"color":"#000000", "shape":"dot", "label":"Lux-Nav", "alpha":0.4}, "navigator":{"color":"green", "shape":"dot", "label":"Navigator", "alpha":1}, "luxid":{"color":"blue", "shape":"dot", "label":"Luxid X", "alpha":1}}, "edges":{"temis":{"colombia":{"directed":"true", "color":"#FFA500", "name":"Headquarter", "weight":4}, "paris":{"directed":"false", "color":"#FFA500", "name":"subsidiary", "weight":1}}, "paris":{"colombia":{"name":"vpn", "weight":1}, "luxid":{"weight":1}}, "colombia":{"navigator":{"weight":1}}, "luxidNav":{"luxid":{"directed":"true", "color":"#FFA500", "weight":4}, "navigator":{"weight":1}}}};
var nodeuidata = theUI.nodes;
if (theUI.nodes)
		$.each(theUI.nodes, function(name, nodeData) {
			graph.addNode(name, nodeData);
		})

	if (theUI.edges)
		$.each(theUI.edges, function(src, dsts) {
			$.each(dsts, function(dst, edgeData) {
				graph.addLink(src, dst, edgeData);
			})
		})
		
	var graphics = Viva.Graph.View.svgGraphics(), nodeSize = 24;

	var layout = Viva.Graph.Layout.forceDirected(graph, {
		springLength : 100,
		springCoeff : 0.0008,
		dragCoeff : 0.02,
		gravity : -1.2
	});

	var renderer = Viva.Graph.View.renderer(graph, {
		layout : layout,
		graphics : graphics
	});


	graphics.node(
			function(node) {
				var ui = Viva.Graph.svg('g'),
				svgText = Viva.Graph.svg('text').attr('y', '-4px').attr('x',
						'-' + (nodeSize / 4) + 'px').text(node.data.label),

				img = node.data.image ? Viva.Graph.svg('image').attr('width',
						nodeSize).attr('height', nodeSize)
						.link(
								'https://secure.gravatar.com/avatar/'
										+ node.data.image) : Viva.Graph.svg(
						'rect').attr('width', nodeSize)
						.attr('height',...