SW 개발이 좋은 사람

"경험이 적고 세상 물정 모르는 어린 사람이 철없이 함부로 덤비는 것을 비유적으로 이르는 말" 다음사전

이 말은 실력이 없는 사람이

어려운 일인 줄도 모르고 해결하려고 달려든다는 의미도 되고,

실력 좋은 사람 앞에서 잘난 체 한다는 의미 등이 있다.

개발자의 입장에서는 엔지니어의 함정이라는 말과 의미가 같을 것 같은데

상황 파악도 못하고

조금만 더하면 할 수 있을 것 같다는 생각에 안 되는 일을 계속 붙잡고 있는 경우(사람)을 의미할 것이다.

열심이 노력해서 문제를 해결할 수도 있겠지만

이미 소요된 많은 시간은 전체 프로젝트 일정을 망칠 수도 있다.

또, 겨우 겨우 제작한 코드는 이후에 문제가 생길 경우(보통 생기지만)

또 많은 시간을 소비하게 한다.

이것을 전투에서 이기고 전쟁에서 졌다고 한다.

아는 만큼 보인다고

내가 할 수 있는 것인지? 아닌지?

빨리 판단해서

나아갈지? 물러날지? 도움을 요청할지? 등의

판단을 잘 하는 사람이 실력있는 개발자라고 생각한다.

ps) 개발에 성공할 경우

장기적인 관점에서

개발자 개인의 실력향상에는 아주 큰 도움이 될 수 있다.

의견 수렴 없이 자기 주장만 하다가 진척이나 결과가 없다는 것을 의미하여 부정적으로 보지만

브레인스토밍에서는 긍정적으로 본다 (나무위키).

예전에 한 신입 개발자가 있었다.

한 선배 개발자가 작업하는 신입 개발자를 보고 이렇게 하는 게 좋겠다고 조언했다.

신입 개발자는 수정했다.

잠시 뒤 다른 선배 개발자가 오더니 그것보다는 이렇게 하라고 했다.

신입 개발자는 수정했다.

그렇게 몇 명의 선배가 수정하라고 했다가 코드가 개판이 되었다.

전형적인 사공이 많으면 배가 산으로 가는 사례로

개발 중에 흔히 생기는 일이다.

출처:https://pixabay.com

긍정적인 면을 보면

사실 신입 개발자 입장에서는 이것이 많은 도움이 될 수 있었다.

개발에는 하나의 정답만 있는 것이 아니기 때문이다.

또, 만약 그들이 모여서 토론했다면 더 좋은 결과가 있었을 것이다.

(실력 있다고 자부하는 사람들 끼리는 서로의 코드에 대해서 말하지 않는 불문율 같은 것이 있는 것 같다.)

(Open Source는 자유로운 사용이 더 중요한 핵심이다.)

여러 사람이 하나의 기능이나 제품을 각자의 방식으로 테스트하고 수정하면서 만들어 가는 것이고,

출처: https://pixabay.com

다만 많은 Open Source가 초기에 불안정한 과정을 거쳤던 것처럼

초기에 많은 시간과 노력이 필요할 수 있다.

질문과 토론이 없는 우리의 현실에 있어서

사공이 많아서 배가 산으로 갈 수 있다면 아주 창의적인 것 같다.

불치하문(不恥下問)이라고 하며

아랫 사람에게 조차 물어서 배운다는 말이다 (다음 사전).

개발자에게 가장 중요한 명언이라고 생각한다.

항상 새로운 기술이 나오고, 

급변하는 IT 세상에서

배우지 않고, 묻지 않고 개발할 방법은 없는 것 같다.

내가 모든 것을 알수 없고,

내가 모르는 것을 다른 사람이 알 수 있으니

물어보지 않고 혼자 해결하려다 시간만 보낼 수도 있다.

반대로 너무 물어봐도 민폐가 되고,

쉽게 얻은 지식은 쉽게 사라진다고 한다.

따라서,

물어볼 것과 찾아볼 것을 잘 구분해야 할 것이고,

끊임없이 배우려는 자세가 중요한 것 같다.

전쟁은 싸워서 이기는 것이 아니라, 이긴 것을 확인하는 것이다.

이말은 손자 병법에 나온 말로 싸우지 않고 이기는 방법 중에 하나로 알려져 있다.

이순신 장군도 이 전략을 충실하게 실행한 것으로 알고 있다.

내가 강하면 굳이 싸우지 않아도 이길 수 있다는 것이고

상대가 인정하지 않으면 확인 차원에서 전쟁을 한다는 것이다.

이 전략이 성립 되려면 나와 상대에 대해서 잘 알아야 한다.

이것은 평소에 준비를 잘 해두라는 의미로,

평소에 준비가 잘 되어 있으면 쉽게 문제를 해결 할 수 있다는 것이다.

학생을 예로 들면, 평소에 공부(예/복습)를 잘 해두면 편하게 시험보고 1등(?) 할 수 있다는 의미가 될 것이다.

이것을 개발자의 입장에서 큰 개념으로 해석하면

[잘 준비되어 있으면 프로젝트를 쉽게 해결할 수 있다]라고 생각할 수 있을 것이다.

진상 고객/상사, 외부 환경 변화와 같은 외생 변수는 제외하고

쉽게 프로젝트를 진행 할 수 있다.

특히, 필요한 기술(라이브러리)이나 기술적인 어려움이 예상되는 부분을 찾아서 미리 준비해두는 것이 필요하다.

작게는 하나의 기능을 구현할 때,

일이 주어지면 코딩(싸움)부터 먼저 하려고 하는 개발자를 많이 봤다.

코딩부터 먼저 할 것이 아니고

화면설계서, ERD, 프로세스 명세서 등 필요 문서들을 챙기거나 간단하게 라도 작성하고,

내가 아는 것과 모르는 것을 구분해야 한다.

모르는 것은 준비하거나 도움을 요청하면 쉽게 개발할 수 있다.

만약 해결할 수 없다면 싸우지 않는 것이 칠천량 해전(임진왜란)처럼 패전하지 않는 길일 것이다.

(부작용은 싸우지 않겠다고 해서 어딘가로 가신 분이 ~~~)

이렇게 나를 알고 적을 안 뒤에 일하는 것이 당연이 쉽다 (지피지기).

그리고, 평소에 다양한 라이브러리에 대해서 알고 있으면 더 좋을 것이다 (부국강병).

