[D3] Introduction to SVG&D3

언젠가 다음과 같은 인터랙티브 웹 포스팅을 목표로 하고 있습니다.

• distill.pub : 머신러닝과 관련된 다양한 인터랙티브 아티클

Distill — Latest articles about machine learning

Articles about Machine Learning

DistillAmeya Daigavane, Balaraman Ravindran, and Gaurav Aggarwal

• Open AI blog: Open AI 공식 블로그. 다양한 인터랙티브 요소를 추가하여 논문을 소개

OpenAI Blog

OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.

OpenAIOpenAI

그 외에도 저는 HCI를 전공하고 있어 다수의 논문이 이와 유사한 인터랙티브 시각화를 사용한 연구를 하고 있습니다. (연구를 해야하는데...)

과거에는 학계에서 시각화를 위해 C++, C# 등을 사용했으나 현재는 웹/앱에서 시각화를 제공하기 위해 html/js/css를 주로 사용합니다. 이번 포스팅에서는 web-based 시각화에서 사용하는  svg와 d3를 간단하게 소개합니다.

SVG : 기본적인 그래픽 요소

SVG는 Scalable Vector Graphics의 약자입니다. 이름에서도 알 수 있듯이 비트맵 기반의 이미지와 다르게 벡터기반을 사용합니다. 장점이나 특징 등은 국문 위키피디아에도 충분히 적혀있으니 생략하도록 하겠습니다.

어도비 일러스트레이터, 스케치, 피그마 등 벡터 드로잉 프로그래밍에서 추출(export)할 수 있고, XML형식이라 텍스트로 수정도 가능합니다. 즉 디자인 툴에서 개발하고 웹에서 불러와서 수정도 가능하다는 뜻입니다.

예시부터 소개하면 웹에서는 다음과 같이 사용합니다. html코드에서 다음과 같이 작성하면 아래의 원이 그려집니다.

꼭 각 요소를 엔터로 구분할 필요는 없으며 제 코드 취향입니다.

SVG를 사용하기 위해서는 <svg> 태그를 사용해야 합니다. 그리고 내부에 다양한 요소를 사용할 수 있습니다. 위의 예시는 원(circle)의 요소는 다음과 같은 대표 요소가 있습니다.

• <rect> : 직사각형
• <circle> : 원
• <ellipse> : 타원
• <line> : 직선
• <polyline> : 직선 그룹
• <polygon> : 다각형
• <path> : 경로

이 외에도 애니메이션 등 다양한 커스텀 요소를 추가할 수 있으나 기본적인 도형 요소는 저걸로 충분합니다. 점,선, 면 만 있으면 모든 정적 시각화를 구성할 수 있으니까요.

각 요소에 대한  디테일 수정은 다음 링크를 참고하세요.

기본 도형 - SVG: Scalable Vector Graphics | MDN

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

MDN

D3.js : 그래픽 요소 다루기

D3.js - Data-Driven Documents

D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

Data-Driven DocumentsMike Bostock

점,선, 면을 사용하여 모든 시각화를 만들 수 있지만 도형 100개를 변수로 만들어서 조정하거나, 특정 부분만 마우스오버 인터랙션을 추가하는 작업 등 시각화 등을 하다보면 효율적인 방법이 필요합니다.

D3는 Data Driven Document라는 이름에서 유래한 라이브러리입니다. html, css, svg 도큐먼트 객체를 데이터 기반으로 접근하는 자바스크립트 시각화 라이브러리입니다.

2011년 10월에 v2.0이 릴리즈되었으니 10년 이상된 라이브러리입니다. 꾸준히 버전 업데이트 중이며, 2021년 6월에 v7이 릴리즈되었습니다. 업데이트는 계속되고 있으나 웹 기술의 발전에 비해 충분히 빠르지 못하다는 의견도 많습니다. 하지만 아직까지는 가장 많이 사용되는 라이브러리임은 분명합니다.

가장 최신 버전인 v7으로 블로깅을 할 예정이고, 예시를 살펴보겠습니다.

위 js코드는 원을 선택하고, 해당 원의 색을 초록색으로 칠하는 코드입니다.  이런 방식으로 d3는 객체를 선택하고, 그 객체에 대해서 원하는 동작을 추가하는 방식으로 구현합니다. jQuery 라이브러리를 사용하신 분들에게는 익숙한 방법일 수도 있습니다.

버전마다 데이터를 다루는 방식이 다르기 때문에 책이나 코드를 볼 때는 버전을 꼭 확인하시기 바랍니다. 크게는 v4를 기준으로 (v3, v4 / v5, v6, v7) 큰 차이가 있으니 코드를 참고할 때 주의하시면 됩니다.

참고자료

d3는 왜인지 괜찮다고 할 만한 문서가 많지는 않습니다. 공식홈페이지도 불친절한 편이고, 국내 번역서도 최신 버전과 한참 뒤 떨어지기도 했습니다.

그래서 공부할 수 있는 소스를 추천드립니다.

• D3 in Depth ⭐⭐⭐: 아래 소스들이 부족한 점은 매우 보완하고 있는 사이트입니다. v6를 기준으로 예시들이 작성되어 있고, d3에서 필수적인 개념을 모두 설명하고 있습니다. 가장 추천하는  

D3 in Depth

In depth information on D3.js.

D3 in Depth

• Observable ⭐⭐: js코드를 노트북 형식으로 공유하는 사이트입니다. IEEE VIS와 협업도 하는 등 가장 큰 d3 시각화 커뮤니티입니다. 개인적으로 여기서 scratch부터 공부는 어렵습니다. 코드의 형식이 친숙하지 않기도 하고, 전체적인 가이드가 잡혀있지는 않습니다.

Observable - Explore, analyze, and explain data. As a team.

The Economist

• d3 graph gallery ⭐: d3 예시를 많이 설명한 사이트입니다. 아쉽지만 v4로 시각화가 있어 아쉬울 따름입니다. 그래도 기본적인 내용이 많이 포함되어 있긴 합니다.

An introduction to d3.js in 10 basic examples.

A set of 10 basic examples leading to a first chart made with d3.js. Discover the basics: html, css, svg, scale, data binding and more. Explanation and editable code provided.

Yan Holtz

그 외에도 다음과 같은 v6/v7으로 다음 소스들이 있으니 참고하시길 바랍니다.

• https://www.dashingd3js.com/d3-tutorial
• https://github.com/sgratzl/d3tutorial