10.1 d3.js란?

10.1 d3.js란? 9장에서 svg나 canvas를 이용하여 브라우저에 여러 가지 기본 도형을 그리는 방법을 알아보았다. 하지만 브라우저에 svg나 canvas를 이용하여 동적으로 움직이는 다이나믹 그래프를 그리는 것은 쉽지 않다. 브라우저에 다양하고 동적인 그래프를 쉽게 그리기위해 여러 자바스크립트 클래스와 메소드를 만들어 모아 놓은 프로그램을 자바스크립트 라이브러리라 부른다. 동적 그래프 라이브러리에는 d3.js, jqplot, Google[...]

10.2 가로형 막대그래프 예

10.2 가로형 막대그래프 예 [예제 10.1.1]과 같이 단순한 도형을 그리기 위해서는 d3가 반드시 필요하지는 않을 수 있다. 하지만 d3는 동적인 그래프를 그리려고 할 때 매우 효과적이다. 이 절에서는 먼저 d3.js를 이용하여 간단한 가로형 막대그래프를 그려본다. 단순한 그래프에서 시작하여 색 넣기를 하여 본다.   10.2.1 가로형 막대그래프 배열에 간단한 데이터를 입력한[...]

10.3 도형의 변환과 그룹화

10.3 도형의 변환과 그룹화 이 절에서는 d3를 이용한 도형의 변환과 그룹화에 대하여 살펴본다. 이를 이용하여 앞 절에서 그려본 가로형 막대그래프에 축을 표시할 수 있다 10.3.1 도형의 변환 d3에서 기본 도형과 텍스트는 그룹화하여 transform 속성을 이용하여 모양을 바꾸거나 이동할 수 있다. SVG에서 정의된 transform 속성은 [표 10.3.1]과 같다. [표 10.3.1] transform[...]

10.4 그래프 애니메이션

10.4 그래프 애니메이션 d3.js의 장점은 그래프에 애니메이션 효과를 쉽게 줄 수 있다는 것이다. 애니매이션을 위해 d3에는 transition(), 대기시간을 설정하기 위한 delay(), 전체 애니메이션 시간을 설정하는 duration() 메소드 등을 제공한다. 트랜지션 애니메이션 효과는 매우 간단하게 transition()을 추가함으로써 얻을 수 있다. 예를 들어, 다음과 같은 코드를 생각해보자. var circle = svg.append(“circle”) .attr(“cx”,[...]

10.5 이벤트 처리

10.5 이벤트 처리 이 절에서는 d3.js에서 이벤트를 처리하는 방법에 대해서 알아보자. d3.js에서는 SVG 요소에 이벤트를 설정할 수 있는데 다음과 같은 on() 메소드를 이용한다. on(이벤트 이름, 이벤트 발생 시 호출 함수) 사용자와 상호작용하기 위하여 가장 먼저 생각할 수 있는 것은 마우스를 클릭하였을 때 반응하는 것이다. 이렇게 마우스를 클릭하는 것과 같은 일이[...]

10.6 외부 데이터 불러오기

10.6.1 데이터 구분 데이터는 그 형태나 속성, 특징 등에 따라 구분할 수 있고 이 구분에 따라 시각화 방법이 차이가 날 수 있다. 가. 정형화 데이터와 비정형화 데이터 데이터의 형태에 따라 구분하는 방법이다. 데이터가 한 관찰대상에 대해 여러 가지 항목(item)(이를 변수(variable) 또는 변량이라고도 부름)를 측정하여 구해질 때 그 형태는 대개 다음과[...]