[D3.js] 코딩의 가독성 높이기

D3.js/D3.js|2019. 11. 14. 09:00

[D3.js] 코딩의 가독성 높이기

한번에 쭉 명령어를 나열하는 것보다 함수 단위로 쪼개서 명령 동작을 구분하여 가독성을 높이는 작업을 한번 해볼까 합니다. 오늘 실험하는 코딩법은 그냥 하나의 방법일 뿐 보는 관점에 따라 좋은 방법일 수도 아닐 수도 있습니다. 더 큰 틀로 묶는게 나을 수도 있지만 이렇게 쪼개서 나누는 것이 나을 수도 있습니다. 단지 예를 들어 이런식으로도 접근해 볼 수 있다는 의미의 접근법입니다.

1. CSV 데이터 파일 읽기

지난시간에 읽은 CSV 데이터 파일을 circle 모양으로 시각화 코딩을 복습해 볼까요.

[data.csv] : 데이터 간격은 콤마(,) 입니다.

x,y
50,50
100,150
150,50
200,150
250,50

[소스]

<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
  <script>

    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");

    d3.csv("data.csv").then(function(data){
        var circle = svg.selectAll("circle").data(data)
               .enter().append("circle")
                 .attr("cx",function(d){return d.x;})
                 .attr("cy",function(d){return d.y;})
                 .attr("r",10)
                 .attr("fill","red");
    });
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>
</body>

[결과]


이 부분은 지난시간에 했던 내용이고 이 부분을 각 동작을 구분 지어서 나눠어 보도록 하겠습니다.

2. CSV 데이터 파일 구분지어 코딩

위 코딩은 큰틀에서 세부분으로 나뉩니다.

[구분]

  • svg 캔버스 영역
  • csv 데이터 읽기
  • circle 형태로 데이터 출력

(1) svg 캔버스 영역

var svg = d3.select("body").append("svg")
       .attr("width",500)
       .attr("height",500)
       .style("background-color","yellow");

위 부분은 그냥 두겠습니다.

(2) csv 데이터 읽기

d3.csv("data.csv").then(function(data){      
     render(data);
});

위 부분은 데이터를 읽는 부분으로 안에는 사용자정의함수 호출만 해놓고 더이상 코딩하지 않습니다. 이렇게 하면 이부분만 보면 "아! 데이터를 읽는 부분이군!" 이렇게 가독성을 높일 수 있습니다. 데이터를 읽어와 render()함수에 data를 넘겨줘서 뭔가 동작을 수행하게 되는 거구나 하고 쉽게 해석 할 수 있습니다.

(3) circle 형태로 데이터 출력

function render(dataset){
      var circle = svg.selectAll("circle").data(dataset)
            .enter().append("circle")
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",10)
             .attr("fill","red")
}

위 코딩을 보면 읽어 온 데이터를 실제 출력하는 부분으로 어떻게 데이터를 출력하는지 전체 소스에서 해당 출력 영역의 경계를 명확하게 구분지을 수 있습니다. 뭔지는 모른데 circle로 데이터를 출력하는 거구나 하고 구분지어 쉽게 해석 할 수 있습니다.

3. 소스

 <script src="https://d3js.org/d3.v5.min.js"></script>

<body>
  <script>
    //배경
    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");
                    
    //데이터 출력
    function render(dataset){
      var circle = svg.selectAll("circle").data(dataset)
            .enter().append("circle")
             .attr("cx",function(d){return d.x;})
             .attr("cy",function(d){return d.y;})
             .attr("r",10)
             .attr("fill","red")
    }
        
    //데이터 읽기
    d3.csv("data.csv",type).then(function(data){      
         render(data);
    });
        
    //데이터 타입
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>
</body>

4. 결과

결과는 아래와 같이 정상적으로 출력 되었네요.


마무리

CSV 데이터 파일을 시각화 할때 이렇게 나누니깐 보기가 훨씬 편해졌죠. 함수단위로 나뉘어서 해당 부분이 어떤 동작을 수행하는지 가독성이 높아졌습니다. 이것은 짧은 코딩 예제를 나눈거라서 구지 저렇게 할 필요가 있을까 생각 할 수 있습니다 하지만 중요한 것은 이렇게 함수 단위로 구분지어 넣으면 나중에 수정하거나 특정 코딩부분을 다른 곳에 이식 할 때 유용합니다. 하나의 틀 형태로 쭉 코딩을 써내려 갈 수 도 있지만 이렇게 분산된 캡슐 형태로 함수 단위로 쪼개어 놓으면 이점이 더 많습니다.

오늘은 그냥 이런식으로 코딩 스타일이 있구나 정도로 알아 두시면 좋습니다.

저작자표시

'D3.js > D3.js' 카테고리의 다른 글

[D3.js] 데이터 배열 다룰 때 유용함 함수  (0) 2019.11.18
[D3.js] Scale 함수 사용  (0) 2019.11.15
[D3.js] CSV, TSV, JSON, XML 시각화  (0) 2019.11.13
[D3.js] XML 파일 읽는법  (0) 2019.11.11
[D3.js] JSON 파일 읽는법  (0) 2019.11.01

댓글()

티스토리툴바