<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Dashboard on</title><link>https://taetaetae.github.io/tags/dashboard/</link><description>Recent content in Dashboard on</description><generator>Hugo</generator><language>en</language><lastBuildDate>Wed, 17 Feb 2021 16:53:49 +0900</lastBuildDate><atom:link href="https://taetaetae.github.io/tags/dashboard/index.xml" rel="self" type="application/rss+xml"/><item><title>Elastic Stack으로 코로나19 대시보드 만들기 - 2부 : 대시보드</title><link>https://taetaetae.github.io/posts/make-dashboards-from-elasticstack-2/</link><pubDate>Wed, 17 Feb 2021 16:53:49 +0900</pubDate><guid>https://taetaetae.github.io/posts/make-dashboards-from-elasticstack-2/</guid><description>&lt;p>　&lt;a href="https://taetaetae.github.io/posts/make-dashboards-from-elasticstack-1/" rel="">지난 포스팅&lt;/a>에서는 ﻿데이터를 수급하며 전처리 과정을 거쳤고, Filebeat와 Logstash를 거쳐 Elasticsearch에 인덱싱 하는 것까지 알아보았다. 앞선 포스팅에서 이야기했지만 단순하게 데이터를 시각화 도구를 이용해서 대시보드를 만드는 게 아니라 데이터가 추가되면 만들어둔 대시보드에 자동으로 반영되는 흐름을 만들고 싶었다. 마침 파이프라인을 이틀 전에 만들었기 때문에 그동안의 빠진 데이터를 추가해야 하는 상황이다. 이 경우 Filebeat-Logstash-Elasticsearch 가 실행 중이라면 앞서 작성했던 파이썬 스크립트만 한번 실행해 주면 이틀 치 데이터가 파이프라인을 거쳐 Elasticsearch로 인덱싱이 된다. 즉, 별도로 데이터를 가져와서 재 가공하고 추가하는 다소 까다로운 작업이 미리 만들어둔 파이프라인 덕분에 한 번의 스크립트 실행으로 손쉽게 처리가 됨을 알 수 있다.&lt;/p>
&lt;p>　이제는 쌓여있는 데이터를 가지고 시각화를 해볼 차례이다. ElasticStack에서는 Kibana라는 강력한 시각화 도구를 제공하는데 이번 포스팅에서는 Kibana를 이용해서 대시보드를 만드는 방법에 대해 알아보려 한다.&lt;/p>
&lt;h2 id="visualize">Visualize&lt;/h2>
&lt;p>　﻿Elasticsearch에 인덱싱 되어있는 데이터들은 기본으로 제공되는 REST API를 통해서 조회할 수 있고 JSON 형태로 결과가 나오기 때문에 이를 가지고 다양하게 시각화를 할 수도 있다. 하지만 Kibana에서는 데이터를 조회하고 UI로 표현하는 일련의 모든 행위를 클릭 몇 번으로 할 수 있게 해주기 때문에 전문가가 아니더라도 조금만 만져보면 누구나 만들 수 있다.&lt;/p>
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/visualize-main.jpg" title="/images/make-dashboards-from-elasticstack-2/visualize-main.jpg" data-thumbnail="/images/make-dashboards-from-elasticstack-2/visualize-main.jpg" data-sub-html="&lt;h2>New Visualizaion!!&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/visualize-main.jpg"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/visualize-main.jpg, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/visualize-main.jpg 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/visualize-main.jpg 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-2/visualize-main.jpg" width="80%" />
 &lt;/a>&lt;figcaption class="image-caption">New Visualizaion!!&lt;/figcaption>
 &lt;/figure>
&lt;p>　버전업이 되면서 비쥬얼라이즈를 만드는 첫 화면 또한 변화가 생겼다. 기존에는 어떤 유형의 비쥬얼라이즈를 선택할 것인지에 대해 선택하는 화면부터 나왔는데 만드는 걸 보다 편리하게 도와주는 &lt;code>Lens&lt;/code>, &lt;code>TSVB&lt;/code> 같은 기능들이 먼저 반겨준다. 이 기능을 통해서 만드는 방법도 괜찮지만 보다 명시적으로 만들고 싶으니 하단에 &lt;code>Aggregation based&lt;/code>을 선택해서 원하는 비쥬얼라이즈의 타입을 선택해 보자. 이후 생성되어 있는 인덱스를 선택하면 본격적으로 비쥬얼라이즈를 그릴 수 있는 화면이 나오는데 대시보드 화면 기준으로 만들어야 할 항목별로 살펴보자.&lt;/p>
&lt;h3 id="전체-수">전체 수&lt;/h3>
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/1.jpg" title="/images/make-dashboards-from-elasticstack-2/1.jpg" data-thumbnail="/images/make-dashboards-from-elasticstack-2/1.jpg" data-sub-html="&lt;h2>.&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/1.jpg"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/1.jpg, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/1.jpg 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/1.jpg 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-2/1.jpg" width="80%" />
 &lt;/a>&lt;figcaption class="image-caption">.&lt;/figcaption>
 &lt;/figure>
