티스토리 뷰

Dev/Web

[Dev, Javascript] D3를 사용해보자 - 1

100두산 2023. 4. 5. 23:08

다양한 파일들에 들어있는 정보들을 시각화해서 보여줄 수 있는 자바스크립트 라이브러리인 D3.js를 사용해보려 한다. 폴더에는 index.html, main.js, d3.v6.min.js를 넣어주고, vscode로 index.html을 Live Server로 열어 실시간으로 화면을 테스트할 수 있게 해 주자.

 

초기 세팅

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>D3.js Example</title>
    <script src="js/d3.v6.min.js"></script>
    
  </head>
  <body>
    <!-- 페이지 내용 -->
    <script src="js/main.js"></script>
  </body>
</html>

js 파일을 어디에도 불러와도 상관없긴 하다.

 

혹은

 

 

GitHub - dryjins/d3-starter-template

Contribute to dryjins/d3-starter-template development by creating an account on GitHub.

github.com

해당 링크에서 clone이나 내려받기를 해도 좋다. 아래서 다룰 내용 또한 해당 링크에서 다루는 예제와 연습 문제에 관한 내용이다.

 

사각형, 원, 선, 텍스트

D3를 본격적으로 시작하기에 앞서 SVG의 기본적인 문법들을 익혀봐야 한다. 왜냐면 D3의 기본 렌더링 플랫폼이 SVG(Scalable Vector Grapics)이기 때문. SVG를 HTML 파일 내에 작성하여 사각형, 원, 선, 텍스트를 표현해 보자.

<svg width="400" height="50">
<!-- -->
</svg>

먼저 웹페이지에 svg로 표현할 공간을 확보해야 한다. 해당 예시는 왼쪽 상단을 기준으로 너비 400px, 높이 50px를 의미한다. 표현할 공간을 미리 정해놨기에 주석을 쳐놓은 공간에 작성할 코드의 내용이 400 x 50 크기의 공간을 넘어간다면 넘어간 만큼 표시되지 않는다.

사각형

<!-- Rectangle (x and y specify the coordinates of the upper-left corner -->
<rect x="0" y="0" width="50" height="50" fill="blue" />

rect는 사각형을 의미한다. (x, y)는 해당 사각형의 좌측 상단을 의미, 해당 좌표에서 출발하여 너비 50, 높이 50의 사각형이 그려진다. fill은 해당 도형을 채울 색을 의미한다.

 

원, 타원

<!-- Circle: cx and cy specify the coordinates of the center and r the radius -->
<circle cx="85" cy="25" r="25" fill="green" />

<!-- Ellipse: rx and ry specify separate radius values -->
<ellipse cx="145" cy="25" rx="15" ry="25" fill="purple" />

다음은 원이다. 구성요소는 원의 중심(cx, cy)과 반지름의 크기(r)이며 fill은 역시 동일한 의미다. 해당 코드에서 cx의 값이 85로 다소 멀찌감치 떨어진 이유는 앞서 작성한 사각형의 오른쪽에 표현하기 위함이다.

타원은 원과 대부분 비슷하지만, 너비 반지름(rx)과 높이 반지름(ry)을 추가로 지정해줘야 한다.

선

<!-- Line: x1,y1 and x2,y2 specify the coordinates of the ends of the line -->
<line x1="185" y1="5" x2="230" y2="40" stroke="gray" stroke-width="5" />

선은 시작 좌표(x1, y1)부터 끝 좌표(x2, y2)로 나타낸다. 색과 선의 너비를 정할 수 있다.

 

텍스트

<!-- Text: x specifies the position of the left edge and y specifies the vertical position of the baseline -->
<text x="260" y="25" fill="red">SVG Text</text>

마지막으로 텍스트다. 텍스트 또한 사각형과 마찬가지로 좌측 상단의 2차원 좌표와 색을 표시할 수 있고, 텍스트이기에 괄호 사이에는 적어 줄 글자를 작성해 주면 된다.

변수 값을 변경해 보며 출력이 잘 되는지 확인해 보자.

 

Hello, World!

모든 언어의 시작이 그러하듯, 먼저 웹페이지에 'Hello, World!'를 찍어보자. html에 바로 찍을 수도 있지만, 우리는 초기 세팅으로 D3를 연동해 놨기 때문에 main.js에서 함수를 작성하여 'Hello, World!'를 찍을 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>D3.js Example</title>
    <script src="js/d3.v6.min.js"></script>
    
  </head>
  <body>
    <p>Hello, World! (This text is written in Html file)</p>
    <script src="js/main.js"></script>
  </body>
</html>

html 파일에 바로 찍을 때와 main.js를 통해 찍었을 때를 비교하기 위해 둘 다 적어보기로 한다. 

const body = d3.select('body');
const p = body.append('p');
p.text('Hello, World! (This text is written in Javascript file)');

해당 코드를 분석해 보자면, 해당 js file이 작성된 body를 고르고, 거기서 텍스트를 담당할 p를 선언(body에 p를 추가)하고, p에 text를 적는 것이다.

d3.select('body')
	.append('p')
	.text('Hello World! (This text is written in Javascript file)');

각각의 변수를 선언하지 않고 간추려서 작성하는 방법도 있다.

잘 작성되었음을 알 수 있다.

 

Array

이번에는 배열을 화면에 표시해 보자.

const provinces = ['AB', 'BC', 'MB', 'NB', 'NL', 'NT', 'NS', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];

const p = d3.select('body').selectAll('p')
	.data(provinces)
	.enter()
	.append('p')
	.text('Array Element');

provinces로 배열을 선언한다. 이어서 p를 선언하고 body를 선택한다.

selectAll('p')는 말 그대로 모든 paragraph를 고르는 것이다.

data(provinces)는 paragraph에 넣어줄 배열의 데이터를 로드하는 과정이다.

enter()는 바인드 된 데이터 중에서 이미 작성된 paragraph를 제외한 나머지 녀석들에게만 이름표를 붙여주는 함수이다. 이게 무슨 뜻이냐면, 예를 들어 이미 Html 내에서 한 개의 paragraph가 이미 작성되어 있다면 provinces 배열 총 13개의 요소 중에서 12개만 반환된다는 소리이다. 위 예제에서 Html에 직접 쓰인 paragraph를 놔둔 채로 위 코드를 실행해 보면 다음과 같은 결과가 나온다.

기존에 있던 p와 Array 요소 13개 중 12개만 표현됨을 알 수 있다.

 

이어서 'Array Elements'라는 똑같은 글 말고 배열의 요소를 표현하고 싶으면 어떻게 해야 할까? 입력한 녀석을 그대로 출력해 주면 된다.

<!-- 아래 두 코드는 동일하다 -->
.text(d => d); 
.text(function(d) { return d; });

<!-- 해당 요소와 인덱스를 동시에 가져온다 -->
.text((d, i) => { return `${d} ${i}`; });

저작자표시

'Dev > Web' 카테고리의 다른 글

[Dev, Javascript] D3 예제 - 스택 바 차트(Stack Bar Chart)  (0) 2023.05.18
[Dev, Javascript] D3 예제 - 라인 차트(Line Chart)  (0) 2023.04.09
[Dev, Javascript] D3를 사용해보자 - 2  (0) 2023.04.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함