D3js with Angular

D3 bar chart with AngularJS for stack overflow documentation example.

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">
  <div>Value 1: ({{data[0]}}) 0
    <input type="range" name="points" id="points" value="50" min="0" max="100" ng-model="data[0]">100
  </div>
  <div>Value 2: ({{data[1]}}) 0
    <input type="range" name="points" id="points" value="50" min="0" max="100" ng-model="data[1]">100
  </div>
  <div>Value 3: ({{data[2]}}) 0
    <input type="range" name="points" id="points" value="50" min="0" max="100" ng-model="data[2]">100
  </div>
  <bar-chart data="data"></bar-chart>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyCtrl', function($scope) {
    $scope.data = [50, 40, 30];
    $scope.$watch('data', function(newVal, oldVal) {
      $scope.data = newVal;
    }, true);
  })
  .directive('barChart', function($window) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        data: '='
      },
      template: '<div id="bar-chart"></div>',
      link: function(scope, element, attrs, fn) {

        var data = scope.data;
        var d3 = $window.d3;
        var rawSvg = element;

        var colors = d3.scale.category10();

        var canvas = d3.select(rawSvg[0])
          .append('svg')
          .attr("width", 300)
          .attr("height", 150);

        scope.$watch('data', function(newVal, oldVal) {
          data = newVal;
          repaintChart();
        }, true);

        var xscale = d3.scale.linear()
          .domain([0, 100])
          .range([0, 240]);

        var yscale = d3.scale.linear()
          .domain([0, data.length])
          .range([0, 120]);

        var bar = canvas.append('g')
          .attr("id", "bar-group")
          .attr("transform", "translate(10,20)")
          .selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr("class", "bar")
          .attr("height", 15)
          .attr("x", 0)
          .attr("y", function(d, i) {
            return yscale(i);
          })
          .style("fill", function(d, i) {
            return colors(i);
          })
          .attr("width", function(d) {
            return xscale(d);
          });

        function repaintChart() {
          canvas.selectAll('rect')
            .data(data)
            .transition()
            .duration(800)
            .attr("width", function(d) {
              return xscale(d);
            })
        }
      }
    }
  });