[D3.js] Color Scale 함수

참고자료 : http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d (인용)

지난 시간 Color 함수에 대해 살펴 보았습니다. 오늘은 Color에서 더 나아가 Categorical Colors 함수들에 대해 알아보고자 실험을 하였습니다.

1. Categorical Colors 변천 사

Categorical Colors 함수들이 각 버전 v3, v4, v5 별로 어떻게 변경이 되었는지 알아보도록 하죠

1) 버전 V3

d3.scale.category10()
d3.scale.category20()
d3.scale.category20b()
d3.scale.category20c()

위 4개의 함수들이 있습니다. 여기서 함수명의 숫자가 있는데 Color의 갯수라고 생각하시면 될 거에요. 실험은 d3.scale.category10() 함수를 테스트 하는데 위 참고자료의 소스를 인용하여 간단히 실험를 해보겠습니다.

d3.scale.category10() 함수은 10개의 Color를 가지고 있습니다. 그래서 원을 10개를 만들어서 각 Color를 출력하여 어떤 Color를 지니고 있는지 시각적으로 살펴 볼까요.

예) 참고자료 소스 일부 인용

<script src="https://d3js.org/d3.v3.min.js"></script>
  
<body>
<script>
  var color= d3.scale.category10();

  var svg = d3.select("body").append("svg")
                 .attr("width",500)
                 .attr("height",50)
                 .style("background-color",d3.rgb(255,255,0));
      svg.selectAll("circle").data( d3.range(10) )
         .enter()
         .append("circle")
         .attr("r", 18 )
         .attr("cx", d3.scale.linear().domain([-1, 10]).range([0, 500]) )
         .attr("cy", 25)
         .attr("fill", color );
</script>
</body>

[결과]

추가로, 나머지 3개의 함수들은 20가지의 Color를 가지고 있습니다. 한번 어떤 Color를 가지고 있는지 여러분들이 직접 출력 해보세요. 위 코딩은 10가지 색을 지정하는 코딩이였으니깐 20가지 색으로 지정하려면 위 코딩에서 어떤 값을 수정해야 할까요. 자세히 보시면 10이라는 숫자가 들어가 있는 부분이 보일 꺼에요. 10이라는 수치가 들어가 있는 코딩 구분을 찾아서 20으로 바꾸시면 됩니다.

버전 v4

버전 v3에 사용되는 함수들이 아래아 같이 변경 되었습니다.

d3.scale.category10 -> d3.schemeCategory10
d3.scale.category20 -> d3.schemeCategory20
d3.scale.category20b -> d3.schemeCategory20b
d3.scale.category20c -> d3.schemeCategory20c

그럼 어떻게 코딩이 바뀌었는지 확인해 볼까요.

 var color= d3.scale.category10();

변경 후,

 var color = d3.scaleOrdinal(d3.schemeCategory10);

이제는 v4 버전에서도 정상적으로 출력 되는지 볼까요.
예)

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<script>
  var color = d3.scaleOrdinal(d3.schemeCategory10);
  var svg = d3.select("body").append("svg")
                 .attr("width",500)
                 .attr("height",50)
                 .style("background-color",d3.rgb(255,255,0));
      svg.selectAll("circle").data( d3.range(10) )
         .enter()
         .append("circle")
         .attr("r", 18 )
         .attr("cx", d3.scaleLinear().domain([-1, 10]).range([0, 500]) )
         .attr("cy", 25)
         .attr("fill", color );
</script>
</body>

추가로,

d3.scale.linear() -> d3.scaleLinear()

[결과]
정상적으로 결과가 나왔네요.

버전 v5 변경

d3.scale.category10 -> d3.schemeCategory10

위 함수 표현만 남아있고 20가지 색을 지정해야 하는데 더이상 지원하지 않게 되었습니다. 즉, v4버전에서 d3.schemeCategory10 만 남기고 나머지 3개는 더 이상 사용 할 수 없게 되었네요. 다른 Color 지정 함수를 사용해야 합니다.

마무리

D3.js Color Scale 함수들을 공부하면서 좀 불편했네요. 이렇게 버전 별로 변경되는 부분이 많기 때문에 기존의 방식에 익숙한 분들은 매번 버전에 맞게 다시 공부해야 한다는 것이 약간 불편하더군요. 좀 더 개선되고 좋아지기는 하지만 실전에 사용하는 분이 아니라면 어느정도 공부를 해놓았어도 나중 되면 다시 새롭게 공부해야 한다는 것이 공부할 의욕을 약간 꺽는 것 같아요. 현재 써먹을 일이 없다면 나중에 필요할 때 공부하지 그렇게 되면 지금 D3.js를 공부하더라고 깊게 공부를 못하는 요인으로 작용하더군요.
예전에 v4 버전으로 처음 공부할 때 인터넷 자료들이 거의 v3을 기반으로 동영상 강의나 일반 자료들이 제공되기 때문에 따라서 공부하다가 v4버전으로 공부하기 참 힘들었던 것이 기억이 나네요. 초반 공부하다가 문득 v5 버전이 나오면 다시 공부해야하는 것 아냐! 라는 생각이 들고 이렇게까지 열심히 공부해야하냐! 생각도 들고 딱히 뭘 만들어서 시각화 할 대상도 없다 보니깐 중간에 포기했었네요. 이번에 다시 공부 한 이유는 우선 시각화 할 대상 스팀 블록체인이 있기 때문에 이걸 가지고 한번 공부해보고 싶어지니깐 어느정도 의욕이 생기네요.
현재 D3.js API 함수들을 집중적으로 공부하고 있는데 빨리 D3.js 차트 오픈 소스들을 보고 공부해서 제 것으로 만들어야 겠네요. 갈길이 멀군요.

[D3.js] Color Scale 함수 | Ecency