atsc의 블로그 atsc의 블로그

1. search 페이지 테이블 라이브러리를 활용하여 엘라스틱서치 인덱스 데이터를 테이블로 시각화하여 제공하는 페이지다. country-vaccinations 인덱스(country_vaccinations.csv 데이터)를 사용하였고, 일자별 접종 기록을 국가별로 제공해준다. 상단 Country search 입력란에 국가명을 입력하면 해당 국가에 대한 데이터가 조회된다. table.ejs search 페이지에 대한 frontend 코드는 위와 같다. 공통 헤더와 datatable 모듈, 공통 내비게이션을 불러온다. 내비게이션에는 국가명 검색 기능을 위한 검색창을 추가해주었다. 페이지 시작 시 자동 완성을 위해 국가 리스트를 불러오는 함수인 getCountryList를 호출하고, 테이블을 생성해주는 draw..

1. map 페이지 좌측 상단 map을 선택하면 맵 차트 페이지로 이동한다. 이 페이지에서는 세 가지 옵션을 제공하는데, 우측 상단 버튼을 통해 선택 가능하다. 첫 번째(People Vaccinated)는 국가별 백신 접종 인원 비율, 두 번째(People Fully Vaccinated)는 국가별 백신 접종 완료율, 세 번째(Total Vaccinated)는 국가별 전체 백신 접종 횟수에 대한 비율을 보여준다. worldmap.ejs 맵 페이지에 대한 frontend 코드다. 상단 공통 헤더와 highmap 모듈을 위한 헤더를 불러왔고, 공통 navebar를 불러왔다. 또 내비게이션 바 내에 세 가지 옵션을 위한 버튼을 추가하였고, 각 버튼에는 drawWorldMap이라는 함수를 이벤트 리스너를 등록해두..

히트맵은 두 가지 범주를 기준으로 하는 데이터를 시각화한 차트다. 수치 데이터의 범위별로 색상을 달리하여 각 칸 내에 데이터를 표현하는데, 높은 수치르의 경우 진하게 표시하고 낮은 수치를 연하게 표시하는 방식으로 차트를 그린다. 때문에 구체적인 수치 확인 없이 색상 패턴을 통해 직관적으로 데이터 현황을 파악할 수 있다는 장점이 있다. 위 차트는 국가별/백신 제조업체별 백신 접종 횟수를 시각화한 히트맵이다. y축은 백신 제조사, x축은 국가 카테고리이다. 즉, 이 차트를 통해 각 국가별로 백신 제조사별 백신 접종 횟수를 알 수 있다. x축의 국가 조건은 특별한 기준 없이 프랑스, 독일, 이탈리아, 미국을 고정값으로 지정하였다. router.post("/heatmap", async (req, res) => ..

라인 차트는 기본적으로 컬럼 차트와 유사하고 만드는 방식도 거의 비슷하다. 그러나 컬럼 차트의 목적이 다른 항목들 간 값을 비교하는 것이라면 라인 차트는 하나의 항목에 대해 값의 변화량을 관찰하기 위해 주로 사용된다는 점에서 차이가 있다. 라인 차트는 시간 경과에 따라 데이터 흐름을 파악하는 데에 유용하다. 또한 여러 개의 라인을 통해 동등한 기준 내 다른 항목들 간 변화량의 차이를 비교할 수도 있다. 여기에서는 백신 접종자수 비율 상위 5개 국가의 백만명 당 월별 백신 접종 횟수 데이터를 사용하였다. 국가 수가 많다보니 차트 형태를 단순화하기 위해 컬럼 차트에서 사용한 기준으로 상위 5개국으로 대상을 제한하였으며, 일별 데이터를 사용할 경우 데이터가 지나치게 많아 차트가 복잡해지거나 보여줄 기간을 제한..

칼럼 차트는 각 항목들이 지닌 값을 직접 비교를 하는 데에 사용된다. 여기에서는 백신 접종 완료자수 백분율 상위 10개국에 대한 데이터를 사용하였다. 그러나 인구가 적은 국가가 백신 접종 속도에 상대적으로 유리하여 대부분 상위권을 차지하여 의미 있는 데이터 확인이 불가능했기 때문에 백신 접종자수 10만명 이상인 국가라는 조건을 추가하였다. router.post("/column", async (req, res) => { const query = ` SELECT country, MAX(people_fully_vaccinated_per_hundred) as value FROM "country-vaccinations" WHERE people_fully_vaccinated_per_hundred > 0 AND pe..

1. highchart 사용하기 이 예제에서는 highchart의 데모 예제 코드를 그대로 가져와서 커스터마이징을 하였다. 특별한 형태로 차트를 만들어야 하는 경우가 아니라면 대부분 유형의 차트는 데모에 이미 만들어져 있으므로 예제 코드를 그대로 가져와서 데이터와 디자인만 커스터마이지하면 웬만한 차트는 그릴 수 있다. highchart 웹페이지에 접속하여 상단 demo 메뉴의 Highcharts Demos를 선택하면 다양한 유형의 차트 예제를 확인할 수 있다. 데모 차트 하나를 선택하면 해당 차트를 자세히 확인할 수 있다. EDIT IN JSFIDDLE 버튼을 클릭하면 해당 차트의 상세 코드를 확인할 수 있는 JSfiddle 페이지가 열린다. 2. piechart 파이차트는 전체에 대한 각 비율을 백분율..

1. charts 페이지 Number of people vaccinated in the world Number of people fully vaccinated in the world 앞서 살펴본 charts.ejs 코드다. 공통 헤더(header.ejs)와 charts 페이지용 script(hc.ejs), navbar를 import하였다. 총 5개의 차트를 위한 영역을 만들어놓았고, 각 차트들은 각각의 script에서 작성된 함수가 호출되면서 그려진다. charts.js const express = require('express'); const router = express.Router(); const { getDataUsingSql, getDataQdsl } = require("./getdata"); ..

1. node.js elasticsearch 모듈 설치하기 node.js에서 elasticsearch를 사용하기 위해 npm으로 모듈을 설치한다. 다음 명령어로 모듈을 설치한다 npm install @elastic/elasticsearch 모듈에 대한 상세한 정보와 사용법은 elastic 홈페이지에서 공식 문서를 통해 확인할 수 있다.(https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html) 2. getdata: elasticsearch SQL과 Query Dsl을 이용한 데이터 조회 getdata.js const { Client } = require('@elastic/elasticsearch'); con..