Skip to content

자바스크립트 라이브러리 #
Find similar titles

Structured data

Category
Programming

Two.js #

HTML5 기술로 웹 환경에서의 다양한 가시화 표현이 가능해졌다. 직접 canvas 요소를 다룰 수 도 있으나, 잘 설계된 자바스크립트 라이브러리를 이용하는 것도 좋다. Two.js는 2차원 드로잉 관련 자바스크립트 라이브러리로 간단한 몇줄 코드로 다양한 가시화 표현이 가능하다.

http://jonobr1.github.io/two.js/

주요 특징은 다음과 같다.

  1. 벡터그래픽 : 비트맵이 아닌 벡터 그래픽을 다룬다. 벡터방식의 모양(shape)을 직접 만들고, 애니메이션 기능을 추가할 수 있다.
  2. Scene graph 지원 : 벡터그래픽 편집에 사용하는 일반 자료 구조를 지원한다.
  3. 애니메이션 루프 : 빌트인 애니메이션 루프를 통해 직접 애니메이션 기능을 구현하거나, 다른 애니메이션 라이브러리를 연동할 수 있다.
  4. 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를 이용하여 구현할 수 있다. 모바일환경에도 그대로 동작하는!

관련 링크

  1. Drawing With Two.js: 하나하나 따라해 보며 실행해 볼 수 있는 튜토리얼을 제공한다.
  2. 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

http://d3js.org/

https://github.com/mbostock/d3/wiki

http://bost.ocks.org/mike/bar/

http://tutorials.jenkov.com/svg/index.html

D3.js로 Sankey Diagram 그리기 #

Sankey Diagram #

Sankey Diagram은 흐름도(flow diagram)의 일종으로, 시스템에서 에너지나 물질의 양이 어떻게 이동하는지를 나타낸다. 화살표의 방향은 이동 방향이며, 굵기는 대상의 양이 된다. 가장 대표적인 사용예는 다음으로 1812년 나폴레옹이 러시아로 진군하면서 변화된 군사 수를 도표화한 것이다.

Alt text

출처 : 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에서 그린 도표를 확인할 수 있으며 코드도 함께 볼 수 있다.

참고 #

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

Incoming Links #

Related Data Sciences #

Suggested Pages #

0.0.1_20140628_0