JSFiddle - React, Tailwind, and code Playground

by Yosuke Kurami

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<body>
    <div class="container">
    <div ng-controller="MainCtrl as main">
        <div class="header">
  <h3>D3 Sample</h3>
</div>
<div class="row marketing" ng-controller="MainCtrl as main">
  <div class="col-md-12">
    <table class="table">
      <thead>
        <tr><th>#</th><th>name</th><th>users</th><th>action</th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="data in main.sampleData"><!-- data iteration {{{ -->
          <td>{{$index + 1}}</td>
          <td>{{data.name}}</td>
          <td> <input type="number" size="5" class="form-control input-sm" ng-model="data.users"> </td>
          <td>
            <button class="btn btn-sm btn-danger" ng-click="main.remove($index);">
              <span class="glyphicon glyphicon-minus-sign"></span>
              remove
            </button>
          </td>
        </tr><!-- }}} end iteration -->
        <tr><!-- new data {{{ -->
          <td>new</td>
          <td> <input type="text" size="10" placeholder="input name" class="form-control input-sm" ng-model="main.newData.name"> </td>
          <td> <input type="number" size="5" class="form-control input-sm" ng-model="main.newData.users"> </td>
          <td>
            <button class="btn btn-success btn-sm" ng-click="main.add()">
              <span class="glyphicon glyphicon-plus-sign"></span>
              add
            </button>
          </td>
        </tr><!--}}} new data -->
      </tbody>
    </table>
  </div>
  <div class="col-md-12">
    <div>

<svg ng-controller="PieLayoutCtrl as pieLayout" style="width:100%; height:220px">
  <g transform="translate(100,100)">
    <path
      ng-repeat="part in pieLayout.parts track by part.data.name"
      ng-attr-d="{{pieLayout.arc(part)}}"
      fill="{{::pieLayout.fill(part.data.name)}}"
    >
    </path>
 ...

JavaScript

angular.module('angularD3SampleApp', []);
angular.module('angularD3SampleApp').controller('MainCtrl', function () {

  var main = this;

  main.sampleData= [
    {name:'Chrome', users: 500},
    {name:'Internet Explorer', users: 200},
    {name:'Safari', users: 300}
  ];

  main.newData = {name: '', users: 0};

  main.add = function(){
    main.sampleData.push(main.newData);
    main.newData = {name: '', users: 0};
  };

  main.remove = function($index){
    main.sampleData.splice($index, 1);
  };

});

angular.module('angularD3SampleApp').factory('d3', function () {
  return d3;
});

angular.module('angularD3SampleApp').controller('PieLayoutCtrl', function (d3, $scope) {
  var pieLayout = this;
  var colorScale = d3.scale.category20();
  var arc = d3.svg.arc().outerRadius(100).innerRadius(50);

  pieLayout.fill = function (id) {
    return colorScale(id);
  };

  pieLayout.arc = function (part) {
    return arc(part);
  };

  $scope.$watch('main.sampleData', function (datum) {
    pieLayout.parts = d3.layout.pie().value(function (data) {
      return data.users;
    }).sort(null)(datum);
  }, true);

});

angular.element(document).ready(function() {
      angular.bootstrap(document, ['angularD3SampleApp']);
});