D3
본 문서는 2022년 1월 9일 에 작성되었습니다.
작성 시점에 HTML, CSS 를 다룰 수 있음을 전제하고 있습니다.
따라서 이에 대한 기초적인 설명은 하지 않고 있습니다.
저는 이 시리즈를 통해서 다음의 목표점을 설정하게 되었습니다.
- 표 를 그려낼 수 있을 것
- 데이터 시각화 가이드라인을 완성해볼 것
- Fake DB 및 Real DB 를 이용하여 간단한 시각화를 적용해 볼 것
- 총합 절차에 사용되는 그래프를 SVG 를 이용해 만들어 볼 것
이를 통해서 저는 다음의 두 가지 적용을 이뤄내고 싶습니다.
- 프론트앤드 단에서 고객들에게 시각화 정보를 제공
- 프론트앤드 단에서 백오피스 시각화 정보를 제공
참고 서적은 D3 를 이용한 시각적 스토리텔링 입니다.
앞으로 해당 D3 시리즈에서 언급할 본 도서 는 전부 이를 의미합니다.
D3 란 무엇인가?
D3 (Data-Driven Documents) 는 JavaScript 라이브러리 입니다.
이에서 알 수 있는 특징은 다음과 같습니다.
- Adobe Illustrator 처럼 다운로드 하지 않아도 된다.
- R 처럼 명령줄을 이용해 분석을 하거나 그래프를 그리지 않는다.
- Google Charts 나 Tableau Public 처럼 웹사이트에 접속해 사용하는 서비스가 아니다.
- D3 는 오픈소스이며, 수많은 함수와 메서드 등이 포함되어 있다.
그렇다면 D3 는 어떻게 이러한 기능을 구현해내고 있을까요?
# 원리
D3 는 다음과 같은 Data Point 를 가지고 있습니다.
- <circle>
- <rect>
- <path>
이러한 것들을 SVG 요소와 결합해 줍니다.
SVG 란 무엇인가?
프론트앤드 개발자 혹은 디자이너라면 한번 쯤 들어봤을 것이라고 생각합니다.
SVG 는 벡터 그래픽 이미지로,
크기를 축소하거나 확대해도 그에 맞춰 스스로 해상도를 조절하는 특징이 있습니다.
이 파일은 HTML 와 아주 비슷한 마크업 언어를 이용해서 작성되며,
<circle> 과 <line> 등을 이용해서 원과 선을 만들어 냅니다.
D3 선택 옳은가?
본 도서에서는 D3 를 사용하지 않되는 대상을 다음과 같이 언급하고 있습니다.
- 빠른 시각화를 원하는 경우 | Tableau, Excel
- 고급 분석이 필요한 경우 | R과 같은 언어 사용
또한 이러한 라이브러리 사용 시의 주의 사항을 다음과 같이 언급하고 있습니다.
D3 로 데이터 시각화를 하면,
누구나 해당 데이터에 접근할 수 있습니다.따라서 이에 대한 접근을 막고 싶다면,
별도의 프로세스가 필요할 것입니다.
이렇듯 본 도서에서는 D3 의 단점 및 취약점에 대해서 언급하고 있습니다.
그러나 D3 의 강력한 강점은 아름다운 디자인을 기획할 수 있는 것 에 있습니다.
이러한 점이 저의 마음을 강하게 사로잡았고
이것이 색다른 강점이 될 수 있다고 믿고 있습니다.
D3 사용 후기
본 챕터는 2022년 1월 13일 에 작성되었습니다.
퍼센트 데이터를 이용한 가로 막대기 그래프 에 대한 주제를 가지고
Vanilla JS 를 통한 SVG Tags Injection D3 | SVG from vanilla
D3.js 를 통한 SVG Tags Injection D3 | SVG from D3
ECharts.js 를 통한 SVG Tags Injection ECharts | SVG from ECharts
와 같은 시리즈를 진행해 보았다.
셋 모두 근본은 SVG Tags 에 대한 이해도가 필요했으며,
내가 작성한 코드에 기본한다면 Vanilla JS 에 대한 개념도 필요했으며,
또한 Next.js 나 Spring 에서 쓰이는 DI 에 대한 아이디어를 받아서,
모든 HTML Tags 를 외부에서 주입하는 방식으로 문제를 해결해보려 했다.
그 결과 SVG 에 대해서는 다음과 같은 느낌을 받을 수 있었는데,
- 결국 이쁜 디자인으로 뽑는 것은 디자인 적인 실력이 필요하다.
- 위 1번의 작업을 진행하기 위해서는 기본적인 수학 실력이 필요하다.
- 위 1,2번을 알아도 이쁜 디자인은 외부 프로그램(Iluustrator)을 통한 SVG with path 제작이 편하다.
또한 D3.js 나 ECharts.js(이것은 D3 기반 라이브러리) 같은 라이브러리는 ...
-
D3.js 는 그냥 글자가 짧아진 Vanilla JS 같은 느낌이었다.
의문
하지만 분명히 기본 Vanilla JS 를 이용했을 텐데, 굳이 절차를 늘릴 필요가 있을까?
또한 D3 만의 문법을 익히는데 시간이 오래걸리는데 동료 개발자에게 불편하지 않을까? -
ECharts.js 는 내부적인 로직이 확실히 탄탄한 것 같고 어드벤티지가 강하다.
의문
하지만 내부 로직이 탄탄한 만큼 무거울 것 같다라는 생각이 든다.
관련 포스트에서 D3 도입 시에는 사이트가 무거워질 수 있다, 라는 내용을 보았는데,
더 무거워진 ECharts.js 도 관련 이슈에서 완벽하게 자유로울 수는 없을 것 같다.