&lt;p>　﻿확진자, 사망자, 격리 해제의 총합을 표현하려 한다. 이렇게 &amp;lsquo;숫자&amp;rsquo;를 표현하려 하는 경우 &lt;code>Metric&lt;/code>을 활용하곤 한다. 우측에서 Aggregation 방법을 &amp;lsquo;sum&amp;rsquo;으로 설정하고 필드는 유형별로 각각 선택해 주자. 아래 &amp;lsquo;Add&amp;rsquo;버튼을 눌러 확진, 사망, 격리 해제 수를 모두 표시한 다음 저장을 눌러준다. Label을 지정하지 않으면 어떤 형태로 Aggregation을 했는지를 Label 영역에 보여주는데 그게 보기 싫다면 원하는 텍스트로 지정해 주는 것도 방법이다.&lt;/p>
&lt;h3 id="최근-수">최근 수&lt;/h3>
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/2.jpg" title="/images/make-dashboards-from-elasticstack-2/2.jpg" data-thumbnail="/images/make-dashboards-from-elasticstack-2/2.jpg" data-sub-html="&lt;h2>.&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/2.jpg"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/2.jpg, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/2.jpg 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/2.jpg 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-2/2.jpg" width="80%" />
 &lt;/a>&lt;figcaption class="image-caption">.&lt;/figcaption>
 &lt;/figure>
&lt;p>　﻿확진자, 사망자, 격리 해제의 &amp;lsquo;최근 데이터&amp;rsquo;를 보여주는 게 목적이다. 이 경우 Aggregation을 Top Hit으로 선택하면 필드를 선택할 수 있게 되는데 하루의 데이터가 총 18 row이기 때문에 (서울, 부산, &amp;hellip;, 제주, 검역) 18 row 을 전부 더한 값이 하루 기준의 합계가 된다. 여기서 정렬을 날짜 기준 내림차순으로 해줘야 가장 최근 데이터의 합계가 되는 점도 신경 써야 한다.&lt;/p>
&lt;h3 id="각-타입별-합계">각 타입별 합계&lt;/h3>
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/3.jpg" title="/images/make-dashboards-from-elasticstack-2/3.jpg" data-thumbnail="/images/make-dashboards-from-elasticstack-2/3.jpg" data-sub-html="&lt;h2>.&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/3.jpg"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/3.jpg, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/3.jpg 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/3.jpg 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-2/3.jpg" width="80%" />
 &lt;/a>&lt;figcaption class="image-caption">.&lt;/figcaption>
 &lt;/figure>
&lt;p>　﻿지역별로 타입별 수를 보기 위해 &lt;code>Pie&lt;/code> 타입으로 선택하여 진행한다. 타입별(예로 들어 확진이면 confirmed)로 합계를 구하기 위해 Aggregation을 &amp;lsquo;sum&amp;rsquo;으로 설정하면 빈 원이 나오지만 각 지역별로 차트를 잘라서 봐야 하기에 하단의 Buckets의 Add를 누르고 regieon의 필드를 Terms Aggregation 한다. 18 row의 데이터가 전부 보여야 하기에 정렬 개수를 늘리고 option 탭에서 보는 취향에 알맞게 설정값들을 바꿔준다.&lt;/p>
&lt;h3 id="타입별-추이">타입별 추이&lt;/h3>
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/4.jpg" title="/images/make-dashboards-from-elasticstack-2/4.jpg" data-thumbnail="/images/make-dashboards-from-elasticstack-2/4.jpg" data-sub-html="&lt;h2>.&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/4.jpg"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/4.jpg, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/4.jpg 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-2/4.jpg 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-2/4.jpg" width="80%" />
 &lt;/a>&lt;figcaption class="image-caption">.&lt;/figcaption>
 &lt;/figure>
