Skip to content

Getting Started

Jump to bottom
Justin Reynolds edited this page Oct 10, 2016 · 3 revisions

Contents

  1. Hello World!
    1. Wrappers
    2. Example
    3. From Scratch
  2. Building
  3. Advanced

Hello World!

Wrappers

If you are using either React or web components, there are some helper modules that make it easier to get started:

Example

For a more complete example, there is an example app using the react wrapper with much more extensive sample data to show how the component works and some more features of vizceral. It would also be an easy jumping off point for building your own UI.

However, if you want to start from scratch...

From Scratch

  1. Add vizceral to package.json

    npm install vizceral --save

  2. Start using the component

    ES6 Example

    import Vizceral from 'vizceral';
const viz = new Vizceral();

// Add event handlers for the vizceral events
viz.on('viewChanged', view => {});
viz.on('objectHighlighted', object => {});
viz.on('rendered', data => {});
viz.on('nodeContextSizeChanged', dimensions => {});
// ...

// Sample data
viz.updateData({
  name: 'us-west-2',
  renderer: 'global',
  nodes: [
    {name: 'INTERNET'},
    {name: 'service'}
  ],
  connections: [
    {
      source: 'INTERNET',
      target: 'service',
      metrics: { normal: 100, warning: 95, danger: 5 },
      metadata: { streaming: true }
    }
  ]
});
viz.setView();
viz.animate();

    HTML/ES5 Example

    <html>
  <head>
    <script src="./dist/vizceral.js"></script>
    <script>
      function run () {
        var viz = new Vizceral.default(document.getElementById('vizceral'));
        viz.updateData({
          name: 'us-west-2',
          renderer: 'global',
          maxVolume: 500,
          nodes: [
            {name: 'INTERNET'},
            {name: 'service'}
          ],
          connections: [
            {
              source: 'INTERNET',
              target: 'service',
              metrics: { normal: 100, warning: 95, danger: 5 },
              metadata: { streaming: true }
            }
          ]
        });
        viz.setView();
        viz.animate();
      }
    </script>
    <title>Vanilla Vizceral Example with Sample Data</title>
  </head>
  <body onload='run()'>
    <canvas id='vizceral'></canvas>
  </body>
</html>

Note: The component will not show anything unless you call updateData on the component with relevant traffic data.

Building

$ git clone git@github.com:Netflix/vizceral.git
$ cd vizceral
$ npm run build

Advanced

For more advanced usage, check How to Use.

Clone this wiki locally