예로, 웹 개발에서 자바 스크립트의 역할이 제법 많은데,

검색해 보면 무료 오픈 소스 라이브러리들이 많이 있다.

동일한 기능이라도 다양한 방법으로 구현되어 있기 때문에

미리 알아두면 좋은 게 너무 많다.

정리하면,

“전쟁은 싸워서 이기는 것이 아니라, 이긴 것을 확인하는 것이다.”는

싸워서 이기기 위해서 노력하지 말고, 이긴 것을 확인하기 위해서 싸운다로 해석하고

개발자 언어로 번역하면

코딩을 하기 위해서 노력하지 말고, 내가 알고 있는 것을 확인하기 위해서 코딩 하는 것이 좋다가 될 것 같다.

D3 (Data-Driven Documents)는 데이터 시각화 라이브러리로

다양한 차트를 쉽게 제작할 수 있다.

D3로 만들 수 있는 차트는 github나 bl.ocks.org에서 확인해 볼 수 있다.

인터넷에서 찾을 수 있는 대부분의 예제는 v3 버전으로 제작되었고

최신 버전인 v4는 관련된 예제가 많지 않다.

v3와 v4는 척도(scale) 사용에 변화가 있고

대부분 유사하게 사용할 수 있다.

자세한 차이는 여기를 읽어보길 바란다.

실제 개발에서는 D3(v3)를 이용하여

무료로 제공하는 JUI, C3 등의 차트 라이브러리가 있으니

이 라이브러리를 사용하는 것이 좋을 것이다.

여기서는 개발 능력을 높이고 자신에게 맞는 차트를 제작하기 위하여

컬럼 차트(Column Chart) 예제를

v4를 이용하여 단계별로 제작하며 정리할 예정이다.

예제를 익히기 위해서는

select, selectAll, enter, data, append, domain, range 등의

기본적인 함수는 알고 있다는 전제로 시작하기 때문에

모른다면 찾아본 후에 진행하는 것이 좋다.

이 함수들에 대한 자세한 설명은 정리하지 않지만

사용법을 익히는 예제로 구성되어서 보는데는 문제가 없을 것이다.

첫번째 예제로

주어진 데이터(dataset)의 값을 화면에 출력하는 예제이다.

각 데이터는 차트로 보이기 위해 사각형(rect)을 생성(append)하였다 [라인 12].

컬럼 차트이기 때문에

값(dataset[i])에 따라 도형(rect)의 크기(height)가 바뀌고 [라인 13]

데이터 순서에 따라 생성한 도형의 위치(x)가 지정된다 [라인 15].

값의 크기는 그대로 도형의 크기로 지정했지만

순서를 그대로 위치(x)로 사용하면 도형이 모두 붙어버리기 때문에

도형의 너비(40)보다 조금 크게(50 * i) 지정하였다 .

마지막으로 도형을 주어진 데이터 개수 만큼(dataset.length)

반복해서 생성하기 위해 for문을 사용하였다 [라인 11].

예제를 실행하면 생성된 바(rect)가

위에서 아래로 향하고 있는 문제를 확인할 수 있다.

웹에서 좌표는 좌측 상단을

기준 (0, 0)으로 좌표를 지정하여 구현하기 때문이다.

(상세한 설명은 아날로그 시계 참조)

즉, y좌표를 지정하지 않았기 때문이다.

전체코드보기

차트의 바닥을 y좌표가 100 인 지점으로 임의 지정 하고,

(데이터의 최대값이 39 이므로 39 보다 크면 된다.)

각 도형의 y좌표 값을 100 에서 자신의 크기를 뺀 값으로

지정하면 다음 그림과 같이 실행된다.

dataset이 [9, 19, 29, 39, 29, 19, 9]로 되어 있으니

100에서 각 값으 빼면

[91, 81, 71, 61, 71, 81, 91]이 된다.

즉, 91px에서 9px 크기(height)의 도형을 생성한다.

다음으로 데이터의 개수 만큼 도형을 생성할 때

for문을 이용하였다.

이건 일반적인 자바스크립트를 이용한 코딩 방법이고

D3 (Data-Driven Documents)의 특징을 반영한 것이 아니다.

D3는 이름 그대로 데이터 기반,

즉 데이터 처리를 쉽게 하는 것이 목적이기 때문에 다음과 같이 작성해야 한다.

D3에서는 사용할 데이터를 지정하면 [라인 11]

각 데이터별(enter)로 실행해서 도형을 생성할 수 있다 [라인 12].

다만, 데이터 값을 가지고 오는 방식이

배열(dataset[i])로 지정할 수도 있고

함수의 파라미터로 넘어오는 값(d)을 이용할 수도 있다.

(여기서 사용된 함수를 callback함수라고 한다.)

도형의 크기(height)는 파라미터 값을 이용했고 [라인 13]

도형의 위치는 (y)는 배열을 이용했다 [라인 16].

이해를 위해서 두가지 방법을 사용했지만

일반적으로 파라미터 값을 이용한다.

이것은 도형의 크기를 5배 크게(d*5) 하면 간단하게 구현된다.

다만, 도형이 커졌으니 차트의 바닥을 100에서 250으로 바꾸어 주었다.

그렇게 않으면 도형의 윗 부분이 잘려서 출력된다.

전체코드보기

이번에는 그림과 같이

바 차트에 원하는 색을 지정하고

바에 마우스를 올리면 다른 색으로 바뀌게 작성해 본다.

이것은 프로그램으로 처리하는 것 보다

CSS로 간단하게 구현할 수 있다.

일반적인 HTML 태그(예 div)는

배경색을 background-color에 지정하는데

SVG (D3)에서는 fill로 지정한다.

따라서, 생성한 바(rect)에 클래스를 추가하고 .attr("class", "bar")

스타일에서 bar 클래스에 fill 속성 값을 지정해 주면 된다.

마우스가 올라간 바(rect)의 색을 바꾸는 것은

hover선택자를 이용한다.

전체코드보기

이외에도 바의 선 색(stroke) / 굵기(stroke-width), 투명도(fill-opacity) 등

전체코드보기

이번에는 그림과 같이 도형에 맞는 값을 출력한다.

제작하는 방법은

rect를 생성하는 것과 동일한데

rect대신에 text를 생성하면 된다.

전체코드보기

기존의 rect를 생성하는 코드 다음에

