Column Chart Directive

<!DOCTYPE html>
<html data-ng-app="angularD3">

<head>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script type="text/javascript" src="ngCharts.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

<body data-ng-controller="randomDataCtrl">
  <data-column-chart data-dataset="dataset" width="550" height="100"></data-column-chart>
  <button data-ng-click="generateDataset()">Update Data</button>
</body>

</html>

var mod = angular.module('ngCharts', []);

mod.directive('columnChart', function(){
	return {
		replace: true,
		template: '<div></div>',
		scope: {
			dataset: '=',
			width: '@',
			height: '@'
		},
		link: function(scope, elem, attrs) {
			var svg = d3.select(elem[0])
						.append('svg')
						.attr('width', scope.width)
						.attr('height', scope.height);

			svg.selectAll('rect')
				.data(scope.dataset)
				.enter()
				.append('rect')
				.attr('x', function(d, i){
					return i * (scope.width / scope.dataset.length);
				})
				.attr("y", function(d) {
					return scope.height - d;
				})
				.attr('width', scope.width / scope.dataset.length - 2) //2px padding between bars
				.attr('height', function(d){
					return d * 5;
				})
				.attr("fill", "#1a66ff");

			svg.selectAll("text")
			   .data(scope.dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
					return d;
				})
				.attr('x', function(d, i){
					return i * (scope.width / scope.dataset.length) + 5;
				})
				.attr("y", function(d) {
					return scope.height - d + 15;
				})
				.attr("font-family", "sans-serif")
				.attr("font-size", "11px")
				.attr("fill", "#f6f4f4");

			scope.$watchCollection('dataset', function() {				
				svg.selectAll('rect')
					.data(scope.dataset)
					.transition()
					.attr("y", function(d) {
						return scope.height - d;
					})
					.attr('height', function(d){
						return d * 5;
					});

				svg.selectAll('text')
					.data(scope.dataset)
					.transition()
					.text(function(d) {
						return d;
					})
					.attr("y", function(d) {
						return scope.height - d + 15;
					});
			});
		}
	};
});

var app = angular.module('angularD3', ['ngCharts']);
app.controller('randomDataCtrl', function($scope) {

  $scope.dataset = [];

  $scope.generateDataset = function() {
    $scope.dataset = []; // clear
    for (var i = 0; i < 20; i++) { // generate 25 numbers
      $scope.dataset.push(Math.floor(Math.random() * 70 + 30)); // generate numbers between 30 to 99
    }
  };

  $scope.generateDataset();
});