ng-vega3

Angular directive for rendering Vega3 specs. This project was forked and modified from ng-vega which was written for Vega 2. The current version of ng-vega supports Vega 3.

Build

npm install
grunt build

To build the examples and start a local webserver:

npm install
grunt build
bower install
cd examples
python -m SimpleHTTPServer 8000

Please note: bower does not seem to set up Vega correctly and at this time vega* needs to be copied from npm_modules/vega to examples/bower_components/vega/.

Demo

• Simple demo -- Select dataset/renderer to see the chart changes and see the code to see how it was implemented.
• Vega editor demo -- Implement Vega editor using ng-vega.

For more information about Vega, please refer to official documentation.

Usage

angular.module('exampleApp', ['ngVega3'])

<div vega spec="spec" vega-data="testData" vega-renderer="'svg'"></div>

• spec is $scope.spec in your controller.

• vega-data (optional) can be used to pass dynamic data. In the example above, it is bound to $scope.testData. Data can be function to modify the values (Vega 3 syntax) or raw values (and ng-vega3 will convert it to function to make it work for you).

$scope.testData = {
  // function to modify dataset name "table"
  table: function(data){
    data.remove(function(d){return true;})
      insert([{a: 3}, {a: 4}])
  }
}

$scope.testData = {
  // raw values for dataset name "table"
  table: [{a: 1},{a: 2}] 
}

• vega-renderer (optional) can be used to set renderer ('canvas' or 'svg'). Don't forget the quote.

Installation

bower install ng-vega3 --save

or

npm install ng-vega3 --save

Import into your project

Angular module ngVega3 will be available once you do one of the following:

Choice 1. Global

Adding this library via <script> tag is the simplest way.

<script src="path/to/angular.js"></script>
<script src="path/to/vega.js"></script>
<script src="path/to/ng-vega3.min.js"></script>

Choice 2: AMD

If you use requirejs, this library support AMD out of the box.

require.config({
  paths: {
    angular:    'path/to/angular',
    vega:       'path/to/vega',
    'ng-vega3': 'path/to/ng-vega3'
  }
});
require(['ng-vega3'], function() {
  // do something
});

Choice 3: node.js / browserify

require('ng-vega3');

Author

Original work Copyright (c) 2016 Krist Wongsuphasawat Modified work Copyright (c) 2017 Lima Lima Charlie, LLC.