위 코드에서 작성된 것처럼 text 생성 코드만 추가하면 된다.

rect와 text 생성이 동일하게 작성되었다.

text는 높이와 너비가 필요 없고,

별도의 CSS 클래스(class)를 지정하지 않았다.

그리고, text 함수를 호출하여 데이터 값을 넣어준다.

위 그림에서 보는 것처럼

출력된 값이 왼쪽에 치우쳐 있어 보기에 좋지 않다.

그리고, 다음 그림처럼 값을 도형 안에 출력해 본다.

전체코드보기

도형안에 출력하기 위해 Y좌표에 글자의 높이(15) 만큼 더해주고,

도형의 중앙에 출력하기 위해 X좌표에 글자의 너비(10) 만큼 더해서 지정했다.

그리고, 글자를 조금 더 보기 좋게 하기 위해

CSS로 text를 생성하여 지정하였다.

일반적인 HTML에서는 글자색이 font-color이지만

D3 (실제론 SVG)에서는 fill로 지정한다.

앞서의 예제는 기본적인 D3의 개념과 사용법을 익히기 위한 것이었다.

여기에서는 일반적인 바(column) 차트에서

흔히 보는 주요 기능 몇 가지(척도 중심)를 구현하면서

D3에 대한 보다 깊은 개념과 사용법을 정리한다.

1. X / Y 축 (척도) 만들기

2. 그리드 만들기

3. 도움말 만들기

앞서의 예제 중에서 마지막 예제를 다음과 같이 수정해 준다.

차트의 가로(X)와 세로 (Y) 축에

주어진 데이터의 값이 출력되는 것이

보기에도 좋고 차트에서 일반적으로 제공되는 기능이기도 하다.

따라서, 이전에는 데이터를 세로 축(Y)의 값만 배열로 작성했지만

가로축(X)에도 값을 출력하기 위해 Json을 배열로 작성했다 [라인 24].

예로, X축의 값 A, Y축의 값 9와 같이 ({x:'A', y:9})

X, Y의 값을 하나의 세트로 구성하였다.

이러한 데이터 구조의 변화에 따라,

33, 36, 44 라인에 작성된 것 같이 사용법에 변화가 있다.

바의 높이와 위치를 계산할 때

변수 d로 받아서 사용하던 데이터 사용법을 바꾸어 주어야 한다.

D3에서 data 지정을 배열로 하면

각각의 속성 지정에 넘어오는 값은 각 배열의 원소(d)가 넘어오고,

이 배열 원소는 그냥 값이니 그대로 사용하면 된다.

즉, d * 5와 같이 바로 사용했다.

수정한 예제는 Json 배열이니 각 원소는 Json이 되고

Json은 x, y로 지정되어 있기 때문에

d.y * 5와 같은 방식으로 사용되게 된다.

이상의 코드는 앞서의 예제를 배열에서 Json으로 바꾼 것 외에

다음 실행 결과와 같이 CSS를 이용하여 SVG 테그에 외곽선을 그렸다 [라인 4].

외곽선이 있는 실행 결과를 보면

차트가 왼쪽으로 치우친 것을 알 수 있다.

즉, 주어진 SVG의 크기에 맞게 제작되지 않았다.

앞서의 예제에서 크기에 맞춰서 바(rect)를 생성하는 수식을 사용하지 않았다.

즉, 각 개별 바의 크기는

바의 간격과 바의 수 (데이터의 수)를 고려하여

SVG의 크기(width)에 맞게 계산해야 한다.

이전 예제에서는 바의 크기(width)는 40, 간격은 10으로 고정해서 구현했다.

바의 높이도 주어진 값에 5를 곱했을 뿐이다.

바의 높이는 주어진 값 중 최고 값(Max)과

SVG의 높이(height)를 비율로 계산해서 처리해야 한다.

서술이 길었는데

핵심은 제법 복잡할 수 있는 이러한 처리를

D3에서는 간단한 코드 몇 줄로 구현할 수 있다는 것이다.

먼저 다음 그림과 같이 

SVG 크기에 맞추어 X축부터 출력해 본다.

기능을 구현하기 전에 D3에서 제공하는 scale에 대해서 알아야 하는데

v3에서 v4로 바뀌면서 변화된 것이 많고

종류도 많은데 정리된 자료가 별로 없다.

D3의 주요 기능 중 하나이니

영문 자료라도 확인해 두면 도움이 될 것이다.

v4에 대한 자료는 별로 없지만

v3는 검색해 보거나 다음 자료들을 참고하면 도움이 될 것이다.

여기서는 필요한 기능만 정리하고 넘어간다.

두 버전의 차이를 간단하게 정리하면

v3에서는 scale(척도)과 axix(축)을 나누어서 구현했다.

v4에서는 하나(scale)로 처리하는 차이가 있다.

v4에 대한 영문 자료를 대충만 봐도 알 수 있지만

아주 많은 척도가 정의되어 있다.

이 중에서 scaleBand라는 척도가 사용된다는 것만 기억하고 넘어간다.

척도에서 중요한 개념(함수)이 domain과 range로

v3와 v4에서 같은 개념과 방식으로 사용된다.

domain은 데이터 값들의 정보(범위, 값)를 지정하고,

range는 출력되는 화면의 정보(범위, 픽셀)을 의미한다.

즉, 척도는 데이터 정보과 출력 정보를 결합하여 계산하는 역활을 하는 것이다.

예로, 1부터 5까지의 값을 가지는 데이터가 있고

출력하고자 하는 차트(SVG)의 너비가 100픽셀(px)이라고 하면,

domain([1,5])가 되고 range([1,100])로 작성한다.

그리고, 척도(scaleBand)에서

데이터 값이 1일때는 20픽셀, 2일때는 40픽셀과 같은

적당한 위치값을 계산해서 반환하게 된다.

즉, 척도(scaleBand)라는 클래스에

데이터 값(domain)과 출력 범위(range)를 넣어주고

필요한 값을 꺼내어 사용하면 된다.

필요한 값은 한 데이터(차트 도형, Rect)의 크기와 위치이다.

크기는 x축이니 width로 bandwidth란 메소드를 이용하고

위치는 척도의 인스턴스(xScale) 함수를 호출하면 된다.

이러한 기초 지식을 가지고 다음 코드를 이해해 본다.

앞서 정리한 내용을 코드로 작성하고 빨강색으로 표시하였다.

