block by micahstubbs 16f8dd9e2630882781f79458e3edfe43

VivaGraph constant layout III: json data

Full Screen

this iteration shows a constant layout with static data with pre-computed node positions loaded from a json file


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='https://d3js.org/d3-request.v1.min.js'></script>
    <script src='https://d3js.org/d3-dispatch.v1.min.js'></script>
    <script src='https://d3js.org/d3-collection.v1.min.js'></script>
    <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>

vis.js

d3.json('miserables-with-positions.json', (error, data) => {
  draw(error, data)
})

function draw(error, data) {
  if (error) console.error(error)

  const graph = Viva.Graph.graph()
  graph.Name = 'Les Miserables sample graph from the d3 library'

  const nodesCount = data.nodes.length
  let i
  for (i = 0; i < data.nodes.length; ++i) {
    graph.addNode(i, data.nodes[i])
  }

  for (i = 0; i < data.links.length; ++i) {
    const link = data.links[i]
    graph.addLink(link.source, link.target, link.value)
  }

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

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

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

  renderer.run()
}