block by micahstubbs bc6c03ef1cc74be965253ae9484bc308

VivaGraph constant layout I

Full Screen

the original example at https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/constantLayout.html

index.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>

preview.xcf

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~��������.>N^n~��������.>N^n~��������.>N^n~��������.>N^n~��������.>N^n~��������.>N^n~��������.>N^n~������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
����}x><