전체코드

① domain에 지정하는 데이터 값이

연속된 값이면 시작값과 종료값(최대값)을 지정하면 된다.

여기서는 A, B, C 등의 문자열이기 때문에

배열(dataset)에 사용된 값 모두를 나열하여(map) 지정하였다.

range의 화면 범위를 지정하기 위해

SVG의 CSS width값을 구해서 지정하였다 (svg.style("width")).

② 바를 생성하면서(append("rect"))

바의 크기(attr-width)와 위치(attr-x)를 척도를 이용해서 지정한다.

이렇게 척도를 이용하여 차트의 크기(SVG)나

입력되는 데이터의 개수에 따라 적절한 도형(rect)이 생성되게 된다.

배열 개수를 바꿔서 확인 해보길 바란다.

③ 마지막으로 척도를 이용하여 축(axis)을 작성한다.

X축이니 화면(SVG) 바닥(bottom)에 놓고

위치는 화면의 높이(height = Height-20)가 된다.

즉, translate를 이용하여 X 좌표는 0, Y 좌표는 height인 지점에

라인을 그리고 축의 값(xScale)을 출력한다.

height에 20px을 뺀 것은 X 축의 값을 출력하는 공간을 계산한 것이다.

지금까지 사용하지 않은 그룹 개념이 사용되었다 (svgG.append("g")).

즉, 눈금 개수(tick count) 만큼 SVG 선(Line)이 생성된다.

이것을 간편하게 관리하기 위해 그룹으로 관리한다.

웹 브라우저의 개발자 도구(F12)로 확인하면

SVG group (X축)에 여러 개의 눈금(Line)이 있는 것을 확인할 수 있다.

그림을 보면 몇개의 그룹이 생성된 것을 볼 수 있다.

첫 번째 그룹(g)이 코드로 직접 생성한 것이고

(코드에 사용된 transform과 height값 280 (300-20)이 보인다.)

첫 번째 그룹 하위에 있는 그룹들은

D3에서 생성한 척도의 눈금(tick)이다.

눈금 그룹은 눈금(line)과 X축의 값(text)로 구성된 것을 볼 수 있다.

차트에 출력된 값을 보면 앞서의 예제와 다른 점이 있다.

숫자가 도형의 정중앙에 출력된다.

(이전 예제는 19, 29와 같은 두자리 숫자와 9와 같은 한자리 숫자의 출력 좌표가 안 맞다)

이전 예제는 도형의 중앙을 계산하기 어려웠지만

척도를 이용하여 간단하게 계산할 수 있다.

도형을 출력할 좌표(xScale)에 도형 크기(width)의 반(/2)을 더해주면

숫자가 찍힐 정확한 중앙 지점을 계산할 수 있다.

(위 코드에서 파란색으로 표시된 코드를 의미한다.)

SVG의 Text 테그의 text-anchor 스타일을 middle로 지정하면

지정된 좌표가 문자열의 중앙에 오도록 출력해 준다.

이번에는 다음 그림과 같이 Y축을 구현해 본다.

앞서의 코드에서 X축을 구현하기 위해

빨간색으로 표시된 코드와 같은 방식으로 구현하면 되니

직접 해본 후 진행하는 것이 좋다.

다음 코드를 보면 알 수 있듯이

앞서의 예제 코드에 빨간색으로 표시한 부분이

Y축을 보이기 위해 작성한 코드이다.

전체코드

① X축은 척도로 scaleBand를 사용한 반면,

Y축은 척도로 scaleLinear를 사용하였다.

X축의 값은 A, B, C 등의 문자열이었고,

Y축의 값은 1, 2, 3 등으로 연속된 숫자 값이다.

즉, 고정된 문자열에는 scaleBand, 일반 숫자값은 scaleLinear을 사용한다.

domain과 range는 모든 척도에서 같은 개념으로 사용된다.

다만, Y축이 숫자이기 때문에

0 부터 주어진 배열내 최대값(max(d.y))을 domain에 지정한다.

range 사용에서도 X축과 차이가 있다.

X축에서는 0부터 width로 지정했고

Y축에서는 height에서 0으로 지정했다.

즉, 큰 값이 먼저 나왔다.

X축은 A가 왼쪽, 즉 x좌표의 값이 가장 작다.

Y축은 1이 가장 하단, 즉 차트의 높이(Height) 값, 가장 큰 값을 가진다.

따라서, Y축은 domain 지정시 작은 값에서 큰 값으로

range 지정은 큰 값에서 작은 값으로 지정하여 서로 매핑 시켜준다.

② 마지막으로 X축은 axisBottom으로 하단에 축을 그리고

Y축은 axisLeft로 좌측에 축을 그린다.

다만, X축은 height값에 -20을 줘서 축의 위치를 바꾸어 줬지만

Y축은 다른 처리가 필요해서 축의 위치를 바꾸어 주지 않았다.

이것에 대한 자세한 설명은 뒤에 할 것이다.

Y축에는 척도의 개수(tick)을 5개로 지정하였다.

지정하지 않으면 D3에서 자동으로 지정한다.

③ 코드 작성이 완료 되었지만

이상의 코드에는 x축 생성할때 사용한 코드와 차이가 있다.

x축에 사용한 방식으로 Y축 코드를 작성하면

다음 표의 왼쪽처럼 작성해야 한다.

Y축을 이렇게 작성하면 다음 그림에서 왼쪽 하단 처럼

X축과 섞여서 이상하게 보인다.

이 문제를 해결하기 위해

차트 전체를 구성하는 그룹을 만들고 (svgG = svg.append("g"))

그룹 자체를 오른쪽으로 30 px 정도 이동시켜준다 (translate(30, 0)).

그리고, 차트를 위해 생성되는 도형(rect), 라벨(text), 척도등을

이전에는 svg에 생성했으나 svgG에 생성한다.

앞서 작성된 코드를 보면

X축 예제는 svg에 생성하였고, Y축 예제는 svgG에 생성하였다.

척도와 관련된 구현을 마쳤다.

데이터 개수를 추가해서 실행해 보면

그림과 같이 도형(바)의 크기가 바뀌면서 실행된 것을 볼 수 있다.

척도를 이용하므로서,

이번에는 그림처럼 차트에 그리드(Grid)을 추가한다.

그리드는 값의 정확한 위치를 보여 주기 위해 사용되는 것으로

