분석 : d3.js bar chart with tooltips

d3js.org example 중에 “Using d3-tip to add tooltips to a d3 bar bart”를 분석하였다.

아래 분석은 “Let’s Make a Bar Chart, Part 1 2 3“내용을 참조하였다.

example 예제에서 꾸미는 CSS나 속성은 모두 제외하고 데이타가 있을 때 어떻게 bar chart를 만들 것인가 순으로 분석하였다.

Step 1- Loading an external data file in tab-separated values(TSV) format

d3.tsv를 사용하여 데이터를 읽어오고, div tag기준으로 분류하였다. 또한 div의 width를 달리하여 값에 따라 차이가 나도록 하였다.

위의 결과는 html으로 아래와 같이 된다.

http://ift.tt/1OT5Cbc

Step 2 – Bar chart using SVG

d3.select와 append를 사용하여 svg를 dom에 추가하고, selectAll.data를 사용하여 rect 객체를 추가 한다.

scale.ordinal은 공평하게 분류할때 사용한다. 주어진 0~width에서 domain에 들어온 갯수만큼 나누어서 x(d)에 의해서 x값을 주고, x.rangeBand()로 동일한 넓이를 받는다.

scale.linear는 주어진 범위와 domain으로 들어온 최대값을 매핑해서 그 값에 맞는 상대값을 계산하여 반환한다.

아래와 같은 결과가 나오게 된다.

위의 결과는 html으로 아래와 같이 된다.

http://ift.tt/1OT5Cbe

Step 3 – Adding Axes

x,y축을 그리기 위해서 left, bottom에 margin를 넣어야 한다. 실제 예제에서는 top, right 모두 들어가지만 내용의 이해를 돕기 위해서 left, bottom만 넣었다.

svg를 640×480 전체 사이즈를 가지고, scaler들의 최대값을 margin를 뺀 값으로 변경하고, chart라는 object가 left로 translate left해서 실제 그리는 영역으로 사용했다.

d3에서는 축을 그리는 위해서 axis라는 api를 제공한다. 그 중에 orient는 axis(축)을 어디에 둘 것인가 지정하는 것이지만 내부적으로 tick를 그릴때 참고하는 것이지 실제 위치를 찾아주는 것이 아니므로 위치는 직접 잡아주어야 한다.

y축이 헷갈릴 수 있는데, 이유가 값이 일반적으로 우리가 배운 반대인 가장 위가 좌표상으로 0이고, 가장 아래가 가장 크므로 반대로 생각해야 한다.

위의 결과는 html으로 아래와 같이 된다.

http://ift.tt/1OT5Ejo

html tag를 보면, tick이라는 group에 line과 text element가 추가된 것을 볼 수 있다. path, line, text를 axis가 넣어주는 것이다.

Step 4 – Add tooltips to a d3 bar chart

d3-tip은 추가로 lib가 필요로 한다.

사용법은 간단하다.

d3.tip이라는 api로 tip를 생성해서 연결하고자 하는 selector에서 call 하면 된다.

그리고 실제 적용해야 하는 rect object의 mouse event에 연결하면 끝난다.

해보면 각 rect에 event를 붙이고 나서 axes를 추가하면 정상적으로 svg element에 추가 되지 않는데 정확한 이유는 모르겠음.

위의 결과는 html으로 아래와 같이 된다.

http://ift.tt/1EKDzD5

위의 full code는 http://ift.tt/1OT5Cbl 올려두었으니 참고바랍니다.

참고
http://ift.tt/HJj3sZ
http://ift.tt/1OT5Cbi

from WordPress http://ift.tt/1EKDz63

passport를 통하여 google, kakao oauth 사용시에 access token갱신하기.

google과 kakao의 경우에 refresh token과 함께 expires_in(초단위)를 주는데 그 시간 안에 access token을 갱신해야 한다.

access token의 만기 시간과 refresh token의 만기 시간이 다르기 때문에 rest api 요청시에 error 401이 발생하면 access token을 갱신해주어도 되지만, 이러면 rest api 사용하는 모든 부분에 대하여 401처리를 해주어야 한다.

blogsync의 경우에는 정기적인 스케줄러(2분)가 돌아가고 있기 때문에 그때 갱신해줘야 하는 타임이 넘은 경우에 갱신해주도록 하였다.

로그인했을때, expires_in값을 가지고 expireTime으로 저장하도록 만들었다.

