web page 에서 그래프를 그래보자. jqeury 에도 그래프를 그리는 library 들이 많이 있다. 그리고 html5 에서는 canvas 를 활용하기도 한다. 하지만 여기서는 svg 를 활용해서 그려보는 내용을 다뤄보자.
이 글은 ref. 1 의 내용을 조금 각색했다.
svg 로 그래프를 그리기 위해 jQuery SVG library 를 사용한다.
jQuery SVG다른 라이브러리는 see also 를 확인하자.
그리기 위해서는 길이(dimension) 을 알아야 한다. 우리는 가로 720px 세로 410px 의 그래프르를 그리도록 해보자.
그리고 범위(domain) 를 5개 정도 가지고 있다고 하자.
그리고 그래프를 가리킬 때마다 그 점(point) 에서 값을 보여주기로 하자.
svg 사용
먼저 svg 로 그래프를 그려보자. 여기서 그린 내용은 ref. 1 에서 볼 수 있다. ref.1 에서 완성된 page 를 제공하는데, 여기로 가면 된다. 그리고 최후에는 이 페이지 처럼 만든다.svg 는 기본컬러로 black 을 사용하는 듯 하다.(chrome에서 테스트한 결과)
<svg></svg>
안에 그림을 그려넣으면 된다.
여기서는 <g> 를 많이 사용하는데, 이녀석을 grouping 하는 녀석이라고 보면 된다.
먼저 그래프가 그려질 바탕인 격자(grid) 를 그려보자.
가로선이랑 세로선 몇개를 이용하면 쉽게 그릴 수 있다.
아래처럼, 가로선, 세로선의 묶음(group) 을 만들면 된다.
- <line x1="113" x2="113" y1="10" y2="380"></line>
- line<(113, 10), (113, 380)>
세로선의 묶음
<g>
<line x1="113" x2="113" y1="10" y2="380"></line>
<line x1="259" x2="259" y1="10" y2="380"></line>
<line x1="405" x2="405" y1="10" y2="380"></line>
<line x1="551" x2="551" y1="10" y2="380"></line>
<line x1="697" x2="697" y1="10" y2="380"></line>
</g>
가로선의 묶음
<g class="grid y-grid" id="yGrid">
<line x1="86" x2="697" y1="10" y2="10"></line>
<line x1="86" x2="697" y1="68" y2="68"></line>
<line x1="86" x2="697" y1="126" y2="126"></line>
<line x1="86" x2="697" y1="185" y2="185"></line>
<line x1="86" x2="697" y1="243" y2="243"></line>
<line x1="86" x2="697" y1="301" y2="301"></line>
<line x1="86" x2="697" y1="360" y2="360"></line>
</g>
그리고 data 부분에 찍을 점(point) 을 만들자. 이 점을 만들때 이 예제에서는 안에 data 도 같이 넣어준다.
<g class="first_set points" data-setname="Our first data set">
<circle cx="113" cy="192" data-value="7.2" r="5"></circle>
<circle cx="259" cy="171" data-value="8.1" r="5"></circle>
<circle cx="405" cy="179" data-value="7.7" r="5"></circle>
<circle cx="551" cy="200" data-value="6.8" r="5"></circle>
<circle cx="697" cy="204" data-value="6.7" r="5"></circle>
</g>
이렇게 만든 점들을 이어서 그래프를 만들면 된다.
여기서는 surface 를 이용해서 이 선들을 이을 것이다.
<g class="surfaces">
<path class="first_set" d="M113,360 L113,192 L259,171 L405,179 L551,200 L697,204 L697,360 Z"></path>
</g>
이제 css 를 이용해서 예쁘게 꾸며주기만 하면 된다.
자세한 사항은 ref. 1을 참고하자.
그림자
<defs>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="gradientShadow" r="55%">
<stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop>
<stop offset="100%" style="stop-color: #AAA; stop-opacity:0"></stop>
</radialGradient>
</defs>
gradients and patterns specifications
<g class="first_set points" data-setname="Our first data set">
<circle cx="113" cy="192" data-value="7.2" r="5"></circle>
<circle cx="259" cy="171" data-value="8.1" r="5"></circle>
<circle cx="405" cy="179" data-value="7.7" r="5"></circle>
<circle cx="551" cy="200" data-value="6.8" r="5"></circle>
<circle cx="697" cy="204" data-value="6.7" r="5"></circle>
</g>
위의 단순한 원(circle) 을 아래 처럼 shadow 를 추가한다.
<g class="first_set points" data-setname="Submission to first decision">
<circle class="shadow" cx="113" cy="192" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
<circle class="plain" cx="113" cy="192" data-time="7.2" r="5"></circle>
<circle class="shadow" cx="259" cy="171" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
<circle class="plain" cx="259" cy="171" data-time="8.1" r="5"></circle>
<circle class="shadow" cx="405" cy="179" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
<circle class="plain" cx="405" cy="179" data-time="7.7" r="5"></circle>
<circle class="shadow" cx="551" cy="200" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
<circle class="plain" cx="551" cy="200" data-time="6.8" r="5"></circle>
<circle class="shadow" cx="697" cy="204" r="5" stroke="#AAA" stroke-width="4" stroke-opacity="1" style="fill: url(#gradientShadow);"></circle>
<circle class="plain" cx="697" cy="204" data-time="6.7" r="5"></circle>
</g>
svg animation library 에서 attribute 은 잘 다루지만, css 는 잘 못다룬다고 한다. 그래서 attribute 을 이용한다고 한다. [ref. 1]
tooltip
아래처럼 tooltip 을 만들자.<div id="tooltip" style="">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="tooltip-triangle" points="0,0 11,13 0,13"polygon>
</svg>
<p id="tooltip-title"></p>
<div class="value">
<span class="value-part"></span>
<span class="value-total">Weeks</span>
</div>
</div>
세로선
<rect class="indicator" height="192" width="3" x="111" y="192"></rect>
<g class="triggerLines">
<line x1="113" x2="113" y1="360" y2="192"></line>
<line x1="259" x2="259" y1="360" y2="171"></line>
<line x1="405" x2="405" y1="360" y2="179"></line>
<line x1="551" x2="551" y1="360" y2="200"></line>
<line x1="697" x2="697" y1="360" y2="204"></line>
</g>
event animation
jQuery-SVG plugin 에서 library 를 download 받고, 아래 3개를 사용하자.
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svgdom.js"></script>
<script type="text/javascript" src="jquery.svganim.js"></script>
그리고 animation 과 관련된 event handler 를 추가하자.
SVG, VML
참고로, ref.2 를 보면, SVG 는 IE 8 까지 지원하지 않는다고 한다. VML 을 사용하면 된다고 하는데, 관련해서 library 들을 소개 해 준다.See Also
Reference
- http://www.inspire.nl/blog/creating-interactive-graphs-with-svg-part-1/
- http://stackoverflow.com/questions/793808/svg-charting-library
댓글 없음:
댓글 쓰기