D3에서는 간단하게 구현할 수 있다.

그림과 같이 차트 도형(bar) 뒤편에

축을 그릴 때 사용한 눈금(tick)을 크게 그리는 것(tickSize)이다.

따라서, 눈금의 크기를 차트 영역의

너비(width)나 높이(height)만큼 크게 그리면 된다.

전체코드

X축의 그리드 선은

지정된 X좌표에 0부터 높이(height)까지 이어진 선이다.

따라서, X축의 그리드 선은 0부터 높이,

Y축의 그리드 선은 0부터 너비까지가 된다.

여기에 더 고려해야 할 것은 마이너스(-) 값이란 것이다.

X축의 경우 바닥(axisBottom)에 선을 그리기 때문

현재 그리는 기준이 바닥(height)이다.

즉, 바닥(height)이 0이되니, 0부터 –height까지 그려야 한다.

Y축은 왼쪽(axisLeft)을 기준으로 설정했기 때문에

축의 왼쪽은 플러스(+) 값, 오른쪽은 마이너스(-) 값으로 지정해서 그린다.

작성된 그리드 선에 대한 효과는 CSS로 지정한다 (.attr("class", "grid")).

CSS에서 선의 색상(stroke)을 회색(lightgrey)으로 지정하고

선의 투명도(stroke-opacity)를 70%(0.7)로 잘 안보이게 해서

차트 도형을 보는데 지장이 없게 했다.

그리드와 관련해서 마지막으로 정리 할 것은

그리드의 작성된 코드가 차트 도형을 생성하기 전에 있어야 한다.

그리드의 작성된 코드가 차트 도형보다 앞에 있어야

그림과 같이 선 위에 도형이 놓이게 된다.

(그리드가 배경처럼 보이게 된다)

반대의 경우에는 도형 위에 선이 놓여

선이 더 중요하게 강조되는 것처럼 보이게 된다.

문제: 앞의 그림을 보면 도형의 값(label)이 사라졌다.

다시 보이게 할 방법은 무엇일까?

그림과 같이 차트 도형(바)에 마우스를 올리면

별도의 작은 창에 관련 데이터를 보여주는 기능을 구현한다.

이 기능을 구현하는 방법은

다음 문장을 그대로 코드로 작성하면 된다.

차트 도형에 마우스를 올리면(mouseover) 보이고,

도형에서 마우스가 벗어나면(mouseout) 안보이게 구현 한다.

마우스가 도형에 올라있는 동안은 마우스를 따라다니면서(mousemove)

마우스 근처에 작은 창(rect)을 하나 보여준다.

작은 창은 해당 도형의 데이터 값(Y 값)을 출력한다.

전체코드

이 문장 다시 코드로 작성하면

툴팁은 rect(배경, 선등)와 text(값출력)로 구성된

tooltip이라는 SVG 그룹 태그로 (var tooltip = svg.append("g"))

평소에는 눈에 보이지 않는다 (display: "none").

이 tooltip은 도형의

mouseover 이벤트에서 display 값을 지워서(빈문자열) 보이게 하고

mouseout 이벤트에서 display 값을 none로 해서 보이지 않게 한다.

mousemove에서는 현재 마우스의 좌표(xP, yP)을 구해서

tooltip의 위치를 지정하고 값을 출력한다.

구해진 좌표값에 적절한 계산(-20)을 해서

툴팁이 마우스에 가려지지 않게 했다.

앞서 제시한 문제에서 도형의 값(label)이 사라진 문제를 제시하였다.

해결 방법은 위 코드에 사용된 barG 변수이다.

앞서의 예제에서는 svgG에 모든 기능을 구현했다.

이번 예에서는 그리드/척도(svgG)와

챠트 도형의 그룹(barG)을 다르게 작성했다.

(정확한 이유를 아는 분은 댓글을)

이번에는 툴팁을 DIV로 구현해 본다.

개인적으로 rect와 같은 SVG 도형들이 덜 익숙한 것도 있고

보기 좋게 구현하는 것이 다소 어렵게 느껴져서

CSS로 간편하게 지정하는 DIV를 선호한다.

전체코드

다음 코드와 같이 D3의 append로 생성하고

toolTip이라는 CSS 클래스를 지정한다.

해당 클래스에서 CSS 속성으로 원하는 데로 지정하면 된다.

여기서는 툴팁 도형을 일반 사각(rect)이 아닌

모서리가 둥근 사각형으로 구현했다.

SVG Rect는 좌표(x, y)로 위치를 지정했지만

DIV는 left와 right 값으로 지정하고

위치 값도

SVG Rect는 SVG 내에서 위치로 지정했지만

DIV는 부모가 문서(body)이므로

문서 기준(pageX, pageY)으로 구현하였다.

이번에는 D3 (Data-Driven Documents)의 가장 큰 특징인

편리한 데이터 조작 관련 기능을

라인(Line) 차트를 만들면서 정리한다.

먼저, 라인 차트의 구현 방법을 알기 위해

하나를 골라서 마지막에 다음 코드를 추가한다.

전체코드

코드를 추가하고 실행해 보면

그림과 같이 라인 차트가 생성되는 것을 볼 수 있다.

즉, D3에서는 바 차트나 라인 차트를

간단하고 유사하게 생성하고 관리할 수 있다.

바 차트는 각각의 데이터에 대하여

각각의 도형(rect)를 생성하지만,

라인 차트는 각각의 선(데이터)이 이어져 하나의 선(Path)이 그려진다.

따라서 path를 생성하였다 (append).

그리고 각각의 선은 line 함수(인스턴스- d3.line())를 호출해서 그리게 된다.

라인 함수는 하나의 선 전체(path)에 대한 속성을 지정하는 부분과

각각의 선(line)에 대한 속성을 지정하는 부분으로 구성된다.

데이터(data) 사용법에도 차이가 있다.

바 차트에서는 data 지정시 배열을 그냥 넘겼다.

라인 차트에서는 data 지정시

배열(dataset)을 다시 배열([dataset])로 지정했다.

즉, 2차원 배열로 변환 한 것이다.

1 차원 배열 하나가 하나의 선(path)이 되기 때문이고,

2 차원으로 여러 개의 값을 지정하면 여러 개의 선이 생성된다.

라인은 여러 개의 선이 있다고 전제하고 있다.

2차원 배열을 기본으로 사용한다.

