2022년도 - 23번째 주의 개발일기
주제별 이야깃거리
- 시각화 라이브러리(d3.js) 사용기(2)
- 아이디어를 기반으로 새로운 프로젝트 진행해보기(2)
개발 푸념
- 협업이란..?
시각화 라이브러리(d3.js) 사용기(2)
데이터를 시각화하는 작업을 진행하고 있다. 이번주에 진행한 내용은 그렇게 많지 않았지만, 의미있는 작업을 했던 것 같아 조금 뿌듯하다.
우선 두가지 기능을 추가했는데,
- 그래프 드래그 기능
- Tooltip
이다. 두 가지 기능의 의미는 다음과 같다.
그래프 드래그 기능 : Timeseries기반의 시각화를 하고 있기 때문에, 드래그를 통해 시간범위를 가져올 수 있다. 나는 드래그 시작점과 끝점의 시간을 통해 재검색 기능을 넣을 생각이다.
샘플 사진 ↓
Tooltip : 그래프에 마우스 오버하면 해당 그래프의 상세정보를 볼 수 있도록 Tooltip을 넣었다.
샘플 사진 ↓
이게 의미있는 작업이 된 이유는, 우선 마우스 위치에 따른 x, y축 데이터를 계산하는 과정을 거쳤기 때문이다. 시각화 뷰를 svg로 만들면서 가장 먼저 해야했던 것은 x, y축의 범위를 계산하는 함수를 만드는 것이었다. 기본적으로 d3.js는 시각화 라이브러리다. 기본적인 그래프 형태는 2차원(x,y)로 표현될 수 있고, 이는 좌표랑 똑같다고 볼 수 있다.
그렇다면 결국 x축을 위치를 구하는 함수와 y축의 위치를 구하는 함수를 만들고, 각 위치에 점을 찍어 이어주면 그래프를 그릴 수 있다.
d3.js에서는 domain이란 함수와 range라는 함수를 통해, x,y축의 위치를 계산해주는 함수를 만들 수 있다.
// x축의 위치를 구하는 함수
const x = d3.scaleTime().domain([실제 값 범위]).range([픽셀 범위])
// y축의 위치를 구하는 함수
const y = d3.scaleLinear().domain([실제 값 범위]).range([픽셀 범위])각 d3.js 함수의 자세한 설명은 d3.js 포스트에서 따로 설명하려고 한다.
이렇게 x, y값을 구하는 함수를 만들면, 2차원 그래프는 간단히 만들 수 있다. 이제 중요한 것은, 이 함수를 통해 x,y축의 값을 구하는 것 뿐만 아니라, 마우스의 위치값을 통해 x,y의 값 역시 알 수 있다는 것이다. 이는 간단한 원리인데, x,y축의 값은 브라우저의 특정 위치에 그려지므로, 그 값은 이미 계산되어 그려져 있는 상태이다. 그래서 위의 x,y값에 리턴되는 값은 여러가지 결과를 가지고 있는데, 그중에 invert함수를 이용하면 해당 축의 값을 구할 수 있다.
예를 들면 다음과 같이 활용할 수 있다.
// e는 mouse의 이벤트 객체 파라미터이다.
const pos = d3.mouse(e)
// 간혹 이상한 값이 들어갈 수도 있는데, 이 때는 e.x값을 직접 넣어도 된다.
x.invert(pos[0])나는 마우스가 위치한 곳의 시간을 알고싶다. -> x.invert(pos[0])는 마우스가 위치한 곳의 시간값을 리턴해준다. 정확히 얘기하면 시간 값이 아닌, x에 해당하는 값을 리턴해준다. 그럼 나는 시간을 알기 때문에, y값을 유추할 수 있다. 이미 데이터에 y값이 매칭이 되어 있기 때문이다.
이런식으로 시각화된 그래프 상에서 마우스위치에 따른 시간을 알 수 있고, y축의 값을 알 수 있으니 Tooltip을 구현할 수 있었다.
이를 응용하면? drag를 구현할 수 있다. drag는 마우스 클릭시점과, drag범위, 마우스 클릭이 끝나는 시점을 이벤트객체를 통해 잡는것 뿐이다. drag범위의 표시는 rect태그를 이용하여 표시하였다.
이정도 하니까 속이 좀 시원했는데, 나름 마무리라고 생각하여 마무리할려고 보니, 아직 할게 엄청 많이 남아있었다.
대표적으로는 이런것들이다.
- 연속적인 데이터를 그렸는데, 비어있는 공간을 매꿔야하는 문제(시간값이 없는 데이터를 어떻게 표시할 것인지)
- tick을 표현하는 방법
- 그래프를 설정으로 컨트롤 하는 기능
- 등등
검색결과를 시각화로 표현하는 것을 생각하고 있는데, 이걸 하면 자연스럽게 대시보드도 만들 수 있을 것 같다. 독립적인 시각화 라이브러리 툴로 만들면? 다른 프로젝트에서도 쓸 수 있는 물건이 될 것 같기도.. 다음주에도 의미있는 작업을 더 진행해보면 좋겠다.
아이디어를 기반으로 새로운 프로젝트 진행해보기(2)
이번주에 그래프에 드래그 기능을 넣었는데, 드래그를 하여 얻은 시간 데이터를 통해 로그의 검색결과를 사이드뷰에 표시하는 아이디어를 구현해봤다. 단순한 재검색일 뿐이었는데, 보기엔 좋았다. 특히 로그데이터같은경우는 한번에 의미파악을 할 수가 없기 때문에, 특정 시간 범위를 보거나, 이상한 부분이 보이면 그부분만 검색하는 기능이 꽤나 유용할 수 있다. 특히 장애(401, 404, 503 등)가 일어나는 경우 빠르게 그 부분만 검색할 수 있기 때문에, 시각화는 필수적이라고 볼 수 있다. 음.. 얼른 이 기능을 제공해줄 수 있으면 좋겠다는 생각이 든다.
이 아이디어가 큰 도움이 될 것 같은데, d3.js의 완성도 역시 높아져야하고.. 실무에서 쓰기위해서는 버그에 대한 검증역시 이루어져야하기 때문에.. 이번주에는 좀 더 기능쪽에 무게를 두고 작업할 것 같다.
협업이란..?
협업이란 뭘까. 의사소통이 잘 되지 않는 이유는 여러가지가 있다. 우선 서로 안친한것이 이유가 될수도 있고.. 이전에 안좋은 일이 있었을 수도 있고. 편견이 생겨서 그럴수도 있고. 그냥 마음에 안들어서 그럴수도 있다. 이유를 만들어내는건 쉽다.
서로의 이야기를 좀 들어줄 수 있어야하는데, 내맘처럼 되지 않는다. 나는 잘 얘기할 수 있는데, 다른사람들은 아닌것같다. 이미 머리속에 박혀있는 다른 사람의 이미지가 쉽게 바뀌지 않는다. 좀 더 마음을 열어달라고 하고싶은데.. 사람 마음이 쉽게 변하지 않는다는게 이런데서 제대로 경험해보는 것 같다.
어떻게 보면 종이 한장 차이인데, 또 어떻게 보면 엄청난 크레바스가 사람 사이에 있는 것 같다.
내가 해야 할 일은 무엇일까.. 이번주에 고민이다.
