block by micahstubbs 079ae3dacfabf06db0786361fc3b36a9

VivaGraph constant layout II

Full Screen

this iteration makes the code nice to work with

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>VivaGraph constant layout</title>
    <script src='vivagraph.js'></script>
    <style type='text/css' media='screen'>
      body, html, svg { 
        width: 100%; 
        height: 100%; 
        overflow: hidden; 
      }
    </style>
  </head>
  <body>
    <script src='vis.js' type='text/javascript'></script>
  </body>
</html>

lebab.sh

# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template

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

vis.js

const graph = Viva.Graph.graph() // convenience variables.

const // predefined node positions
nodePositions = [{ x: -50, y: 0 }, { x: 0, y: -50 }, { x: 50, y: 0 }]

const layout = Viva.Graph.Layout.constant(graph)

const renderer = Viva.Graph.View.renderer(graph, {
  layout // use our custom 'constant' layout
})

let i
const nodesCount = nodePositions.length

// 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(
  (
    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 : .. }
    nodePositions[node.id]
)

renderer.run()