선의 색(stroke)은 파란색(blue)

선의 굵기(stroke-width)는 1.5px로 지정했다.

채우기(fill)은 없는 것(none)으로 했는데

채우기에 값(컬러)을 지정하면 영역 차트(Area Chart)가 된다.

그림을 보면 선의 시작 (A값) 부분이 축을 벗어나 있다.

바 차트는 Y축에서 일정 부분 떨어져서 시작하고

라인 차트는 Y축에 딱 붙어서 시작한다.

선의 위치(x)에 bandwidth를 추가해도 되지만

라인 차트 고유의 처리법으로 해결한다.

지금까지는 바 차트에 라인을 추가해서

간단하게 라인 차트와의 차이점을 살펴 봤다.

이제부터 그림과 같이 라인 차트에 맞는 예제를 구현한다.

또, D3의 특징인 데이터 사용법도 익히고

개인적으로 보다 직관적으로 이해 할 수 있다고 여겨

앞서 사용했던 Json(x,y)으로 구성된 1차원 배열을

2차원 배열로 구현하지 않고,

키와 값으로 구성한 Json 1차원 배열로 바꾸어서 진행한다.

사용할 데이터는 다음 표에서 작성한 것과 같다.

바 차트에서는 다음 표의 한 행이 사용되었던 것이고,

X: A, Y: 9와 같이 X, Y라는 키(key)로 구성된 Json을 이용했다.

이렇게 데이터를 구성해서 다음 표와 같은 데이터를 구성하려면

2차원 배열로 구현해야 한다.

(제시된 표 자체가 2차원 배열)

하나의 행이 하나의 데이터(선-path)가 되게 하기 위해

A: 9, B: 19 와 같이

각 값을 Json으로 지정해서 1차원으로 구현했다 [라인 31].

(데이터 조작에 대한 연습을 위한 것도 있다.)

배열의 원소 하나가 큰 Json으로 하나의 차원역할을 한다.

바 차트에서는 x, y라는 키가 고정인 것이고

라인 차트에서는 A, B, C등 키가 유동적인 차이가 있다.

표를 다시 확인해 보면 데이터 행이 2개이다.

즉, 두 개의 선이  생성되는 예제이다.

dataset 변수에 값만 추가해 주면

여러 개의 선이 계속 생성된다 [라인 31].

이렇게 여러 개의 선(행) 각각을 시리즈(series)라고 한다.

여기에서는 2016년과 2017년 두 개의 데이터(행),

두 개의 시리즈를 사용한다.

인터넷에서 구할 수 있는 예제들은

다음과 같이 시리즈를 데이터와 같이 구성하는데

여기서는 이해를 위해 별도의 배열 변수(series)를 사용했다 [라인 29].

이렇게 데이터를 받아서

series 배열 변수로 분리 코드를 작성하는데

여기서는 미리 분리하고 작성하였다.

앞서 정리한 바 차트에 라인을 추가한 예제에서

라인은 2차원 배열을 기본으로 한다고 정리했다.

쉬운 이해와 개발을 위해

1차원 배열로 구현했기 때문에

이것을 2차원 배열로 변환하는 작업이 필요하다 [라인 34~39].

(처음부터 2차원으로 구현하는 것이 더 좋을 수도 있다.)

1차원의 dataset을 2차원의 data 변수로

변환하기에 앞서해 d3의 keys 함수를 이용하여

json key값들을 추출한다 [라인 34].

여기서는 각 시리즈의 데이터 개수가 같다는 전제로

첫 번째 (dataset[0]) 행의 json key값들을 추출하여

keys 변수에 저장했다.

(dataset[1]에 값이 더 있다면 출력되지 않는 버그가...)

이렇게 생성한 keys 변수는

일단 데이터 개수를 파악하기 위해서도 사용하고

X축에 척도를 출력하기 위해서도 사용한다 [라인 50].

다음 코드는 1차원으로 지정된 데이터(dataset)를

2차원의 데이터(data)로 변환하는 코드이다.

변환을 위해

dataset의 개수만큼(2회) 반복(forEach)한다 [라인 37].

그 안에서 각 배열의 원소인

Json의 개수만큼 반복(keys.map) 해서.

배열을 반환한다 [라인 38].

반환된 배열을 다시 배열 (data[i])에 넣으면서

2차원 배열이 만들어진다.

첫 배열이 만들어질 때,

바 차트 데이터와 같이

{A: 9}가 {x: ‘A’, y: 9}로 변환되어 저장된다 ({x: key, y: d[key]}).

바 차트 예제 데이터와 같이 진 것이다.

이렇게 구성한 데이터를

척도에 넣어주기만 하면 중요한 작업은 끝났다.

설명이 부족할 수도 있고,

어려울 수 있는 부분이지만

이 부분이 가장 중요한 부분이고

D3의 가장 큰 특징 중 하나라고 생각하니

꼭 이해하고 넘어가야 한다.

이 값을 가지고 있는 keys를 xScale에 데이터로 지정하였다 [50라인].

앞의 예제와 다르게

xScale에 scaleBand가 아닌 scalePoint가 사용되었다.

실행 결과로 짐작할 수 있겠지만,

이 둘은 고정된 값을 처리하는 공통점이 있지만,

scalePoint는 0부터 시작하는 차이가 있다.

즉, y축에 딱 붙어서 시작된다.

앞의 예에서 문제가 된 라인의 시작 위치가 해결된 것을 볼 수 있다.

Y축은 다소 복잡해 보이는데

데이터 변환과 유사한 방식으로 구현한 코드이다 [53라인].

D3의 max 함수는 주어진 배열내의 최대값을 찾아준다 [54라인].

첫 max에 dataset을 지정하면 2개의 json 데이터가 반환되고

다시 각각에 대하여 max를 keys 개수만큼 반복한다.

keys 개수만큼 반복하는 이유는

각 json 데이터 개수를 의미 하기 때문이다.

이렇게 반복해서 키에 해당하는 값(d[key])을 반환하고

이중에 가장 큰 값(max)이 반환되고,

반환된 2개의 큰 값 중 가장 큰 값이 반환되어

척도 구성을 위한 domain의 값으로 지정한다.

그리고 이 domain의 소수점이 너무 많으면

적당히 반올림한 값을 사용하도록 했다(nice).

이 부분이(54라인),

즉 데이터내의 최대값 찾기가

