requirements:
- Elasticsearch 1.0
- elasticsearch.angular.js
requirements:
'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' | |
}); | |
}); | |
<!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> |