the original example at https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/constantLayout.html
<!DOCTYPE html>
<html>
<head>
<title>VivaGraphs constant layout demo page</title>
<script src="vivagraph.js"></script>
<script type='text/javascript'>
function onLoad() {
var graph = Viva.Graph.graph(),
nodePositions = [{x : -50, y: 0}, {x : 0, y: -50}, {x : 50, y: 0}], // predefined node positions
layout = Viva.Graph.Layout.constant(graph),
renderer = Viva.Graph.View.renderer(graph, {
layout : layout, // use our custom 'constant' layout
}),
i, nodesCount = nodePositions.length; // convinience variables.
// Add nodes
for(i = 0; i < nodesCount; ++i) {
graph.addNode(i, nodePositions[i]);
}
// and make them connected in cycle:
for (i = 0; i < nodesCount; ++i) {
graph.addLink(i % nodesCount, (i + 1) % nodesCount);
}
// set custom node placement callback for layout.
// if you don't do this, constant layout performs random positioning.
layout.placeNode(function(node) {
// node.id - points to its position but you can do your
// random logic here. E.g. read from specific node.data
// attributes. This callback is expected to return object {x : .. , y : .. }
return nodePositions[node.id];
});
renderer.run();
}
</script>
<style type="text/css" media="screen">
body, html, svg { width: 100%; height: 100%; overflow: hidden; }
</style>
</head>
<body onload="onLoad()">
</body>
</html>
gimp xcf file � � B� B� gimp-image-grid (style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
(xspacing 10.000000)
(yspacing 10.000000)
(spacing-unit inches)
(xoffset 0.000000)
(yoffset 0.000000)
(offset-unit inches)
�
� � \ )Screen Shot 2018-06-22 at 1.26.26 PM.png �
� � X � \ t
�
� � \ �
�
� � � �����<����;�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����1���uQ��������<����;�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����1�����������<����;�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����1��������� �L�
�4��� ���3��� ���3��� ���3��� ���3��� ���3��� ���3��� ���3��� ���3��u �u�2���Qu���uQ��0����������.����� �����,����������*�����
�����(����������&����������$����������"���������� �������������������������������������������������<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<���QuL�
�4��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��¢����2���������0����������.����� �����,����������*�����
�����(����������&����������$����������"���������� �������������������������������������������������<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<����L���4��������3��������3��������3��������3��������3��������3��������3��������3��������2�������������0����������.����� �����,����������*�����
�����(����������&����������$����������"���������� �������������������������������������������������<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<����� �������������� ���� �u�3��� ���3��� ���3��� ���3��� �Q����� ���3��� ���3��� ���3��� ���3�
�����Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3��Ѣ�������Ѣ����3��Ѣ����3��Ѣ����3��Ѣ����3�
�����������3��������3��������3��������3�����������������3��������3��������3��������3�������� �=��u �<��� �<��� �<��� �<��Q �<��� �<��� �<��� �<��� �<����=��¢�<��Ѣ�<��Ѣ�<��Ѣ�<�����<��Ѣ�<��Ѣ�<��Ѣ�<��Ѣ�<����=�����<�����<�����<����<�����<�����<�����<�����<�����<���� � ���� ���� ���� ���� ���� ���� ���� ���� �����W�����������������������������������������������W���������������������������������������������������V��� P . ( � � Layer �
^ � � � � � � � n ~ � � � � � � � � . >