자바스크립트
라이브러리
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
Two.js #
HTML5 기술로 웹 환경에서의 다양한 가시화 표현이 가능해졌다. 직접 canvas 요소를 다룰 수 도 있으나, 잘 설계된 자바스크립트 라이브러리를 이용하는 것도 좋다. Two.js는 2차원 드로잉 관련 자바스크립트 라이브러리로 간단한 몇줄 코드로 다양한 가시화 표현이 가능하다.
http://jonobr1.github.io/two.js/
주요 특징은 다음과 같다.
- 벡터그래픽 : 비트맵이 아닌 벡터 그래픽을 다룬다. 벡터방식의 모양(shape)을 직접 만들고, 애니메이션 기능을 추가할 수 있다.
- Scene graph 지원 : 벡터그래픽 편집에 사용하는 일반 자료 구조를 지원한다.
- 애니메이션 루프 : 빌트인 애니메이션 루프를 통해 직접 애니메이션 기능을 구현하거나, 다른 애니메이션 라이브러리를 연동할 수 있다.
- SVG 인터프리터 : SVG(Scalable Vector Graphics) 방식으로 표시할 수 있다.
다음과 같은 간단한 코드로 웹 화면에 원(circle)과 정사각형(rect)를 만들 수 있다.
#!javascript
// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes').children[0];
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);
// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);
// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;
rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;
rect.noStroke();
// Don't forget to tell two to render everything
// to the screen
two.update();
그리고, 다음처럼 코드를 추가하면 애니메이션 효과가 가능하다.
#!javascript
var group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();
// Bind a function to scale and rotate the group
// to the animation loop.
two.bind('update', function(frameCount) {
// This code is called everytime two.update() is called.
// Effectively 60 times per second.
if (group.scale > 0.9999) {
group.scale = group.rotation = 0;
}
var t = (1 - group.scale) * 0.125;
group.scale += t;
group.rotation += t * 4 * Math.PI;
}).play(); // Finally, start the animation loop
위 실행은 http://jonobr1.github.io/two.js/ 페이지에서 직접 볼 수 있다. (Ecogwiki에서 동적으로 자바스크립트를 추가할 수 없음) 그밖에 다양한 사용 예제들을 확인해 볼 수 있다.
더이상 웹 환경은 단순히 텍스트와 그림 이미지만을 보여주는 환경이 아니다. 일반 GUI 프로그램이 하던 거의 모든 일들을 웹 환경에서 HTML5를 이용하여 구현할 수 있다. 모바일환경에도 그대로 동작하는!
관련 링크
- Drawing With Two.js: 하나하나 따라해 보며 실행해 볼 수 있는 튜토리얼을 제공한다.
- javascriptoo:two-js: 실시간 코드를 바꿔가며 동작하는 모습을 연습할 수 있다.
D3.js #
D3.js을 활용하여 서열 그리기 #
D3.js(Data-Driven Documents)는 웹브라우저에서 데이터를 효과적으로 표현하고 사용자와 상호작용할 수 있도록 개발된 자바스크립트 라이브러리이다. 2011년부터 개발을 시작하여 2014년 4월에 3.4.6버전을 내놓았다.
소개 #
개발자나 데이터 과학자는 잘 정제된 결과 데이터나 의미있는 데이터를 어떻게 잘 보여줄 수 있을까 많은 걱정을 해 왔다. 다양한 시각화 라이브러리가 있으나 값이 비싸거나 특수한 시스템에서만 작동하기 때문이다. D3.js는 열린 공간인 웹에서 쉽고 다양하게 데이터를 표현할 수 있게하여 큰 호응을 얻고 있다.
서열 그리기 #
지금부터 가벼운 예제로 D3.js(version:3.4.6)를 사용해 보도록 하겠다. 다음과 같은 패키지를 설치해야하나 클라이언트가 중심이 되기 때문에 원하지 않을 경우 설치하지 않아도 좋다. 서버측에서는 두 서열을 비교하여 데이터를 전송하고 클라이언트측에서는 데이터를 보기 쉽게 표현하고자 한다.
pip install -U flask pip install -U biopython
실제, 서버측에서는 서열 ACCACTGATCGAAATTGTGGCCCGT와 서열 TTAGTAAGGCCAAACG을 비교하고 결과를 json형태로 만든다.
alignments = pairwise2.align.globalxx("ACCACTGATCGAAATTGTGGCCCGT",
"TTAGTAAGGCCAAACG")
data = [{'s':p[0],'d':p[1]} for p in zip(alignments[0][0], alignments[0][1])]
return json.dumps(data)
보통 서버에서는 다음과 같이 키와 값으로 구성된 리스트를 만든 후 json으로 보내게 된다.
[{키:값}, {키:값}, {키:값}, {키:값}, {키:값}]
실제 결과 서열은 다음과 같다. "d"는 비교 서열1, "s"는 비교 서열2를 나타낸다.
[{"d": "T", "s": "A"}, {"d": "T", "s": "C"}, {"d": "-", "s": "C"}, {"d": "A", "s": "A"}, {"d": "-", "s": "C"}, {"d": "-", "s": "T"}, {"d": "G", "s": "G"}, {"d": "-", "s": "A"}, {"d": "T", "s": "T"}, {"d": "-", "s": "C"}, {"d": "-", "s": "G"}, {"d": "A", "s": "A"}, {"d": "-", "s": "A"}, {"d": "A", "s": "A"}, {"d": "-", "s": "T"}, {"d": "-", "s": "T"}, {"d": "G", "s": "G"}, {"d": "-", "s": "T"}, {"d": "G", "s": "G"}, {"d": "-", "s": "G"}, {"d": "C", "s": "C"}, {"d": "C", "s": "C"}, {"d": "A", "s": "-"}, {"d": "A", "s": "-"}, {"d": "A", "s": "-"}, {"d": "C", "s": "C"}, {"d": "G", "s": "G"}, {"d": "-", "s": "T"}]
이러한 데이터를 그리기 위해 먼저 그림판을 만들어야 한다. D3.js는 jQuery와 마찬가지로 선택자(selector)를 사용하여 객체를 얻는다. 을 객체로 얻은 후 연결문법(chain)을 사용하여 속성을 지정한다.
var svgWidth = 820, svgHeight = 220;
var svg = d3.select(".chart")
.attr("width", svgWidth)
.attr("height", svgHeight);
그림판이 준비되었으니 이제, 그림판 위에 사각형를 그리며 두 서열을 나타내 보자. 우선, 그릴 데이터를 d3.json() 함수를 통해 가져온다.
d3.json("/alignment_json", function(error, data) {});
가져온 데이터는 두 번째 매개 변수에 정의된 함수로 처리한다. 데이터는 리스트 형태로 되어있기 때문에 각각의 데이터(딕셔너리)를 처리하기 위해 리스트의 forEach() 메쏘드를 사용하여 처리한다.
data.forEach(function (value, index, array) {});
value는 하나의 데이터이여, index는 순서를 나타낸다. 이전에 만든 svg에 "g" 태그를 추가하고 사각형을 만든다.
svg.append("g")
.attr("transform", "translate(" + 20 * index + ", 0)").append("rect")
.attr("id", index.toString())
.attr("width", rectWidth)
.attr("height", rectHeight);
사각형 안에 해당하는 뉴클레오타이드 코드를 표시한다.
svg.append("g")
.attr("transform", "translate(" + 20 * index + ", 0)").append("text")
.attr("x", 10)
.attr("y", 10)
.attr("dy", ".35em")
.text(value.s);
상호작용 - 이벤트 추가 #
기본적인 형태를 만들었다. 여기에 사용자와 상호 작용을 할 수 있도록 이벤트를 추가해 보도록 하자. 마우스를 올려 놓을 때 사각형의 색이 변경되며 해당하는 비교 서열의 뉴클레오타이드 코드도 변화하도록 한다. 간단히, 이전에 만든 사각형에 이벤트를 on() 메쏘드를 사용하여 추가하면 된다.
svg.append("g")
.attr("transform", "translate(" + 20 * index + ", 0)").append("rect")
.attr("id", index.toString())
.attr("width", rectWidth)
.attr("height", rectHeight)
.on("mouseover", function(){
d3.select(this)
.transition()
.style("fill", "#ccc");
var dIndex = d3.select(this).attr("id");
d3.select("#dec" + dIndex)
.transition()
.style("fill", "red");
})
.on("mouseout", function(){
d3.select(this)
.transition()
.style("fill", "steelblue");
var dIndex = d3.select(this).attr("id");
d3.select("#dec" + dIndex)
.transition()
.style("fill", "steelblue");
});
정리 #
대략 100 줄로 데이터를 쉽게 볼 수 있도록 하였다. 가장 기본적인 형태이지만 크기 조절(scaling)이나 긴 서열에 대해 손을 보면 좀 더 그럴싸한 시각화가 되며 약간의 시간만 더 투자하면 된다.
전체 소스는 <https://github.com/brenden17/d3> 에서 볼 수 있다.
Reference
https://github.com/mbostock/d3/wiki
D3.js로 Sankey Diagram 그리기 #
Sankey Diagram #
Sankey Diagram은 흐름도(flow diagram)의 일종으로, 시스템에서 에너지나 물질의 양이 어떻게 이동하는지를 나타낸다. 화살표의 방향은 이동 방향이며, 굵기는 대상의 양이 된다. 가장 대표적인 사용예는 다음으로 1812년 나폴레옹이 러시아로 진군하면서 변화된 군사 수를 도표화한 것이다.
출처 : wikipedia
좀 더 다양한 sankey diagram은 http://www.sankey-diagrams.com/에서 볼 수 있다.
Sankey Diagram 그리기 #
D3.js에 관해 무료로 볼 수 있는 책 D3 Tips and Tricks에서 sankey diagram을 그릴 수 있는 함수를 만들어 놓아 그리 어렵지 않게 사용할 수 있다. 지금 그리고자 하는 데이터는 지구의 물 비율이다. 지구의 물은 97%로 바닷물이 절대적 많아 이 데이터를 그대로 그린다면 다른 물의 양은 거의 보이지 않기 때문에 다음과 같이 변경하였다.
{
"nodes":[
{"node":0,"name":"지구의 물"},
{"node":1,"name":"민물"},
{"node":2,"name":"바닷물"},
{"node":3,"name":"기타"},
{"node":4,"name":"지표수"},
{"node":5,"name":"지하수"},
{"node":6,"name":"빙하"},
{"node":7,"name":"강"},
{"node":8,"name":"늪지"},
{"node":9,"name":"호수"}
],
"links":[
{"source":0,"target":1,"value":300},
{"source":0,"target":2,"value":670},
{"source":1,"target":3,"value":20},
{"source":1,"target":4,"value":110},
{"source":1,"target":5,"value":100},
{"source":1,"target":6,"value":180},
{"source":4,"target":7,"value":10},
{"source":4,"target":8,"value":10},
{"source":4,"target":9,"value":10},
{"source":9,"target":2,"value":10},
{"source":8,"target":2,"value":10},
{"source":7,"target":2,"value":10}
]}
http://embed.plnkr.co/J4o5pmDjYLFsTkYdQjp0/preview에서 그린 도표를 확인할 수 있으며 코드도 함께 볼 수 있다.
참고 #
- https://gist.github.com/d3noob/c2637e28b79fb3bfea13/
- http://en.wikipedia.org/wiki/Sankey_diagram
- http://www.sankey-diagrams.com/
- http://water.usgs.gov/edu/watercyclekoreanhi.html
Numeral.js #
숫자를 많이 다루는 웹 어플리케이션의 경우, 특정 목적에 맞도록 숫자 표시 형식을 다루는 일은 다소 번거로운 일이다. Numerial.js 라이브러리를 사용하면, 다양한 숫자 표시 형식을 일관적으로 관리할 수 있다.
숫자 만들기 #
#!javascript
var myNumeral = numeral(1000);
var value = myNumeral.value();
// 1000
var myNumeral2 = numeral('1,000');
var value2 = myNumeral2.value();
// 1000
numeral 함수를 사용하면, 숫자 형태로 되어있는 정보를 모두 "숫자"로 변경한다. 다음과 같은 복잡한 경우에도 알아서 잘 변환한다.
- numeral('10,000.12') --> 10000.12
- numeral('23rd') --> 23
- numeral('$10,000.00) --> 10000
- numeral('100B') --> 100
- numeral('3.467TB') --> 3467000000000
- numeral('-76%) --> -0.76
- numeral('2:23:57') --> NaN
마지막의 경우처럼 특정 숫자로의 변환이 어려우면 NaN을 반환한다.
원하는 형식으로 표시하기 #
#!javascript
var string = numeral(1000).format('0,0');
// '1,000'
format 함수의 인수로 형식을 정해주면, 그대로 출력한다. 다음은 표시 형식 출력 사례이다.
- numeral(10000).format('0,0.0000') --> 10,000.000
- numeral(10000.23).format('0,0) --> 10,000
- numeral(10).format('000.00') --> 010.000
- numeral(1230974).format('0.0a') --> 1.2m
예상하는 것 처럼 'a' 문자는 1,000 단위로 k, m, g,... 를 표시한다.
통화의 경우는 다음과 같다.
- numeral(1000.234).format('$0,0.00') --> $1,000.23
- numeral(1000.2).format('0,0[.]00 $' --> 1,000.20 $
바이트의 경우, 'b'를 쓴다.
- numeral(100).format('0b') --> 100B
- numeral(1024).format('0b') --> 1KB
- numeral(7884486213).format('0.00b') --> 7.88GB
지수형식으로 표기도 가능하다.
- numeral(1123456789).format('0,0e+0') --> 1e+9
- numeral(12398734.202).format('0.00e+0') --> 1.24e+7
Highcharts.js #
자바스크립트를 이용해서 시각적 효과를 낼 수 있는 라이브러리 중 대표적인 라이브러리는 위에서 설명한 D3.js가 있다. 서열, 다이어그램, 차트 등 다양하게 데이터를 시각적으로 볼 수 있지만 이는 데이터 시각화에 대한 포괄적인 개념을 담아놓은 라이브러리이기 떄문에 사용법이 굉장히 복잡하다. 이에 반해서 Highchart.js 라이브러리는 D3.js를 포함한 다른 데이터 시각화 라이브러리에 비교해서 구현 난이도가 낮다.
자바스크립트를 공부 해 본 사람이라면 짧은 시간 안에 차트를 만들 수 있다.
Highchart.js는 웹 애플리케이션을 위한 데이터 시각화, 차트 및 다이어그램이다. 이를 통해 웹 및 모바일 프로젝트에 대화 형 차트를 손쉽게 삽입 할 수 있다. 지원하는 데이터 포맷으로는 대표적으로 JS API, JSON, CSV, Google Spreadsheets, HTML table가 있다.
현재 유료 라이센스이기 때문에 모든 기능을 사용하기 위해서는 라이센스를 구매해야 하지만 데모 버전으로도 충분히 다양한 차트를 작성할 수 있다.
Highcharts 설정하기 #
Highcharts를 사용하기 위해선 다음과 같이 선언을 해야 한다.
<!-- hiChart -->
<!-- hiChart의 기본적인 기능을 가지고 있는 스크립트 -->
<script type="text/javaScript" src="<c:url value='/js/highChart/highcharts.js'/>"></script>
<!-- 데이터의 라벨을 지정하기 위한 스크립트 -->
<script type="text/javaScript" src="<c:url value='/js/highChart/series-label.js'/>"></script>
<!-- 차트를 이미지 확장자로 다운로드하기 위한 스크립트 -->
<script type="text/javaScript" src="<c:url value='/js/highChart/exporting.js'/>"></script>
<!-- 차트를 csv 확장자로 다운로드하기 위한 스크립트 -->
<script type="text/javaScript" src="<c:url value='/js/highChart/export-data.js'/>"></script>
위 4 개의 스크립트 중에서 highcharts.js와 series-label.js는 필수로 추가해야 한다. 그 외의 내용은 부가적인 기능으로 원한다면 사용할 수 있다. 예제로는 json 데이터를 이용한다.
다음은 예제로 사용한 데이터이다.
[{"year":2013,"admin":0,"general":81},
{"year":2014,"admin":0,"general":21},
{"year":2015,"admin":0,"general":17},
{"year":2016,"admin":0,"general":11},
{"year":2017,"admin":0,"general":96},
{"year":2018,"admin":0,"general":15},
{"year":2019,"admin":2,"general":2}]
Highchart 그리기 #
/* 차트를 그리기 위한 jsp */
<div id="container" style="min-width: 310px; max-width: 800px;
height: 400px;margin: 0 auto"></div>
/***************************************************************************/
/*스크립트*/
function fnStatisticsDataChart(theme) {
$.post("<c:url value='/selectStatisticsList.json'/>", // URL
{}, // 파라미터
function(data) {
var category = []; //카테고리
var adminData = []; //년도별 관리자 권한 수
var generalData = []; //년도별 일반 사용자 수
var valueJson = new Array(); //배열선언
if (theme == 1) {
var containerTheme = 'container';
var titleText = '꺾은선 그래프';
var chartType = '';
} else if (theme == 2) {
var containerTheme = 'containerBar';
var titleText = '막대 그래프';
var chartType = 'column';
}
for (var i = 0; i < data.length; i++) {
category.push(data[i].year);
adminData.push(data[i].admin);
generalData.push(data[i].general);
}
Highcharts.chart(containerTheme, {
chart : { //차트 타입 지정. 기본으로 꺾은선 그래프이다.
type : chartType
},
title : { //차트 제목
text : '년도별 가입자 그룹 통계'
},
subtitle : { //차트 부제목
text : '꺾은선 그래프'
},
xAxis : { //x축
categories : category,
crosshair : true
},
yAxis : { //y축
min : 0,
title : {
text : 'Number of Employees'
}
},
tooltip : { //툴팁
shared : true,
useHTML : true
},
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0
}
},
//map을 이용하여 형식에 맞는 데이터 적용
series : [ {
name : '관리자권한',
data : adminData
}, {
name : '일반사용자',
data : generalData
} ]
});
});
}
위 코드는 Highchart 공식 홈페이지 [https://www.highcharts.com/demo/line-basic]에 있는 데모 코드를 일부 수정한 내용이다. 위와 같이 기본 소스코드를 제공해주고 있으며, 영역에 id를 지정해주고, 옵션에 알맞는 값을 넣어주면 차트를 완성할 수 있다. 위 소스코드를 이용해 차트를 그린 결과는 다음과 같다.
꺾은 선 그래프 뿐만 아니라 파이, 막대, 영역, 분산, 등이 있으며 각각 그래프에서도 여러 종류가 있다. 자세한 내용은 Highchart 공식 홈페이지 [https://www.highcharts.com/demo/line-basic]를 참조하면 된다.
참고문헌 #
Highchart 공식 홈페이지 [https://www.highcharts.com/demo/line-basic]
Incoming Links #
Related Data Sciences (DataScience 0) #
Suggested Pages #
- 0.025 클로저
- 0.025 DOM
- 0.025 Infographics
- 0.025 도표
- 0.025 ㅎnㅂrㄹrㄱi
- 0.025 mean]), [[표준편차
- 0.025 최소
- 0.025 파이썬
- 0.025 min
- 0.025 최대값
- More suggestions...