&lt;p>　﻿확진, 사망, 격리 해제 중에 사망을 제외하고 나머지 둘은 데이터의 크기가 크고 변화량이 비슷하기 때문에 x축은 시간으로 설정해두고 사망은 막대로, 나머지 둘은 라인으로 한 화면에서 표현하면 이 3가지 데이터를 한눈에 보기 좋을 것 같았다. &lt;code>Vertical bar&lt;/code> 을 선택하고 x축(Buckets &amp;gt; X-axis)은 데이터 타입인 convert_date로 설정한다. 다음으로 사망은 매일 몇 명 사망했는지 뚜렷하게 보기 위해 그냥 sum으로, 나머지 둘은 누적 합계가 더 의미 있어 보일 것 같아 Cumulative Sum으로 Aggregation을 한다. 한 화면에서 3가지의 데이터를 보여주기엔 다소 y 축의 크기가 맞지 않으므로 확진, 격리 해제를 별도의 y 축(Y-axes)으로 &amp;lsquo;Metrics &amp;amp; axes&amp;rsquo;탭에서 설정해 준다. 다음으로 각 항목의 범례를 위로 표시하여 보다 보기 편하게 배치한다.&lt;/p></description></item><item><title>Elastic Stack으로 코로나19 대시보드 만들기 - 1부 : 파이프라인 구성</title><link>https://taetaetae.github.io/posts/make-dashboards-from-elasticstack-1/</link><pubDate>Mon, 15 Feb 2021 17:50:12 +0900</pubDate><guid>https://taetaetae.github.io/posts/make-dashboards-from-elasticstack-1/</guid><description>&lt;p>﻿　얼마 전에 필자의 블로그를 보고 어느 교육 기관에서 ElasticStack에 대한 강의 요청이 들어왔다. 사실 관련 기술에 대해 지식이 아주 깊고 해박한 게 아니라서 약간의 반감부터 들었지만 ElasticStack을 전혀 모르는 사람들 기준으로 어떻게 돌아가는지에 대해서만 간단하게 소개하는 정도로 하면 된다고 하여 조심스럽지만 떨리는 마음으로 열심히 준비를 하기 시작했다. 그런데, 이런저런 이유로 갑자기 강의를 할 수 없게 되었고 그간 준비했던 내용들이 너무 아쉽지만 아무 소용이 없게 되어버렸다. 그냥 중단하기엔 아쉬운 마음이 너무 커서 준비했던 내용 중에 &amp;lsquo;데이터를 가지고 대시보드를 만드는 부분&amp;rsquo;은 누군가에겐 도움이 될까 싶어 블로그에 정리를 해보려 한다.&lt;/p>
&lt;blockquote>
&lt;p>﻿강의를 준비한 올해 1월 중순엔 Elasticsearch 버전이 7.10.2이었는데 블로그를 쓰고 있는 지금은 벌써 7.11으로 버전 업 되었다. 내가 아는 오픈소스 중에 버전업이 가장 빠른데 그렇다고 기능이 확 바뀌거나 습득하기 어렵게 바뀌진 않았다. 그만큼 사용자가 무엇을 원하는지 명확히 알고 작은 단위로 조금씩 바뀌어 가는 모습이 꽤 인상적이다.&lt;/p>&lt;/blockquote>
&lt;p>　﻿작년 초부터 코로나19 바이러스가 전 세계적으로 퍼지기 시작했고 아직까지도 진행 중이다. 나도 전염되는 건 아닐까 하는 두려움에 어디에서 얼마나 발생했는지를 확인하기 어렵던 시절 우리나라의 뛰어난 개발자들은 누가 시키지도 않았는데 정말 감사하게도 그 현황을 한눈에 볼 수 있도록 여러 유형으로 코로나19 바이러스 대시보드를 만들기 시작한다. 그 덕분에 좀 더 현황을 보기에 편해졌고 더욱 조심하게 되는 계기가 되었다고 생각한다. 이제는 포털사이트나 각종 매체를 통해 손쉽게 코로나19 바이러스의 현황을 볼 수 있지만 이러한 데이터를 가지고 검색엔진이지만 대시보드를 구축하는데 훌륭한 기능을 가지고 있는 ElasticStack을 활용해서 &amp;lsquo;나만의 대시보드&amp;rsquo;를 만드는 걸 정리해보고자 한다. 본 포스팅의 일회성으로 데이터를 가지고 대시보드를 만드는 것에서 끝나는 게 아니라 지속적으로 데이터가 업데이트된다는 가정하에 전반적인 &amp;ldquo;파이프라인&amp;quot;을 구축한 뒤 대시보드를 만들어 두고 데이터만 갱신하면 자동으로 대시보드 또한 업데이트되는 것을 목적으로 한다.
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/pipeline.png" title="/images/make-dashboards-from-elasticstack-1/pipeline.png" data-thumbnail="/images/make-dashboards-from-elasticstack-1/pipeline.png" data-sub-html="&lt;h2>전체 흐름&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/pipeline.png"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/pipeline.png, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/pipeline.png 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/pipeline.png 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-1/pipeline.png" width="100%" />
 &lt;/a>&lt;figcaption class="image-caption">전체 흐름&lt;/figcaption>
 &lt;/figure>&lt;/p>
