D3JS stacked bar chart

by Rishabh Sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div ng-controller="MyCtrl as vm">
  <line-chart data="vm.data"></line-chart>
</div>

CSS

.stacked-bar-chart {
  display: block;
}

JavaScript

angular.module('myApp', [])
  .controller('MyCtrl', function($scope) {
    this.data = [{
      "Month": "Jan",
      "P": 310504,
      "I": 552339,
      "D": 259034
    }, {
      "Month": "Feb",
      "P": 52083,
      "I": 85640,
      "D": 42153
    }, {
      "Month": "Mar",
      "P": 515910,
      "I": 828669,
      "D": 362642
    }, {
      "Month": "Apr",
      "P": 202070,
      "I": 343207,
      "D": 157204
    }, {
      "Month": "May",
      "P": 2704659,
      "I": 4499890,
      "D": 2159981
    }, {
      "Month": "Jun",
      "P": 358280,
      "I": 587154,
      "D": 261701
    }, {
      "Month": "Jul",
      "P": 211637,
      "I": 403658,
      "D": 196918
    }, {
      "Month": "Aug",
      "P": 59319,
      "I": 99496,
      "D": 47414
    }];
  })
  .directive('lineChart', function($window) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        data: '='
      },
      template: '<div class="stacked-bar-chart"></div>',
      link: function(scope, element, attrs, fn) {

        var d3 = $window.d3;
        var colors = {
          P: "#F3595B",
          I: "#01B0F1",
          D: "#ACD378"
        };

        // Set the dimensions of the canvas / graph
        var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 30
          },
          width = 800 - margin.left - margin.right,
          height = 300 - margin.top - margin.bottom;

        // Adds the svg canvas
        var svg = d3.select(element[0])
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x = d3.scaleBand()
          .rangeRound([0, width])
          .padding(0.1)
          .align(0.1);

        var y = d3.scaleLinear()
          .rangeRound([height, 0]);

        var z =...