Angular D3 Directives with Elasticsearch

README.md

Creating an Angular D3 Directive with elasticsearch.angular.js

elasticsearch.js

requirements:

1. Elasticsearch 1.0
2. elasticsearch.angular.js

app.js

'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'
        });
    });

index.html

<!doctype html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css" />

  </head>
  <body ng-app="d3AngularApp">

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <script type="text/ng-template" id="pie.html">
        <div ng-controller="PieCtrl">
            <pie-chart bind="results.aggregations.by_pctbelowpovlevel.buckets"></pie-chart>
        </div>
    </script>

    <script type="text/ng-template" id="test.html">
        <div ng-controller="TestCtrl">
            <pie-chart bind="results.aggregations.by_state.buckets" ng-repeat="b in results.aggregations.by_state.buckets"></pie-chart>
        </div>
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular-route.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
    
    <script src="elasticsearch.angular.js"></script>
    <script src="app.js"></script>

  </body>
</html>