UserMgr.makeTokenExpireTime = function (expires_in) {
    var expireDate;
    if (expires_in) {
        expireDate = new Date();
        expireDate.setSeconds(expireDate.getSeconds()+expires_in);
    }

    return expireDate;
};

function(req, accessToken, refreshToken, params, profile, done) {
    var meta = {"cName": GOOGLE_PROVIDER, "fName":"passport.use" };

    log.debug("accessToken:" + accessToken, meta);
    log.debug("refreshToken:" + refreshToken, meta);
    log.debug("params:"+JSON.stringify(params), meta);
    log.debug("profile:" + JSON.stringify(profile), meta);

    //It's not correct information. but I confirmed by /blogger/v3/users/self"
    var providerId = "g"+profile.id;

    var provider = {
        "providerName": profile.provider,
        "accessToken": accessToken,
        "refreshToken": refreshToken,
        "providerId": providerId.toString(),
        "tokenExpireTime": userMgr.makeTokenExpireTime(params.expires_in),
        "displayName": profile.displayName
    };
}

expire time이 되기 전에 access token을 갱신한다.

function _updateAccessToken(user, provider, callback) {
    var url = "https://kauth.kakao.com" + "/oauth/token";
    var data = {
        grant_type: 'refresh_token',
        client_id: clientConfig.clientID,
        refresh_token: provider.refreshToken
    };

    _requestPost(url, provider.accessToken, data, function (error, response, body) {
        if (error) {
            log.error(error);
            return callback(error);
        }
        log.info(body);

        var newProvider = userMgr.updateAccessToken(user, provider, body.access_token, body.refresh_token, body.expires_in);
        return callback(null, newProvider);
    });
}

아래와 들어오는 결과를 가지고 기존 값은 변경하면 된다.

[Response]

HTTP/1.1 200 OK
Content-Type: application/json;charset=UTF-8
{
    "access_token":"wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww",
    "token_type":"bearer",
    "refresh_token":"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz",  //optional
    "expires_in":43199,
}

google도 kakao랑 동일한 방법으로 동작된다.

참고

http://ift.tt/1zmUaxp

http://ift.tt/1bO5FD7

from WordPress http://ift.tt/1bO5CY3

ajax와 request of node

사실 둘다, get, post를 한다는 것은 동일한데, ajax로 구현한 것을 server side인 node에서 구현해야 할때도 있다.

그럴때, 참고하기 위해 실제 동작은 동일하지만 구현법이 다른 두개 비교 해둔다.

jquery의 ajax post

$.ajax({ url:"/login", type:"post", 
  data:{userId:"userA", userPwd:"pwdA"},
  success : function(response) {
    console.log(response);
}, 
  error : function(request, response, error) {
    console.log(request);
}});

node.js의 request post

request.post("/login", {
    json: false,
    form: {userId:"userA", userPwd:"pwdA"}
}, function (error, response, body) {
    if (error) {
        return console.error(error);
    }
    return console.log(body);
});

from WordPress http://ift.tt/1Dojezm

vi에서 한글 encoding 변환하기.

vi에서 한글이 ??? 깨져서 보이는 경우가 있는 이 경우에는 encoding 을 아래와 같이 변환해야 한다.

:e ++enc=euc-kr

자꾸 잊어버려 기록 차원에서 남긴다.

from WordPress http://ift.tt/1FDPsux

몰입, 두 번째 이야기

생존을 위한 삶은 필요한 만큼의 노력을 하는데 그치지만, 후회없는 삶은 최대한의 노력을 하게 한다.

생존을 위한 삶은 수동적인 삶에 머물지만, 후회 없는 삶은 능동적이고 적극적인 삶으로 이끈다.

그 차이는 시간이 갈수록 커진다.

자유시간이 주어졌을 때 심심하다고 생각하는 사람은 구조적으로 수동적일 수 밖에 없다.

무리가 없는 최선, 그래서 오랜기간 아무 탈 없이 지속적으로 실천할 수 있는 최선, 이것이 첫번째 패러다임의 변화다.

‘의식이 있는 한 생각의 끈을 놓지 않겠다!’고 결심하고 이것을 실천하면서 몰입을 체험했다. 이것이 두번째 패러다임의 변화다.

인간이 할 수 있는 최대의 집중 상태와 최대의 열정이 결합될 때 비로소 궁극의 최선이 발휘되는 것이다.

나는 몇달간 몰입을 지속하면서 이러한 궁극의 최선을 경험했다.