&lt;blockquote>
&lt;p>﻿글을 모두 작성하고 보니 양이 생각보다 길어져서 데이터를 조회하고 필터링하여 Elasticsearch에 인덱싱 하는 대시보드를 만들기 위한 일종의 &amp;ldquo;데이터 파이프라인&amp;quot;을 구성하는 부분과 만들어진 데이터 기반으로 Kibana의 다양한 기능을 활용하여 대시보드를 만드는 2개의 포스팅으로 나누어 정리해보겠다.&lt;/p>&lt;/blockquote>
&lt;p>﻿　최종적으로 만들게 될 대시보드의 모습은 다음과 같다.
&lt;figure>&lt;a class="lightgallery" href="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png" title="/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png" data-thumbnail="/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png" data-sub-html="&lt;h2>최종 목표!&lt;/h2>">
 &lt;img
 class="lazyload"
 src="https://taetaetae.github.io/svg/loading.min.svg"
 data-src="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png"
 data-srcset="https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png 1.5x, https://taetaetae.github.io/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png 2x"
 data-sizes="auto"
 alt="/images/make-dashboards-from-elasticstack-1/kibana-dashboard.png" width="100%" />
 &lt;/a>&lt;figcaption class="image-caption">최종 목표!&lt;/figcaption>
 &lt;/figure>&lt;/p>
&lt;h2 id="대시보드-구성-준비">대시보드 구성 준비&lt;/h2>
&lt;p>　﻿예전에는 Elasticsearch, Logstash, Kibana 3가지를 가지고 ELK라 불리다 Beat라는 경량 수집기 제품이 등장하며 이 모든 걸 ElasticStack라 부르기 시작했다. (&lt;a href="https://www.elastic.co/kr/elastic-stack" target="_blank" rel="noopener noreffer ">공식 홈페이지 참고&lt;/a>) 먼저 어떤 목표와 어떤 순서로 대시보드를 구성할 것인지에 대해 정리해봐야겠다.﻿&lt;/p>
&lt;h3 id="데이터">데이터&lt;/h3>
&lt;p>　﻿데이터는 &lt;a href="https://data.go.kr" target="_blank" rel="noopener noreffer ">공공데이터 포털&lt;/a>에서 가져오려다 조회를 해보니 누락되는 날짜도 있었고 원하는 데이터의 품질이 생각보다 좋지 않아서 다른 곳을 찾아봐야 했다. 그러다 간결하게 정리한 데이터가 &lt;a href="https://github.com/jooeungen/coronaboard_kr" target="_blank" rel="noopener noreffer ">깃헙&lt;/a>에 공개가 되어 있어서 그것을 사용하려 한다. 해당 데이터는 &lt;a href="https://coronaboard.kr/" target="_blank" rel="noopener noreffer ">https://coronaboard.kr/&lt;/a> 에서도 사용되는 데이터라고 한다. ﻿&lt;/p>
&lt;h3 id="데이터-전처리preprocessing">데이터 전처리(preprocessing)&lt;/h3>
&lt;p>　﻿원하는 데이터는 위 깃헙에서 제공하는 데이터 중에 지역별 발생 현황. 해당 &lt;a href="https://raw.githubusercontent.com/jooeungen/coronaboard_kr/master/kr_regional_daily.csv" target="_blank" rel="noopener noreffer ">데이터&lt;/a>를 살펴보면 요일별로 데이터가 &amp;lsquo;누적&amp;rsquo;되어 저장되어 있다. 즉, 서울지역 기준으로 2020년 2월 17일에 14명이 발생했고 2020년 2월 18일에 한 명도 발생하지 않았는데 14명으로 &amp;lsquo;누적&amp;rsquo;되어 저장되어 있다. 사실 이대로 해도 큰 문제는 없지만 어디까지나 별도의 가공 없이 최대한 원본 데이터(raw) 가 있어야 데이터 분석 시 다양하게 활용이 가능하기에 데이터를 분석하기 전에 전처리 과정이 필요했다. 정리하면, 집계 수가 누적되지 않고 날짜 기준으로 집계된 수만 있는 데이터를 원했다.﻿&lt;/p>
&lt;p>　﻿필자는 주로 java를 가지고 개발을 하지만 가끔 간단한 스크립트성 개발은 python을 활용하는 편이기에 다소 이쁜 코드는 아니지만 데이터를 조작하려 아래와 같은 코드를 작성하였다.&lt;/p></description></item></channel></rss>