그래프 좋아하세요?

프로그래밍을 하다 보면 그래프를 작성해야 하는 상황이 많다.
학생 때 수학 문제를 풀다가 그래프가 나오는 문제가 있으면 완전 땡큐였는데, 프로그래밍에서 그래프를 만나면 그 정도는 아닌 것 같다.

그래프는 데이터를 시각적으로 표현하는데 수학적 함수, 수치 데이터, 통계 자료 등을 포함하여 다양한 유형의 데이터를 시각적으로 나타낼 수 있기 때문에 그래프를 사용하여 데이터의 관계와 추세를 분석할 수 있다.

하지만 종류가 매우 다양하기 때문에 적절한 선택이 필요하다.
(많은 건 좋은데 애매하게 많다면..?)

Plotly.js 사용하기

Plotly.js는 오픈 소스 데이터 시각화 라이브러리로 다양한 차트 유형(선 그래프, 막대그래프, 히스토그램, 산점도 등)을 지원하며, 인터랙티브한 기능(툴팁, 축 슬라이더, 드래그 및 드롭, 축 교환 등)을 포함한다.

또한 오픈 소스로 제공되며, 사용 가능한 소스 코드와 예제를 찾을 수 있고, Plotly.js를 사용하면 매우 활발한 개발자 커뮤니티와 지원을 받을 수 있다.
이러한 이점 때문에 데이터 시각화를 위한 오픈 소스 라이브러리 중에서 인기가 매우 높다고 한다.
(개발자 친화적인 게 최고야…)

내가 사용한 그래프는 막대 + 꺾은선 그래프와 히트맵이다. 막대 + 꺾은선 그래프는 가장 많이 쓰는 그래프기 때문에 무난하게 어려움 없이 코딩할 수 있었다.
x 값과 y 값은 서버로부터 가져온 데이터를 filter 해서 각각 넣어주었는데 세부적인 설정은 공식 문서를 참고했다.

히트맵(heatmap)은 데이터를 시각화하는 기법 중 하나로, 색상을 사용하여 값의 상대적인 크기를 나타내는 그래프를 말한다.
주로 2차원 배열로 표시되며, 각 요소는 값에 따라 색상으로 나타내어진다.

이를 통해 데이터의 분포와 패턴을 쉽게 파악할 수 있다.
나는 축구를 좋아하기 때문에 히트맵이 익숙했고, 그 분야에 사용될 줄 알았는데 지리 정보 시스템(GIS)이나 시장 세분화, 빅데이터 분석 등 다양한 분야에 사용된다고 한다.

히트맵 기준 값을 나누고 각 기준값에 따른 색상을 Hex 값으로 설정했는데 입력한 Hex 값과 전혀 다른 색이 나와서 조금 헤맸다.

Gauge.js 사용하기

Gauge.js는 JavaScript를 사용하여 생성된 동적으로 그려지는 게이지 또는 메터를 구현하는 데 사용되는 오픈 소스 라이브러리로 여러 가지 다른 종류의 게이지를 지원하며, 쉽게 사용할 수 있는 API를 제공한다.

또한 많은 사용자 지정 설정을 제공하여 디자인 및 기능을 개별적으로 조정할 수 있다.
Plotly.js와 마찬가지로 오픈 소스이므로 누구나 무료로 사용할 수 있다는 장점이 있다.
(게이지 전문 맛집이구먼…)

코드는 생각보다 복잡하지 않아서 다행이었지만 적용했을 때 화면 UI 부분에서 크기나 비율이 틀어지는 경우가 발생해서 수정하느라 힘들었다.
Plotly.js로 다 작성하려 했지만 마음에 드는 UI나 기능이 없어서 Guage.js를 사용하게 되었는데 무난하게 사용하기에는 좋았다.

레이아웃(Layout)이 뭔지 몰라서 그래프를 디자인하는 부분에 있어서 버벅였던 것 같다.
레이아웃은 디자인의 기본적인 개념으로, 컨텐츠의 배치와 구조를 결정하는 요소이며, 디자인의 시각적인 요소를 결정한다는데.. 예술적 감각이 없는 나로서는..

그래프를 만들다 보니 그래프를 사용한 웹 페이지나 작은 프로젝트의 주제들이 몇 개 떠올라서 쉬는 날에 도전해 볼 생각이다.