일반적으로는 서로 들어맞지 않는 아이디어와 사건과 기억들을 연결하는 것, 그것이 바로 창의성의 기본이다.

고민은 단지 생각을 유도할 뿐이다. 고민과 생각을 확실히 구별해야 한다.

고민이 지속되면 노이로제가 되고 스트레스와 병을 유발하지만, 올바른 방법으로 생각을 지속하면 부작용이 거의 없다.

공허함과 부질없음은 주로 마음의 중심이 일 안에 있지 않고, 바깥에 있을 때 생긴다.

내가 하는 일이 과연 꽃다운 나의 청춘과 바꿀 만한 가치가 있는지 잘 생각해봐야 한다.

그것은 어떠한 일을 하느냐의 문제가 아니라 어떻게 일을 하느냐의 문제다.

열정과 도전정신은 끊임없는 도전을 통해서만 키울 수 있는 것이다.

확률에 영향을 주는 요소에 대해 올바른 판단을 내려야 문제가 효과적으로 해결된다는 것이 엔트로피 법칙이 주는 시사점이다.

프로는 선택과 집중을 통해 필요한 곳에 모든 에너지를 쏟아 붓지만, 아마추어는 불필요한 곳에 에너지를 흩뿌린다.

가치관은 어떤 일을 하느냐가 아니라 어떻게 일을 하느냐에 따라 달라지는 것이다.

나이가 들수록, 그리고 새로운 지식을 흡수하지 않을수록 신념우위체계의 성향이 강해진다.

이 세상에 역기능 없이 순기능만 있는 것도 없고, 순기능없이 역기능만 있는 것도 없다.

똑같은 상황이라도 어느 쪽에 몰입하는냐에 따라 결과가 달라지는 것이다.

행복이 넘치는 상태를 오랜기간 경험하다 보면 행복에 대한 비중이 점점 줄어든다는 것이다.

행복은 인생의 목적이라기보다 무엇인가 보람있고 가치 있는 일을 찾고 이를 보다 더 잘하기 위해 거쳐야 하는 하나의 과정이자 수단이다.

‘자신의 능력을 발휘하고 그 한계를 넓혀가는 삶’을 살아 한다.

from WordPress http://ift.tt/1EmJDyw

WebStorm 실행과 창 관련 단축키

Run

ctl+shift+R

실행하기.

Debug

ctl+shift+D

디버깅모드로 실행하기.

Node.js에서 server, client 모두 debug mode로 디버깅하기.

위와 같이 server(node.js)에 break point를 걸고, shift+ctl+d로 debug mode로 실행한다.

client (angular.js)쪽에 break point를 걸어준다.

index.html에서 debug로 실행하면 break가 client, server 왔다갔다하면서 디버깅이 가능한다.

Hide active tool window

shift + esc

Terminal window

alt + F12 (alt+fn+f12)

Project tab on/off

cmd + 1

참조

from WordPress http://ift.tt/16Gk4yH

WebStorm에서 변수, 함수 추가 단축키 사용하기.

Extract -> Variable

alt+cmd+v

지정된 부분을 변수에 추가하는 기능이다.

case 1) require부분에 변수로 빠르게 넣기.

require("assert")|

위와 같이 require부분까지만 넣고, alt+cmd+v를 하면 var assert 그리고 ;까지 추가해준다.

case 2) url이나, 특정 string을 변수로 변환하기.

$http.get("http://localhost:3000").success(function(products) {
});

위의 코드에서 url를 선택하여 alt+cmd+v를 하면 아래와 같이 수정된다.

위와 같이 var key = “http://localhost:3000″;이 상위라인에 생성되고, 본래 위치는 변수로 대처된다. 여기서 변수명을 수정하면 위의 라인 정의된 변수 명도 같이 변경된다.

새로 만들어진 변수를 함수 시작부분으로 옮기는 것은 직접 해야 하는듯하다.

Extract -> Method

alt+cmd+m

특정 코드 부분을 Method로 빼는 경우에 유용하다.

위와 같이 Method로 빼고자 하는 부분을 선택하고, alt+cmd+m을 한다.

그러면 위와 같이 method scope를 지정하는 팝업창이 뜬다.

원하는 scope를 지정하면 함수명을 변경하고, parameter를 설정하는 창이 나온다.

함수명과 parameter를 설정하면 위와 같이 함수로 분리된 코드를 볼 수 있다.

from WordPress http://ift.tt/1Kw170E