AngularJS Live Example

by Sajeetharan Sinnathurai

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div ng-app='myApp' ng-controller="myController">
  <svg sunburst-chart></svg>
</div>

CSS

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
  //setting the data in the scope
	$scope.data1 = undefined;
  function mockAnAjaxCall() {
    window.setTimeout(function() {
		  console.log("s", $scope.data1)
      $scope.data1 = {"children": [{"children": [{"children": [{"children": [{"children": [], "imageURL": "", "type": "New Brunswick", "name": "New Brunswick", "size": 20}, {"children": [], "imageURL": "", "type": "Newfoundland", "name": "Newfoundland", "size": 7}, {"children": [], "imageURL": "", "type": "Nova Scotia", "name": "Nova Scotia", "size": 35}, {"children": [], "imageURL": "", "type": "Prince Edward Island", "name": "Prince Edward Island", "size": 10}], "imageURL": "", "type": "Atlantic", "name": "Atlantic", "size": 72}, {"children": [{"children": [], "imageURL": "", "type": "Northwest Territories", "name": "Northwest Territories", "size": 19}], "imageURL": "", "type": "Northwest Territories", "name": "Northwest Territories", "size": 19}, {"children": [{"children": [], "imageURL": "", "type": "Nunavut", "name": "Nunavut", "size": 2}], "imageURL": "", "type": "Nunavut", "name": "Nunavut", "size": 2}, {"children": [{"children": [], "imageURL": "", "type": "Ontario", "name": "Ontario", "size": 112}], "imageURL": "", "type": "Ontario", "name": "Ontario", "size": 112}, {"children": [{"children": [], "imageURL": "", "type": "Manitoba", "name": "Manitoba", "size": 46}, {"children": [], "imageURL": "", "type": "Saskachewan", "name": "Saskachewan", "size": 47}], "imageURL": "", "type": "Prarie", "name": "Prarie", "size": 93}, {"children": [{"children": [], "imageURL": "", "type": "Quebec", "name": "Quebec", "size": 55}], "imageURL": "", "type": "Quebec", "name": "Quebec", "size": 55}, {"children": [{"children": [], "imageURL": "", "type": "Alberta", "name": "Alberta", "size": 58}, {"children": [], "imageURL": "", "type": "British Columbia", "name": "British Columbia", "size": 67}], "imageURL": "", "type":...