vizceral-svelte

vizceral-svelte

This project is under active development.

This is a svelte wrapper around Vizceral, a component for displaying traffic data on a WebGL canvas.

Inspired by vizceral-react and vizceral-vue.

Installation

# npm 
npm install -D vizceral-svelte

Usage

<script>
  import Vizceral from "vizceral-svelte";
  import traffic from "./sample_data.json";
</script> 
 
<Vizceral {traffic}/>

Options

You can control the behavior of Vizceral effect by passing specific props to the component.

filters

// Default: []
filters: Array;

Array of filter definitions and current values to filter out nodes and connections. Refer to github.com/Netflix/Vizceral/wiki/Configuration#filters

modes

modes: Object;

Map of modes to mode type, e.g. { detailedNode: 'volume' }

styles

// Default: {}
styles: Object;

Styles to override default properties.

traffic

// Default: {}
traffic: Object;

The traffic data. See github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format for specification.