처음부터 2차원 데이터를 사용하지 않고

1차원 데이터를 사용한 이유 중의 하나이다.

얼마나 복잡한지 앞서 제시한 2차원 배열을 이용해서

이 부분을 구현해 보길 바란다.

(이런걸 해보는 것이 실력 향상의 지름길...)

여기서는 각 라인별로 다른 색을 사용했다 [라인 57, 85].

여기서 사용한 코드와 같이

D3에서 지정한 컬러 값 집합(schemeCategory20)을 사용해도 되고,

첫 예제에서 작성한 것처럼 각 컬러를 지정해도 된다.

(이것이 바챠트 마지막에 제시된 문제의 답이다.)

D3에서 지정한 컬러 값에 대한 자세한 정보는

D3 문서페이지 맨 마지막에 있다.

여기까지가 라인 차트를 구현하기 위해

필요한 코드들이고,

나머지는 차트를 보기 좋게 하기 위한 코드들이다.

먼저, CSS를 이용해서 각 선에 마우스를 올리면(over)

선을 강조하기 위해 더 두껍게 (3px)

보이도록 작성했다 [라인 15].

41 ~ 47 라인 코드는

SVG내에서 차트를 중앙에 놓기 위한 코드이다.

즉, 상하좌우에 여백(margin)을 주는 코드이다.

왼쪽(left)과 상단(top)은 주어진 값만큼

전체 구조를 이동(transform)시키면 된다.

우측(right)과 바닥의 여백(bottom)은

차트를 생성할 때 빼고 계산하면 된다.

계산하는 것이 척도이니

X축 계산에 사용되는 width 값을

여백 만큼 (-margin.left - margin.right) 줄여주고

Y축 계산에 사용되는 height 값을

여백 만큼(-margin.top - margin.bottom) 줄여주면 된다.

마지막으로 범례(legend)를 구현한다 (라인 88~).

범례는 차트 내에서 적당한 위치(우측 상단)에

각 라인이 나타내는 의미를 보여 준다.

(위치는 지정하기 나름이다.)

각 라인은 색으로 구분하기 때문에

도형(rect)을 생성하고,

어떤 데이터 인지(series)를

문자로(text)로 출력해 주면 된다.

마지막 예제로 그림과 같이 툴팁 기능을 구현한다.

구현할 툴팁 기능은

바 차트에서는 도형(rect)에 마우스를 올리면

해당하는 값을 보이게 했다.

라인 차트는 하나의 선이기 때문에 이렇게 구현할 수 없다.

대체 방법은 X축의 값이 있는 부분에

적당한 도형(rect, circle등)을 생성하고(append)

이 도형에 마우스를 올리면 툴팁을 보이도록 작성한다.

반지름(r)이 3 px인 원을 생성하였다.

보이고 숨기는 방식은 바 차트와 동일하다.

코드를 복사해서 그대로 사용했다.

전체코드

다만, 앞서 제작한 두 번째 예제는

값에 따라 휘어지는 라인이 부드럽다 (curveBasis).

이렇게 부드러운 상태에서

정확한 값에 도형(dot)을 출력하면

선과 도형의 위치가 맞지 않게 된다.

따라서 선도 그림과 같이 딱 맞추어서 출력되게 하기 위해

부드러운 선이 아닌 꺾인선으로 구현해야 한다.

.curve(d3.curveBasis)를 지우면

기본 설정이 적용되어

그림과 같이 꺾인 선으로 출력된다.

이상으로 라인 챠트와 관련된 내용을 정리했지만

실제로는 데이터를 다루는 방법에 대하여 강조하였다.

이유는 D3의 특징이기도 하고

이 데이터 처리 방식(위 예제에서)에

다시 rect로 도형을 생성하면 Grouped bar 차트가 되기 때문이다.

즉, 데이터 처리와 구성이 중요하다는 의미이다.

따로 정리하지 않지만

이상의 예제를 다시 Grouped bar차트로 구현한 소스를 공유한다.

앞서 사용된 데이터가 다음 표와 같았다.

하지만 다음과 같이 지정하는 방법이

더 직관적이고, 많이 사용하는 방법(예 c3js)이다.

이렇게 구현해 보면 실력향상에 도움이 될 것이다.

CD9은 C3.JS (D3-based library) 챠트를 손쉽게 이용할 수 있게 하는 도구이다.

소스는 Github에서 받을 수 있고,

데모는 여기에서 확인할 수 있다.

C3는 D3 라이브러리를 이용하여 만든 챠트 라이브러리 이고,

D3 (Data-Driven Documents)는 웹에서 데이터를 시각적으로 쉽게 조작할 수 있도록 만든 라이브러리이다.

C3는 제법 괜찮은 챠트를 제공하지만 조금 사용하기 어려움이 있어서 쉽게 사용할 수 있는 도구를 제작하였다.

CD9은 챠트 설정, 데이터 입력, 미리 보기 부분으로 구성되어 있다.

사용자가 직접 데이터를 입력하고

원하는 상세한 차트 설정을 지정하여 즉시 확인 할 수 있다.

확인된 설정은 작성 기능을 이용하여

C3JS 챠트 사용에 필요한 자바 스크립트 코드와 CSS 설정을 생성 할 수 있다.

크롬과 firefox에서는 잘 작동되지만

IE에서는 HTML5의 숫자와 색 입력이 제대로 작동되지 않는다.

자바 스크립트(JavaScript)로 아날로그 시계를 제작하면서

HTML Canvas 사용법과

먼저, w3schools 사이트에 단계별로 구현된 아날로그 시계를 정리하였다.

간단한 설명도 있지만,

초보자에게는 어려움이 있어서 나름의 방법으로 정리해 보았다.

두 번째는 w3schools의 예제를 삼각 함수를 이용해서 구현해 본다.

같은 기능을 다른 방식으로 구현해 보면서 프로그래밍 이해도를 높인다.

w3schools 아날로그 시계 제작은 다음과 같이 총 5단계로 구성되어 있다.

1. 시계처럼 동그라미 그리기

2. 시계의 외곽선 그리기 (외곽선을 그라데이션으로 처리)

3. 시간(숫자) 표시

4. 시계 바늘 표시

5. 시계 작동 시키기

이 글을 읽기 전에

자바 스크립트와 CANVAS의 기초 개념은 알고 있어야 한다.

