ElasticSearch(이하 ES) 엔진에 수집된 데이터에 대하여 Kibana 도움 없이 직접 Data Visualization 하는 기술 스택을 알아보고, 실데이터를 통한 화면 1본을 만들어 본다.
ES 시각화를 위한 다양한 방식의 시도들
사전조사-1) 직접 클라이언트 모듈 제작하여 Data Visualization 수행
- elasticsearch.js 또는 elatic.js 사용하지 않고 REST 호출 통해 데이터 시각화 수행
(Protovis 는 D3.js 기반 Chart를 사용함)
- FullScale.co에서는 dangle 이라는 시각화 차트를 소개함
(D3.js 기반의 AngularJS Directives 차트)
- D3.js 기반의 전문적인 차트를 사용하는 방법을 익힐 수 있다. 하지만 제대로 갖춰진 ES 클라이언트 모듈의 필요성 대두
사전조사-2) elasticsearch.js 사용하여 Data Visualization 수행
- elasticsearch.js와 D3.js, jquery, require.js를 통해서 샘플 데이터를 시각화 수행
(AngularJS는 사용하지 않고, 전문적인 차트 모듈사용하지 않음)
- AngularJS 기반으로 Protovis 또는 Dangle 차트를 사용하여 표현해 본다.
사전조사-3) elastic.js 사용하여 Data Visualization 수행
- elastic.js 홈페이지에서 API를 숙지한다.
- DSL API를 살펴보자. DSL을 이해하기 위해서는 ES의 Search API에 대한 이해가 필요하다.
- Query를 작성하고 Filtering 하면 group by having과 유사한 facets (지금은 aggregation 을 사용)하여 검색을 한다.
Query -> Filter -> Aggregation에 대해 알면 DSL구성을 이해할 수 있다.
- 자신의 Twitter 데이터를 가지고 elastic.js와 angular.js를 사용하여 트윗 내용을 표현하는 방법 (GitHub 소스)
ES Data Visualization을 위한 나만의 Tech Stack 만들기
- ES 클라이언트 모듈 : elastic.js 의 DSL(Domain Specific Language)를 숙지한다.
elastic.js는 ElasticSearch의 공식 클라이언트 모듈인 elasticsearch.js 의 DSL 화 모듈로 namespace는 ejs 이다.
- 시각화를 위한 D3.js 의 개념 이해 (D3.js 배우기)
- Kibana에서 사용하고 있는 Frontend MV* Framework인 AngularJS (AngularJS 배우기)
- AngularJS 생태계 도구인 yeoman 을 통해 개발 시작하기 (generator-fullstack, Yeoman 사용방법)
- 물론 Node.js는 기본이다.
그래서 다음과 같이 정리해 본다.
- AngularJS 기반 Frontend 개발
1) Node.js 기초
2) Yeoman + generator-angular 기반
- D3.js 기반의 Chart 이며 AngularJS 바로 적용가능토록 Directives 화 되어 있는 차트 중 선택사용
1) Protovis
2) Dangle
3) Angular nvd3 charts (추천)
- elasticsearch.js를 DSL로 만든 elastic.js 사용
그래서 다시 그림으로 정리해본 기술 스택
ES Data Visualization 개발을 위한 구성 stack 그림
== 이제 만들어 봅시다!!! ==
환경설정
- node.js 및 yeoman 설치 : npm install -g generator-angular-fullstack 설치 (generator-angular는 오류발생)
- twitter bootstrap RWD 메뉴화면 구성 (기본 화면 구성)
- angular-ui의 angular-bootstrap 설치 : bower install angular-bootstrap --save
- elasticsearch.js 설치 : bower install elasticsearch --save
- elastic.js 설치 : bower install elastic.js --save
- angular-nvd3-directives chart 설치 : bower install angularjs-nvd3-directives --save
angular layout 구성
- 애플리케이션 생성 : GitHub Repository를 만들어서 clone 한 디렉토리에서 수행하였다
$ git clone https://github.com/elasticsearch-kr/es-data-visualization-hackerton
$ cd es-data-visualization-hackerton
$ yo angular-fullstack esvisualization
- main.html 과 scripts/controllers/main.js 를 주로 수정함
// main.html 안에 angular-nvd3.directives html 태그 및 속성 설정
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" ng-click="getImpression()" class="btn btn-default">Impression Histogram</button>
</div>
<div class="panel-body">
<!-- angular-nvd3-directives : multi-bar chart -->
<div class="col-xs-12 col-md-12">
<nvd3-multi-bar-chart
data="impressionData"
id="dataId"
xAxisTickFormat="xAxisTickFormatFunction()"
width="550"
height="350"
showXAxis="true"
showYAxis="true">
<svg></svg>
</nvd3-multi-bar-chart>
</div>
</div>
</div>
</div>
</div>
// main.js 안에서 elasticsearch.js를 직접 호출하여 사용함
angular.module('esvisualizationApp')
.controller('MainCtrl', function ($scope, $http) {
// x축의 값을 date으로 변환하여 찍어준다
$scope.xAxisTickFormatFunction = function(){
return function(d){
return d3.time.format('%x')(new Date(d));
}
}
// 화면에서 클릭을 하면 impression index 값을 ES에서 호출하여
// ES aggregation json 결과값을 파싱하여 차트 데이터에 맵핑한다
$scope.getImpression = function() {
// ES 접속을 위한 클라이언트를 생성한다
var client = new elasticsearch.Client({
host: '54.178.125.74:9200',
sniffOnStart: true,
sniffInterval: 60000,
});
// search 조회를 수행한다. POST 방식으로 body에 실 search query를 넣어준다
client.search({
index: 'impression',
size: 5,
body: {
"filter": {
"and": [
{
"range": {
"time": {
"from": "2013-7-1",
"to": "2014-6-30"
}
}
}
]
},
"aggs": {
"events": {
"terms": {
"field": "event"
},
"aggs" : {
"time_histogram" : {
"date_histogram" : {
"field" : "time",
"interval" : "1d",
"format" : "yyyy-MM-dd"
}
}
}
}
}
// End query.
}
}).then(function (resp) {
var impressions = resp.aggregations.events.buckets[0].time_histogram.buckets;
console.log(impressions);
var fixData = [];
angular.forEach(impressions, function(impression, idx) {
fixData[idx] = [impression.key, impression.doc_count];
});
// 결과에 대해서 promise 패턴으로 받아서 angular-nvd3-directives의 데이터 구조를 만들어 준다
// {key, values}가 하나의 series가 되고 배열을 가지면 다중 series가 된다.
$scope.impressionData = [
{
"key": "Series 1",
"values": fixData
}
];
// apply 적용을 해주어야 차트에 데이터가 바로 반영된다.
$scope.$apply();
});
}
});
결과 화면 및 해커톤 소감
- "Impression Histogram" 버튼을 클릭하면 차트에 표현을 한다.
- elastic.js의 DSL을 이용하면 다양한 파라미터에 대한 핸들링을 쉽게 할 수 있을 것같다.
- AngularJS 생태계와 elasticsearch.js(elastic.js)를 이용하면 Kibana의 도움 없이 자신이 원하는 화면을 쉽게 만들 수 있다.
- 관건은 역시 ES에 어떤 데이터를 어떤 형태로 넣느냐가 가장 먼저 고민을 해야하고, 이후 분석 query를 어떻게 짤 것인가 고민이 필요!
* 헤커톤 소스 위치 : https://github.com/elasticsearch-kr/es-data-visualization-hackerton
<참조>
- elasticsearch.js 공식 클라이언트 모듈을 DSL로 만든 elastic.js
- elastic.js를 사용한 ES Data Visualization을 AngularJS기반으로 개발
- Protovis 차트를 이용한 facet 데이터 표현
- ElasticSearch Data Visualization 방법
- D3.js 와 Angular.js 기반으로 Data Visualization
- ElasticSearch의 Facet과 Aggregation 수행 : 향후 Facet은 없어지고 Aggregation으로 대체될 것이다.
