[D3.js] d3.js + vis.js + steem.js 짜집기

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] d3.js + vis.js + steem.js 짜집기

[ 참조 ]

스팀파워 계산 출처 : Steem-Js for dummies #1 : How to calculate the current Voting Power @stoodkev님 소스
계기판 출처 : Pasha’s Block 59c2c7483fb61070486835d15c807941

오늘은 오픈 소스들을 이용하여 합쳐서 새로운 결과물을 만드는 방법을 알아보도록 하겠습니다. 어떤 원리를 배우고 그 원리를 실전에서 써먹지 못한다면 아무 가치가 없습니다. 그리고 처음 공부하시는 분들은 하나의 원리를 이해하더라도 곧바로 실전에 적용하기 어렵습니다. 원리를 이해하고 뭔가를 상상하더라도 상상을 코딩화하는 과정도 쉽지 않습니다. 오늘은 상상하고 쉽게 그 상상을 코딩화하는 과정을 보여드릴까 합니다. 단, 조건은 관련 정보를 얼마나 빠르게 인터넷에서 찾느냐에 따라서 달라지지만 그래도 쉽게 접근하는 과정을 설명하고 여러분들도 상상코딩을 해보세요.

1. 상상코딩 : 스팀파워 계기판

D3.js를 공부하면서 계기판 시각화를 보게 되었고 이걸 스팀에 적용하여 스팀파워 계기판을 만들고 싶었습니다. 처음부터 손수 일일히 코딩하면 초보분들은 어디서 부터 접근해야할 지 막막해 집니다.

우선, 기본베이스가 계기판이여서 d3.js+vis.js로 계기판 오픈소스에서 시각화 코딩 부분 분석하여 코딩을 원하는 시각화 형태로 수정하였습니다.

다음으로는 계기판으로 출력되는 데이터 값을 스팀파워로 대체하면 되기 때문에 그부분만 변수로 남겨둡니다.

인터넷에서 steem.js로 스팀파워를 구하는 코딩을 찾으면 쉽게 나옵니다. 물론 공식으로 대입해서 구해도 조금만 검색하면 이미 만들어진 오픈소스가 많기 때문에 적당한 소스를 가져옵니다.

거기에서 스팀파워 값을 변수저장되어 있기 때문에 그 변수 값을 계기판의 데이터 값으로 대입하면 간단히 스팀파워 계기판으 완성 할 수 있게 됩니다.

실제로 자신이 직접 코딩을 안하더라도 두 소스를 합치기만 해도 새로운 결과물이 나오는 과정을 살펴 보도록 하죠.

2. 스팀파워 계기판 만들기

원래는 직접 코딩해서 만드어야 하는데 이런식으로 코딩을 상상하고 공부 할 수 있다는 것을 보여드리게 하기 위해서 소스를 인용하여 짜집기 해 보았습니다.

1) 계기판 Pasha’s Block의 오픈소스 분석

계기판 출처 : Pasha’s Block 59c2c7483fb61070486835d15c807941

[출처 : Pasha’s Block의 오픈소스]

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.label{
    font-size:22.5px;
    fill:#ffffff;
    text-anchor:middle;
    alignment-baseline:middle;
}
.face{
    stroke:#c8c8c8;
    stroke-width:2;
}
.minorTicks{
    stroke-width:2;
    stroke:white;
}
.majorTicks{
    stroke:white;
    stroke-width:3;
}

</style>
<body>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>

<script>
  var svg=d3.select("svg");
  var g=svg.append("g").attr("transform","translate(250,250)");
  var domain = [0,100];
  
  var gg = viz.gg()
    .domain(domain)
    .outerRadius(200)
    .innerRadius(20)
    .value(0.5*(domain[1]+domain[0]))
    .duration(1000);
  
  gg.defs(svg);
  g.call(gg);    
  
  function update(){
    gg.setNeedle(vpow);
  }
  setInterval( update,5000);
</script>
</body>
</html>

여기서, 계기판 소스부분은 다음과 같습니다.

  var gg = viz.gg()
    .domain(domain)
    .outerRadius(200)
    .innerRadius(20)
    .value(0.5*(domain[1]+domain[0]))
    .duration(1000);

