example fo rusing d3

Author: ehmkah

app/index.html

@@ -77,13 +77,16 @@ <h3 class="text-muted">whatami</h3>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-touch/angular-touch.js"></script>
     <script src="bower_components/modernizr/modernizr.js"></script>
+    <script src="bower_components/d3/d3.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/about.js"></script>
         <script src="scripts/controllers/place.js"></script>
+        <script src="scripts/services/d3service.js"></script>
+        <script src="scripts/directives/simplelinechart.js"></script>
         <!-- endbuild -->
 </body>
 </html>

app/scripts/app.js

@@ -15,7 +15,8 @@ angular
     'ngResource',
     'ngRoute',
     'ngSanitize',
-    'ngTouch'
+    'ngTouch',
+    'd3'
   ])
   .config(function ($routeProvider) {
     $routeProvider

app/scripts/directives/simplelinechart.js

@@ -0,0 +1,86 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name whatamiApp.directive:simpleLineChart
+ * @description
+ * # simpleLineChart
+ */
+angular.module('whatamiApp')
+  .directive('simpleLineChart', ['d3Service', function(d3Service) {
+      return {
+        restrict: 'EA',
+        scope: {},
+        link: function(scope, element, attrs) {
+          d3Service.d3().then(function(d3) {
+
+            var margin = {top: 20, right: 20, bottom: 30, left: 50},
+              width = 600 - margin.left - margin.right,
+              height = 700 - margin.top - margin.bottom;
+
+            var parseDate = d3.time.format('%d-%b-%y').parse;
+
+            var x = d3.time.scale()
+              .range([0, width]);
+
+            var y = d3.scale.linear()
+              .range([height, 0]);
+
+            var xAxis = d3.svg.axis()
+              .scale(x)
+              .orient('bottom');
+
+            var yAxis = d3.svg.axis()
+              .scale(y)
+              .orient('left');
+
+            var line = d3.svg.line()
+              .x(function(d) { return x(d.date); })
+              .y(function(d) { return y(d.close); });
+
+            var svg = d3.select(element[0]).append('svg')
+             .attr('width', width + margin.left + margin.right)
+             .attr('height', height + margin.top + margin.bottom)
+             .append('g')
+             .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+            // Hard coded data
+            scope.data = [
+              {date: '4-Apr-12', close: 34},
+              {date: '5-Apr-12', close: 45},
+              {date: '6-Apr-12', close: 37},
+              {date: '7-Apr-12', close: 56},
+              {date: '8-Apr-12', close: 50},
+              {date: '9-Apr-12', close: 77}
+            ];
+
+            scope.data.forEach(function(d) {
+              d.date = parseDate(d.date);
+              d.close = +d.close;
+            });
+
+            x.domain(d3.extent(scope.data, function(d) { return d.date; }));
+            y.domain(d3.extent(scope.data, function(d) { return d.close; }));
+
+            svg.append('g')
+              .attr('class', 'x axis')
+              .attr('transform', 'translate(0,' + height + ')')
+              .call(xAxis);
+
+            svg.append('g')
+              .attr('class', 'y axis')
+              .call(yAxis)
+              .append('text')
+              .attr('transform', 'rotate(-90)')
+              .attr('y', 6)
+              .attr('dy', '.71em')
+              .style('text-anchor', 'end')
+              .text('Price ($)');
+
+            svg.append('path')
+              .datum(scope.data)
+              .attr('class', 'line')
+              .attr('d', line);
+          });
+        }};
+      }]);

app/scripts/services/d3service.js

@@ -0,0 +1,28 @@
+'use strict';
+
+angular.module('d3', [])
+  .factory('d3Service', ['$document', '$q', '$rootScope', function($document, $q, $rootScope) {
+    var d = $q.defer();
+    function onScriptLoad() {
+      // Load client in the browser
+      $rootScope.$apply(function() { d.resolve(window.d3); });
+    }
+    // Create a script tag with d3 as the source
+    // and call our onScriptLoad callback when it
+    // has been loaded
+    var scriptTag = $document[0].createElement('script');
+    scriptTag.type = 'text/javascript';
+    scriptTag.async = true;
+    scriptTag.src = 'bower_components/d3/d3.js';
+    scriptTag.onreadystatechange = function () {
+    if (this.readyState === 'complete') { onScriptLoad(); }
+  };
+  scriptTag.onload = onScriptLoad;
+
+  var s = $document[0].getElementsByTagName('body')[0];
+  s.appendChild(scriptTag);
+
+  return {
+    d3: function() { return d.promise; }
+  };
+}]);

app/styles/main.scss

@@ -90,3 +90,22 @@ body {
     border-bottom: 0;
   }
 }
+
+/* D3 */
+
+.axis path,
+.axis line {
+ fill: none;
+ stroke: #000;
+ shape-rendering: crispEdges;
+}
+
+.x.axis path {
+ display: none;
+}
+
+.line {
+ fill: none;
+ stroke: steelblue;
+ stroke-width: 1.5px;
+}

app/views/place.html

@@ -7,3 +7,5 @@
 <img ng-show="isGeolocating" src="images/red-dot.png"/>
 <img ng-hide="isGeolocating" src="images/green-dot.png"/>
 {{positions}}
+
+<div simple-line-chart></div>

bower.json

@@ -11,7 +11,8 @@
     "angular-resource": "^1.3.0",
     "angular-route": "^1.3.0",
     "angular-sanitize": "^1.3.0",
-    "angular-touch": "^1.3.0"
+    "angular-touch": "^1.3.0",
+    "d3": "~3.5.2"
   },
   "devDependencies": {
     "angular-mocks": "~1.3.0",

test/spec/directives/simplelinechart.js

@@ -0,0 +1,20 @@
+'use strict';
+
+describe('Directive: simpleLineChart', function () {
+
+  // load the directive's module
+  beforeEach(module('whatamiApp'));
+
+  var element,
+    scope;
+
+  beforeEach(inject(function ($rootScope) {
+    scope = $rootScope.$new();
+  }));
+
+  it('should make hidden element visible', inject(function ($compile) {
+    element = angular.element('<simple-line-chart></simple-line-chart>');
+    element = $compile(element)(scope);
+    expect(element.text()).toBe('this is the simpleLineChart directive');
+  }));
+});

test/spec/services/d3service.js

@@ -0,0 +1,18 @@
+'use strict';
+
+describe('Service: d3Service', function () {
+
+  // load the service's module
+  beforeEach(module('whatamiApp'));
+
+  // instantiate service
+  var d3Service;
+  beforeEach(inject(function (_d3Service_) {
+    d3Service = _d3Service_;
+  }));
+
+  it('should do something', function () {
+    expect(!!d3Service).toBe(true);
+  });
+
+});