SVG 기초

Contents

D3는 SVG를 기반으로 데이터를 시각화 한다. 해서 먼저 SVG에 대해서 살펴보기로 했다.

SVG는 Scalable Vector Graphics의 줄임말로 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 이미지포멧이다. XML로 그래픽정보를 기술하기 때문에 웹 브라우저나 문서 편집기 등에서 읽고 편집할 수 있다. 또한 이미지에 텍스트를 추가하고 하이퍼링크를 걸고 자바스크립트와 연동하는등 다른 웹 기술과의 연동도 자유롭다.

SVG는 거의 모든 버전의 크롬, 파이어폭스에서 지원하며, IE의 경우 9 부터 지원을 한다. 이 문서는 크롬 브라우저를 기반으로 하고 있으니, 가능하면 크롬이나 파이어폭스로 문서를 읽기 바란다.

SVG를 이용해서 원을 그려보자.

그렇다. 이미지를 코드화 할 수 있다는게 SVG의 장점이다.

사각형을 그려보자.

역시 아주 간단하다. 게다가 javascript를 이용해서 DOM객체로 다룰 수도 있을 것이다. 이걸 javascript로 잘 가다듬으면 쓸만한 시각화 툴이 만들어질 거고, 그렇게 해서 나온게 d3.js다.

화면상에 이미지로 표현되긴 하지만, 눈에 보이는 이미지들은 jpg나 png와 같은 이미지가 아니다. 원과 사각형에 마우스를 대고 오른 클릭을 해도 "이미지 저장"메뉴를 찾을 수가 없다. 그리고 브라우저 화면 배율을 늘리거나 줄여도 이미지가 깨지지 않고 부드럽게 배율이 변하는 것을 확인할 수 있을 것이다. 코드 기반의 벡터 이미지이기 때문이다.

타원

직선

텍스트도 표현할 수 있다.

텍스트도 폰트크기, 색등을 나타낼 수 있다.

SVG는 기본적으로 검은색으로 채워지며 경계선을 가지지 않는다. 하지만 원한다면 색과 경계선의 스타일을 변경할 수 있다.

• fill : SVG element를 채울 색이다. 아래의 방법으로 채울 수 있다.
  • 색 이름 : orange
  • hex 값 : #3388aa 혹은 #38a
  • REG 값 : rgb(10, 150, 20)
  • REG 값과 alpha transparency : rgba(10, 150, 20, 0.5)
• stroke : 경계선 색상
• stroke-width : 경계선 폭
• opacity : 투명도 . 1.0 ~ 0.0

색이름은 http://en.wikipedia.org/wiki/Web_colors 를 참고하자.

css style을 이용하면 좀 더 체계적으로 관리할 수 있다.

그래픽을 다루어본 경험이 있다면, 픽셀기반의 좌표 시스템이 일상적으로 우리가 알고 있던 좌표계의 기준점과 차이가 있다는 것을 알고 있을 것이다. 산수나 수학교과서의 경우 왼쪽 하단이 0,0 이지만 픽셀 기반 좌표시스템에서는 왼쪽 상단이 0,0이다.

Javascript는 동적인 스크립트 언어로 대부분의 웹 브라우저들이 자바스크립트 해석엔진을 가지고 있다. 자바스크립트 코드는 HTML 문서에 직접 삽입할 수 있다. 브라우저가 HTML 문서를 읽으면, 코드를 해석해서 그 결과를 화면상에 출력한다. 위 코드의 경우 "hello world" 문자를 포함한 경고창이 뜬다.

다른 언어들과 마찬가지로 자바스크립트도 코드를 따로 분리해서 유지하고, 이를 include 할 수 있다. 브라우저가 HTML 문서를 읽으면 abc.com으로 부터 d3.js 코드를 읽어와서 해석하게 된다.

JQuery는 가장 유명한 javascript 프레임워크중 하나다. 나는 JQuery와 d3.js를 함께 사용해서 데이터를 시각화 하려고 한다. 왜 하고 많은 자바스크립트 프레임워크 중에 JQuery냐 하면, 별 다른 이유는 없다. 다른 사람들도 많이사용하고 있기도 하고, 언뜻 봤을 때 쉽게 사용할 수 있을 것 같아서다. 실제 사용해보니 꽤 편한것 같기도 하고.

그리고 나는 javascript 전문가가 아니다. 내가 사용하는 목적에 맞게 필요한 정도에서 잘 사용할수만 있으면 된다.