'use strict'; angular.module('d3AngularApp', ['ngRoute', 'elasticsearch']) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'pie.html', controller: 'PieCtrl' }) .when('/test', { templateUrl: 'test.html', controller: 'TestCtrl' }) .otherwise({ redirectTo: '/' }); }) // controller - pie .controller('PieCtrl', ['$scope', 'es', function ($scope, es) { // creating our elasticsearch query var client = es; client.search({ index: 'acsplaces', size: 10, body: { "aggs" : { "by_pctbelowpovlevel" : { "range" : { "field" : "pctbelowpovlevel", "ranges" : [ { "to" : 10.0 }, { "from" : 10.0, "to" : 20.0 }, { "from" : 20.0, "to" : 30.0 }, { "from" : 30.0, "to" : 40.0 }, { "from" : 40.0, "to" : 50.0 }, { "from" : 50.0, "to" : 60.0 }, { "from" : 60.0, "to" : 70.0 }, { "from" : 70.0, "to" : 80.0 }, { "from" : 80.0, "to" : 90.0 }, { "from" : 90.0} ] } } } } }).then(function (data) { $scope.results = data; }); }]) // controller - Multiple Pies .controller('TestCtrl', ['$scope', 'es', function ($scope, es) { // creating our elasticsearch query var client = es; client.search({ index: 'acsplaces', size: 55, body: { "aggs" : { "by_state" : { "terms": { "field": "usps" }, "aggs" : { "by_pctbelowpovlevel" : { "range" : { "field" : "pctbelowpovlevel", "ranges" : [ { "to" : 10.0 }, { "from" : 10.0, "to" : 20.0 }, { "from" : 20.0, "to" : 30.0 }, { "from" : 30.0, "to" : 40.0 }, { "from" : 40.0, "to" : 50.0 }, { "from" : 50.0, "to" : 60.0 }, { "from" : 60.0, "to" : 70.0 }, { "from" : 70.0, "to" : 80.0 }, { "from" : 80.0, "to" : 90.0 }, { "from" : 90.0} ] } } } } } } }).then(function (data) { $scope.results = data; }); }]) // directive - piechart .directive('pieChart', function () { // our D3 directive return { restrict: 'E', scope: { bind: '=' }, link: function postLink(scope, element, attrs) { // d3 donut chart var width = 200, height = 200, radius = Math.min(width, height) / 2; var color = d3.scale.category10(); var arc = d3.svg.arc() .outerRadius(radius - 5) .innerRadius(radius - 60); var pie = d3.layout.pie() .sort(null) .value(function (d) { return d.doc_count; }); var svg = d3.select(element[0]).append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); scope.$watch('bind', function (data) { if (data) { var g = svg.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("stroke", "#ffffff") .style("stroke-width", 1) .style("fill", function (d) { if (d.data.key) { return color(d.data.key); } else if (d.data.to) { return color(d.data.to); } else { return color(d.data.from + 10); } }); g.append("text") .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .style("text-anchor", "middle") .style("fill", "white") .text(function (d) { return d.data.doc_count; }); } }); } }; }) // service - ejs .service('es', function (esFactory) { // AngularJS will instantiate a singleton by calling "new" on this function return esFactory({ host: 'localhost:9200' }); });