여기서 숫자값들을 변경해보세요. domain인 계기판 범위이고 outer는 바깥원 inner는 안쪽 원이 됩니다. 계기판 바늘은 setNeedle(바늘값) 함수가 됩니다. 캔버스 영영과 계기판 크기 모형틀을 그대로 해당 출처의 오픈소스로 실험하셔도 되고요 약간 실험목적으로 숫자를 바꿔가면서 실험하셔도 됩니다. 단, 오픈소스를 그대로 실제로 사용해서는 안되고요. post에서는 실험 목적으로 그 과정을 보여드리기 위해서 어쩔 수 없이 인용이 되었네요.

아무튼, 계기판 소스에서 필요한 부분은 setNeedle(바늘값) 함수의 바늘값입니다. 이부분을 스팀파워값으로 가져오면 됩니다.

2) @stoodkev님의 스팀파워 오픈소스 분석

스팀파워 계산 출처 : Steem-Js for dummies #1 : How to calculate the current Voting Power @stoodkev님 소스

[출처 : @stoodkev님의 스팀파워 오픈소스 ]

steem.api.getAccounts(["stoodkev"], function(err, response){
  var secondsago = (new Date - new Date(response[0].last_vote_time + "Z")) / 1000;
   var vpow = response[0].voting_power + (10000 * secondsago / 432000);
    vpow = Math.min(vpow / 100, 100).toFixed(2);
console.log(vpow);
});

위 소스에서 vpow은 스팀파워가 됩니다. ["stoodkev"] 부분만 여러분들의 계정 아디를 입력하면 여러분들의 현재 스팀파워를 알 수 있겠죠.

3) 두 오픈소스 합치기

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.label{
    font-size:22.5px;
    fill:#ffffff;
    text-anchor:middle;
    alignment-baseline:middle;
}
.face{
    stroke:#c8c8c8;
    stroke-width:2;
}
.minorTicks{
    stroke-width:2;
    stroke:white;
}
.majorTicks{
    stroke:white;
    stroke-width:3;
}

</style>
<body>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>

<script>
  var svg=d3.select("svg");
  var g=svg.append("g").attr("transform","translate(250,250)");
  var domain = [0,100];
  
  var gg = viz.gg()
    .domain(domain)
    .outerRadius(200)
    .innerRadius(20)
    .value(0.5*(domain[1]+domain[0]))
    .duration(1000);
  
  gg.defs(svg);
  g.call(gg);    
  
  function update(){
    steem.api.getAccounts(["codingman"], function(err, response){
      var secondsago = (new Date - new Date(response[0].last_vote_time + "Z")) / 1000;
      var vpow = response[0].voting_power + (10000 * secondsago / 432000);
      vpow = Math.min(vpow / 100, 100).toFixed(2);
      //console.log(vpow);
      gg.setNeedle(vpow);
    });
  }
  setInterval(update,5000);
</script>
</body>
</html>

4) 결과

현재 codingman의 스팀파워의 상태가 계기판에 나타나고 있네요. 업데이트 간격은 5초였는데 실제로 응용한다면 시간을 1분정도로 늘려야겠죠.

마무리

오늘은 제가 코딩부분을 설명할 내용은 없습니다. 단지 두 오픈소스를 합쳐서 원하는 상상 결과물을 만들었을 뿐입니다.

Pasha’s Block의 오픈소스들을 보시면 3개의 계기판을 나란히 한곳에서 보여주는 예제가 있습니다. 여러분들이 그 소스를 가지고 스팀의 평판, 스팀파워, RC를 계기판으로 한번 출력해보는 실험을 해보시면 재미있을 거에요. 그부분은 여러분들의 재미를 위해 남겨 두겠습니다.

마지막으로, 이런식으로도 뭔가를 배우고 공부를 할 수 있습니다. 오픈소스들을 많이 보시고 오픈소스 속에 숨겨진 기법들을 자신의 것으로 만들고 배운 기법에 상상을 더하면 새로운 결과물을 만들 수 있으니깐 한번 여러분들도 도전해 보세요.