angular-d3plus

Angular directive for d3plus charts

bower install angular-d3plus

Live example:

* http://codepen.io/mariomol/pen/vGNQaV

Some opensource projects using:

* https://github.com/mariohmol/rivescript-viz
* https://github.com/mariohmol/voos-fab

``
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── dist
│   └── angular-d3plus.min.js
├── package.json
├── src
│   └── angular-d3plus.js
└── test
└── index.html
`

How to use it

Install and include in your app:

`js
var app = angular.module('d3plusApp', ['angular-d3plus']);
`

Put some data in scope:

`js
app.controller('ExamplesController', function($scope) {
$scope.base_data = [
{"year": 1991, "name":"alpha", "value": 15, "group": "black"},
{"year": 1991, "name":"beta", "value": -10, "group": "black"},
{"year": 1991, "name":"gamma", "value": 5, "group": "black"},
{"year": 1991, "name":"delta", "value": -50, "group": "black"},
];
});
`

Use in your templates:

`html











`

If you would like to collaborate, you can make dev in angular-d3plus.js and use test/index.html to test it.
You will need to run like this command and open http://localhost:8000/test/ in your browse:

`bash
python -m SimpleHTTPServer 8000
`

$3

If you need to consume a external API or backend server and just after that pass your data to the angular-d3plus, you can use a broadcast call.

In this example I will show how to pass data to a classic view, using just one data object, and a network, that needs more than just one.

First add in your view both tags, in this example a treemap and a network. Remember to give them a elementid, it will be used to identify the element when u have the data.

`html


`


`javascript
$scope.$broadcast("DataReady",{elementid: "mytreemap", data: $scope.sample_data });
$scope.$broadcast("DataReady",{elementid: "mypie", data: $scope.nodes, edges: $scope.connections });
`

Here a example using network with arrows and connections with labels:

`js
$scope.$broadcast("DataReady", {
elementid: "mynetwork",
edges: {
"label": "trigger",
"value": $scope.connections
},
edgesarrows: true
});
`

Want to Help?

You can collaborate if you want! Clone this repository then run npm install and npm run test.

After a development run:

* npm run pretest
* npm run build

TODO

* Sankey not working: Best solution:

`html
focus="{'tooltip': false,'value': 'gamma'}" ng-show="charttype=='sankey'" >
`

* Group Stacked Bar: missing a example

`html
time="year" ng-show="charttype=='groupedbar'" >
`

* Geo map - need this file on web withou CORS: http://bl.ocks.org/davelandry/raw/9042807/countries.json

`html
coords='{
"solo": ["euesp","euita","eufra","euprt"],
"value": "http://bl.ocks.org/davelandry/raw/9042807/countries.json"
}'
ng-show="charttype=='geomap'" >
`

* Tabe data example

`html

``