https://github.com/Netflix/vizceral

WebGL visualization for displaying animated traffic graphs
https://github.com/Netflix/vizceral

graph monitoring traffic visualization webgl

Last synced: about 1 month ago
JSON representation

WebGL visualization for displaying animated traffic graphs

• Host: GitHub
• URL: https://github.com/Netflix/vizceral
• Owner: Netflix
• License: apache-2.0
• Created: 2016-05-25T16:07:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-28T04:23:58.000Z (about 1 year ago)
• Last Synced: 2024-10-23T06:58:32.243Z (about 2 months ago)
• Topics: graph, monitoring, traffic, visualization, webgl
• Language: JavaScript
• Homepage:
• Size: 2.91 MB
• Stars: 4,076
• Watchers: 488
• Forks: 399
• Open Issues: 54
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - vizceral - WebGL visualization for displaying animated traffic graphs (JavaScript)
• awesome-github-star - vizceral
• awesome-viz - vizceral - Netflix's WebGL visualization for displaying animated traffic graphs. ([↑](#contents) Graph)

README

        
![](./logo.png)

# vizceral

![](./vizceral-example.png)

vizceral is a component for displaying traffic data on a webgl canvas. If a graph of nodes and edges with data about traffic volume is provided, it will render a traffic graph animating the connection volume between nodes.

This component can take multiple traffic graphs and will generate a 'global' graph showing all incoming traffic into each of the 'regions', with support for cross-region traffic.

There are three levels of information, global, regional, and service-level, with clicking or double-clicking on a node bringing you one level deeper.

## Not actively maintained

We are not using this internally at Netflix at this time and the project is not actively being worked on. We occasionally look at the repo and will review PRs as time permits.

## Using

See [the wiki](https://github.com/Netflix/vizceral/wiki) for full documentation.

## Developing Locally

To see your changes to `vizceral` locally, you'll need to link the package with bower:

    $ git clone https://github.com/Netflix/vizceral.git

    $ cd vizceral

    $ npm link

    $ npm run dev

    $ cd /path/to/project-using-vizceral

    $ npm link vizceral

## Contributing

1.  Clone this repo

2.  Create a branch: `git checkout -b your-feature`

3.  Make some changes

4.  Test your changes by [running your local version](#developing-locally)

5.  Push your branch and open a Pull Request

## Supported Browsers

Current development focuses on most recent version of Chrome. Minor sanity checking for the latest versions of Safari and Firefox.

## TODO

- Unit Tests

- Modular layout algorithms

  - Smarter current layout algorithm

- Cross-browser support / testing

- Create predefined locations and design styles to modularly represent custom metadata

- Implement redesigned third-level view

## License

Code released under [the Apache 2.0 license](./LICENSE).