[D3.js] table 시각화

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

[D3.js] table 시각화

직접 자바스립트로 table를 출력하는 방법을 많이드 사용하실 거에요. 직접 코딩해서 HTML로 출력하면 되기 때문에 굳이 D3.js로 이용하여 table를 만들 필요성이 없어 보일 수 있지만 그래도 한번 간단히 실험 차원으로 테스트 해보았네요. 이렇게 틀을 만드어 놓으면 나중에 특수효과를 넣을 때 코딩이 더 쉬워질 것 같아서 d3.js로 공부해놓으셔도 좋을 듯 보이네요. 그러면 오늘 실험인 table을 간단히 만들어 볼까요.

1. CSV 데이터 읽기

참고 : [D3.js] CSV 파일 읽는법

table 형태로 시각화하기 위해서는 먼저 데이터를 읽어와야 겠죠. CSV 파일의 데이터를 읽어 왔지만 다른 데이터 형식을 불러와도 상관 없습니다. 데이터 읽기는 복습 차원으로 간단히 살펴 봅시다.

d3.csv("데이터명.csv").then(function(data) {
  console.log(data);
});

어려운 것이 없죠.

2. table CSS 지정

table 속성을 d3.js에서 일일 스타일을 지정하면 코딩이 좀 복잡해 보이고 의미 전달이 안될 수 있습니다. CSS로 간단히 표면만 디자인합니다. 참고로 디테일적인 속성은 지정을 안하고 최소화 된 스타일로 지정했네요.

<style>
     table {
        width: 100%;    
      }
      table, th, td {
        border: 1px solid #ff00bc;
        text-align:center;
        font-weight:bold;
      }
</style>

table 폭 100% 해놓고 선 두께랑 선색을 정하고 테이블 안에 각 셀의 텍스트 가운데 정렬하고 글자크기는 두껍게라고만 지정하고 마무리 했네요. "html table"이라고 구글 검색하시면 다양한 스타일 속성들이 있으니깐 좀 더 멋지게 하실 분들은 검색하셔서 수정해 보세요.

3. table 시각화

[데이터: data.csv]

name,kor,eng,mat
a,90,90,90
b,70,100,70
c,50,60,95

이제 d3.js로 읽어온 데이터를 table로 출력 해 볼까요.

<body>
<style>
     table {
        width: 100%;    
      }
      table, th, td {
        border: 1px solid #ff00bc;
        text-align:center;
        font-weight:bold;
      }
</style>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
    
d3.csv("data.csv").then(function(data){
          var title = d3.keys(data[0]); //해더타이틀
          var table = d3.select('body').append('table'); //테이블 추가
          var thead = table.append('thead'); //thead 추가
      var tbody = table.append('tbody'); //tbody 추가

     //헤더 정보 출력
          var header = thead.append('tr')
                           .selectAll('th')
                           .data(title).enter()
                           .append('th')
                           .text(function (d) {return d;})
}); 
    </script>
</body>

우선 title로 data[0]의 정보 {name, kor, eng, mat} 담고 그 값을 header로 출력합니다. table 만들고 그안에 thead, tbody를 추가합니다. 두 부분으로 나뉘는데 여기에서는 thead 부분만 출력 됩니다. 데이터의 헤더 타이틀 부분을 출력을 하는 것이죠. 타이틀 정보도 여러개가 있고 그 정보는 tr태그를 만들고 다시 th태그를 만들어서 타이틀 데이터를 하나씩 출력하게 됩니다.

초보분들은 말이 잘 연상이 안되실 수 있을 거에요. html 태그가 어떻게 만들어졌는지 볼까요.

위 그리를 보시는 것처럼 thead 태그 안에다가 tr만들고 th를 title 데이터를 토대로 4개가 출력 되었죠.

화면으로 한번 결과를 확인해 보죠.

[결과]

이렇게 header 정보가 출력 되었네요.

이제 tbody 부분을 코딩해야 합니다.

var rows = tbody.selectAll('tr').data(data)
                .enter()
                .append('tr');

var cells =  rows.selectAll('td')
                 .data(function (d) {
                    return title.map(function (title) {
                         return { 'title': title, 'value': d[title]};
                    });
                  })
                 .enter()
                 .append('td')
                 .text(function (d) { return d.value;});

rows의 갯수를 data수 만큼 tr태그를 추가하게 됩니다.
그리고 나서 cells에 각 데이터를 td에 출력하는데 title.map()함수로 타이틀에 index에 맞게 각 데이터가 재 배치되어 만듭니다. 그 데이터를 토대로 td태그를 추가하고 그안의 text는 재 배치한 데이터 d.value값으로 순서대로 각 셀에 데이터 값을 출력합니다.

[전체소스]

<body>
<style>
     table {
        width: 100%;    
      }
      table, th, td {
        border: 1px solid #ff00bc;
    text-align:center;
    font-weight:bold;
      }
</style>        
    
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">

  d3.csv("data.csv").then(function(data){
          var title = d3.keys(data[0]); 
          var table = d3.select('body').append('table');
          var thead = table.append('thead');
                  var tbody = table.append('tbody');

          var header = thead.append('tr')
                           .selectAll('th')
                           .data(title).enter()
                           .append('th')
                           .text(function (d) {return d;})
                                             
          var rows = tbody.selectAll('tr').data(data)
                          .enter()                         
                          .append('tr');

          var cells =  rows.selectAll('td')
            .data(function (d) {
                return title.map(function (title) {
                    return { 'title': title, 'value': d[title]};
                });
            }).enter()
            .append('td')
            .text(function (d) { return d.value;});

      });

    </script>
</body>

결과를 출력해 보니깐 깔끔하게 잘 나왔네요.
[결과]

마무리

그냥 for문 돌려서 자바스클립트로 한번에 출력하면 될텐데 굳이 이렇게 복잡하게 코딩하냐고 생각 하실 수 있습니다. 예전에 steem.js에서 읽어온 데이터를 테이블로 출력할 때 for문을 이용하여 태그별로 데이터를 찍어 냈으니깐요. 하지만 이 방법의 핵심을 단순히 이것만 출력하고 끝난다면 비효율적이지만 여기에 추가로 특수효과 정렬이라든가 클릭 이벤트나 다른 다양한 이벤트 효과를 넣거나 특수효과를 부여할 때는 이 코딩을 틀로 해서 쉽게 적용을 할 수 있다는 것이 큰 장접입니다. 지금 이 코딩에서는 헤더와 몸통으로 나눠서 코딩이 되었고 헤더에 정렬클릭을 넣고 싶다면 on()함수만 붙이서 표현하면 각 title에 특수 효과를 부여가 쉽게 됩니다.

아무튼 오늘은 간단히 table을 실험을 해보았네요.