<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Vanilla JS Example about vizceral HOT 2 CLOSED

netflix commented on May 22, 2024

Vanilla JS Example

from vizceral.

Comments (2)

jrsquared commented on May 22, 2024

Ah, yep, fixed my comment on the previous issue. I just said to open a new issue, which you did!

Very close! A few issues:

The actual constructor is Vizceral.default.
It's a constructor, so you have to call new Vizceral.default.
maxVolume is required for graphs
You need to call viz.animate() to load and start the animation

One issue as far as graph layout goes on my end: I still expect there to be one entry node, and that entry node to be named 'INTERNET'. That is hard coded in a few places, and at some point, I think this expectation should be removed. (FWIW, this requirement is documented in DATAFORMATS.md)

All that being said, here's a working example (at least in Firefox 48):

<html>
  <head>
    <script src="./lib/vizceral_ecs6.js"></script>
    <script>
      function run( ) {
        var viz = new Vizceral.default(document.getElementById('test'));
        viz.updateData({name: 'us-west-2', renderer: 'global', nodes: [{name: 'INTERNET'},{name: 'b'}], connections: [{source: 'INTERNET', target: 'b'}], maxVolume: 100});
        viz.setView();
        viz.animate();
     }
  </script>
  </head>
  <body onload='javascript:run( )'>
    <canvas id='test'></canvas>
  </body>
</html>