선(lineto), 도형(arc) 등을 그리는 함수들에 대해서 알고 있다는 전제로 시작한다.

따라서, 시계의 외곽선을 그리는 1, 2 단계는 정리하지 않는다.

5단계는 setInterval 함수로 1초(1000)마다 1부터 4단계까지를 다시 실행하는 것으로

별 내용이 없어 정리하지 않았다.

핵심이 되는 3단계와 4단계를 중심으로 정리하였다.

즉, 적절한 위치에 시간을 표시하고 (3단계)

현재 시간에 맞추어 시, 분, 초를 표시하는 방법을 정리하였다 (4단계).

시계의 외곽선을 그리고 나면

외곽선 안쪽에 1부터 12까지의 숫자를 배치해야 한다.

위치 이동을 이용하여 출력하는

다음과 같은 자바스크립트 코드를 볼 수 있다.

변수 radius 는 반지름을 의미한다.

첫 예제인 1단계 코드를 보면

주어진 Canvas 크기의 반으로 지정된 것을 볼 수 있다.

이 예제의 특징이 Canva의 크기에 따라

시계의 크기도 바뀌게 작성되어

시간을 표시하는

숫자의 폰트는 반지름의 15% 크기이고, (radius*0.15)

시간을 출력하는 위치는

중앙으로 부터 반지름의 85% 되는 부분이다. (radius*0.85)

위 코드의 4라인과 10라인을 보면 된다.

가장 중요한 코드가 8~11라인인데

몇가지 개념에 대해서 알아야 한다.

먼저, 12개의 숫자를 하나의 원안에 표시하기 위해서는

간단하게 생각해서 360도의 각도를 12로 나누어서 위치를 지정하면 된다.

즉, 각 숫자는 360 / 12 (30) 도씩 증가하면된다.

그런데, 자바스크립트에서는 각도를 사용하지 않고 라디안(Radian)을 사용한다.

라디안에서는 360도가 아니라 2파이(PI*2)를 사용한다.

따라서 각 숫자는 PI * 2 / 12 씩 증가하면 된다.

즉, 8라인에 작성된 코드와 같이

각 숫자가 배열될 위치는 숫자 * PI / 6의 공식이 나오게 된다 [라인 8].

두번째 개념은 Canvas의 translate함수에 대해서 이해를 해야 한다.

여기서는 다루지 않았지만,

단계 1의 시계 외곽선 그리기에서 translate가 사용되었다.

translate는 기준 좌표를 지정된 위치로 바꾸는 함수이다.

앞서, 단계 1과 2에서 3개의 원을 그렸는데

그리기 전에 Canvas의 중앙(radius, radius)으로 기준 좌표를 이동 시켜두었다.

이렇게 기준점을 이동시킨후

기준점을 중심으로 반지름이 radius인 각 원들을 그린 것이다.

Canvas의좌표는

다음 그림과 같이 좌측 상단이 시작 좌표로 0, 0으로 표기한다.

만약 반지름이 200인 경우

현재 기준점은 translate을 이용하여 변경한 후이기 때문에

200, 200으로 바뀌어 있다.

이 상태에서 시간을 나타내는 숫자를 표시하는데

1시는 중앙에서 우측으로 1 * PI / 6 라디안에

기준에서 - 200 * 0.85 (- radius*0.85)의 거리에 출력한다 [라인 10].

여기서 위치에 마이너스(-) 처리가 된 이유는

1시는 기준점 보다 위에 있기 때문이다.

기준점보다 위에 있다는 것은

기준점은 Y가 0 이니 마이너스가 되어야 찾아 갈 수 있다.

다음 그림에서

첫 번째 그림이 Canvas의 2차원 좌표이다.

Canvas 좌표는 좌측 상단이 0, 0으로 기준점이 된다 (첫번째 그림).

이 기준점은 translate 함수를 이용하여

특정한 좌표로 이동시킬 수 있다 (두번째 그림).

기준점은 X와 Y가 만나는 곳이 되고

기준점은 항상 0, 0 이 된다.

따라서, Y축이 기준점보다 위로 가면 음수(-) 값을

Y축이 기준점보다 아래로 가면 양수(+) 값을 가지게 된다.

세번째 그림과 같이 1시 방향에 숫자 1을 찍기 위해서

좌표 축을 30 ( 1 * PI / 6)도 기울이고,

(30도는 30/180 즉 1/6이고, 라디안으로 pi /6을 의미)

Y축 값을 음수(- radius*0.85)로 지정해야 된다.

그림을 보면 X축의 값은 변경하지 않아도 된다.

즉, 0.

1시 방향 (30도, pi /6)에 숫자 1을 찍기 위해서

축을 30도 회전시키기 위해 roate함수를 사용하고 [라인 9]

숫자가 출력될 부분으로 이동(translate) 한다 [라인 10].

다음 그림과 같이 기준점이 이동하게 된다.

이 상태에서 숫자를 출력하면

그림과 숫자가 같이 기울어진 상태에서 출력된다.

따라서, 다음 그림과 같이

앞서 지정한 각도를 음수화(-ang)해서 직각이 되게 한다.[라인 11]

이렇게 회전(+), 이동(-), 역회전(-)을 하여

각 숫자별 위치를 잡아서 출력을 하고

회전(-), 이동(+), 역회전(+)을 하여

화면 중앙으로 돌아와서

다음 숫자를 출력할 준비를 한다.

이렇게 12번을 반복하면 된다.

다시 정리하면

1. 시간에 따른 각도(라디안) 만큼 회전
2. 출력하기 위한 위치로 이동, Y축만 변경(마이너스)
3. 시간을 직각으로 출력하기 위해 회전한 각도를 반대로 회전(마이너스)
4. 숫자 출력
5. 시간을 직각으로 출력하기 위해 반대로 회전한 각도를 정상으로 회전: 3 번 반대
   
6. 변경한 Y축 값을 양수로 지정하여 중앙 기준점으로 되돌아옴: 2 번 반대
   
7. 회전한 시간 방향을 12시 방향으로 재 회전(마이너스): 1 번 반대

1 번 부터 3 번을 진행하며

시간이 출력될 위치에 숫자를 출력하고

5 번 부터 7 번까지 진행하여

시계 중앙에 기준점을 다시 배치한다.

그래야 다음 시간(숫자)을 시계 중앙에서 출발해서 작성할 수 있기 때문이다.