코드다

대화형 ChatGPT 소개

!@!~#!@!# — Sun, 12 Mar 2023 10:02:26 +0900

우리는 찾고싶은 주제에 대해 인터넷에서 검색을 통해 답을 얻는데까지 꽤 긴 시간을 필요로 한다. 하지만 최근 ChatGPT를 통해 단 몇초만에 원하는 답을 얻을 수 있다. 질문을 하면 방대한 자료를 학습한 ChatGPT가 적절한 답을 바로 내놓는다. 재밌는 것은 AI와 대화하는 식으로 답을 얻기 때문에 꼭 사람과 대화하는 것 같다. 그이유는 네가 첫번째 질문을 하고 두번째 질문을 이여 갈 때 두번째 질문의 의도를 AI가 첫번째 질문과 두번째 질문에 대한 상관관계를 AI 스스로가 판단하고 학습을 통해 답을 내놓기 때문에 인간과 대화하는 착각을 불러 이르킨다. 즉, 질문을 하면 할 수록 AI가 스스로 학습하고 진화하여 답변을 내놓기 때문에 네가 원하는 답을 찾기 쉬워진다.

단점으로는 인터넷에 떠도는 방대한 자료를 기반으로 하기 때문에 100% 정답을 알려주지는 않는다. 찌라시 엉터리 자료들이 인터넷에 떠돌기 때문에 그 자료를 학습하여 답을 내놓기도 한다.

한예로 "손흥민 현상황"에 대해 알려주라고 하니 대체적으로 현재 손흥민에 대한 정보를 제공해준다. 처음에 질문했을 때는 손흥민이 이미 토트넘에서 다른 팀으로 이적했다는 정보의 답을 해주었다. 그래서 두번째 질문에서 "아직 토트넘에 있는데" 하니깐 AI 죄송하다고 하면서 정정해서 다시 정보를 제공해준 사례가 있었다. 이제 다시 질문을 하면 "토트넘소속"이라는 답변으로 수정된 답을 제공해준다. 이처럼 100% 신뢰할 수 있는 답을 AI는 해주지 않는데 "가짜뉴스, 짜리시, 엉터리정보"도 학습을 통해 답을 하기 때문에 네가 질문하고자하는 주제에 대한 기본 지식이 있어야 보다 정확한 답을 얻을 수 있게 된다. 사전지식이 없다면 엉터리 정보에 답을 진짜로 믿게되는 오류를 범하게 된다.

그럼에도 ChatGPT는 유용하다 단점은 있지만 이 단점은 질문으로 통해 네 계정의 AI 학습을 통해 수정하면 원하는 답으로 같이 찾을 수 있어 매우 유용하다.

사용법 : 로또번호만들기

질문1. "랜덤6개 숫자 만드는 프로그램"

위와같이 질문을 할 때 파이썬으로 만들어 줬다. 난 자바스크립트로 만들고 싶어져서 2번째 질문을 던졌다.

질문2: "자바스크립트"

이렇게 질문을 하니 ChatGPT는 기존 답변내용에서 자바스크립트 언어로 재구성해서 답을 해주었다.

위 결과를 웹페이지에서 보고 싶어졌다.

질문3. "웹으로"

이렇게 네가 원하는 방향으로 ChatGPT는 답을 해준다.

마무리, 위 내용의 일부는 제가 시간함수라든간 버턴 추가라던가 이미 질문 학습을 시킨 상태로 네가 원하는 방향으로 코딩을 해주었습니다. 아마 여러분들이 질문을 하게 되었을 때 저와 동일한 결과를 얻지 못할 수 도 있습니다.

질문을 하고 이게 아니면 난 이걸 원하는게 아니라고 명확하게 말하고 이런방향의 답을 원한다고 하면 AI는 계속 질문에 대해 학습을 하게 된다. 단편적으로 단어만 적어도 바로 "너의 질문이 이것일 꺼야!" 하고 답을 AI는 해주게 된다. 계속질문에 대해 학습을 하면 보다 손쉽게 답을 찾게 됩니다.

[D3.js] Britecharts 사이트 소개

!@!~#!@!# — Tue, 7 Jan 2020 09:00:00 +0900

[D3.js] Britecharts 사이트 소개

D3.js를 공부하다가 재밌는 사이트를 발견했네요. Britecharts 사이트 인데 D3.js 기반의 라이브러리 API 함수를 제공해주는데 업그레이드 형태의 라이브러리인 것 같아요. 차트 시각화가 좀 더 정교하고 멋진 표현을 쉽게 만들 수 있게 해주는 것 같은데 아직 사용해 보지 않았고 코딩을 봐서는 꽤 깔끔하게 차트 코딩이 이루어지는 것 같아 보이네요. 간단히 소개만 합니다.

1. Britecharts 사이트

Britecharts 사이트 github 사이트에 등록된 곳이네요.

여기서, API 항목을 클릭하면 대충 각 차트 형태들을 아래 그림을 보는 것처럼 나누었고 사용방법에 대해서 자세히 소개하고 있네요.

위 API 에서 Bar를 클릭했는데 대충 영문으로 설명을 자세히 나와 있네요.

2. Britecharts 세팅

위의 사이트 이미지에서 Getting Started라는 걸 클릭하면 세팅하는 방법이 아래와 같이 나옵니다. 4가지 방식인데 설치를 하든 직접 링크 연결을 하든 선택해서 하면 되는 것 같더군요.

3. Britecharts 예제

사이트 보시면 Demos항목이 있는데 거기 Bar Chart를 한번 클릭해 봤네요.

code를 보시면 엄청 간결하죠. D3.js를 어느정도 공부하고 이걸고 공부하면 재밌을 것 같네요.

마무리

오늘은 우연히 발견한 Britecharts를 소개 해봤네요. 어느정도 D3.js 지식이 있는 상태에서 이걸 사용하여 차트 시각화하면 꽤 유용할 듯 싶네요. 나중에 d3.js가 정리가 되면 한번 이것도 공부해 봐야 겠네요.

[D3.js] 축(Axis) 함수

!@!~#!@!# — Mon, 6 Jan 2020 21:00:00 +0900

[D3.js] 축(Axis) 함수

차트을 보면 양쪽 사이드에 X축과 Y축을 그리는데 D3.js에서는 이 축을 그리는 함수를 제공해 줍니다. 그래서 오늘은 이 X,Y축을 그려보는 실험을 간단히 해보도록 하겠습니다.

1. 축(Axis) 함수

기본 4개의 함수를 살펴보도록 하죠.

d3.axisLeft () - 왼쪽 수직 축을 생성
d3.axisRight () - 세로 방향의 오른쪽 축을 생성
d3.axisBottom () - 하단 수평 축을 생성
d3.axisTop () - 상단 수평 축을 생성

2. 축(Axis) 그리기

축을 그리기 위해서 축을 그릴 위치를 아래와 같은 위치에 축을 정했습니다.

그릴 축은 캔버스 영역 안에서 그리게 되는데 한번 코딩을 해보도록 하죠.

1) 캔버스 영역 그리기

지난 시간에 캔버스 영역 그리기는 많이 해보았기 때문에 따로 설명 드리는 것은 생략하겠습니다. 간단히 body 태그에 append()함수로 svg 태그를 추가하고 widht, height 크기의 그리게 되고 배경색은 yellow으로 한다는 코딩입니다.

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

2) X,Y 축(Axis) 그리기

우선, 축을 그리기 전에 축의 범위를 지정해야 합니다. 범위는 어떻게 지정할까요. 바로 차트를 그릴 읽어 온 데이터의 값의 범위로 축의 범위를 지정해 주면 됩니다.

[데이터]

var data = [100, 200, 300, 400, 500];

[X축 그리기]
위 데이터를 스케일함수를 이용하여 x축 크기를 만들어 봅시다.

 var xScale = d3.scaleLinear().domain([0, d3.max(data)])
   .range([0, width-50]);

위 코딩을 보면 x축 크기는 domain[0,데이터 최대값]을 기준으로 range[0,폭-50]로 반환하게 되면 캔버스 수평(width) 범위에 맞게 X축 scale를 지정해 주게 됩니다.

다음으로, X축을 그리기 위해서 X축 그릴 함수 3.axisBottom()를 사용게 됩니다.

var xAxis = d3.axisBottom().scale(xScale);

하단 수평으로 X축을 그리는데 그 scale은 방금 위에서 만든 xScale값을 scale()함수 안에 대입하면 됩니다.

이제는 캔버스에 X축을 그려 볼까요.

svg.append("g")
    .attr("transform", "translate(30, 280)")
    .call(xAxis)

위에 캔버스 영역 그린 svg에 X축 그리기 위해 g태그를 추가하고 그릴 캔버스 위치는 transform 속성에 translate()함수로 캔버스(30,280) 위치로 이동하게 됩니다. 바로 X축을 그리는 위치가 됩니다. call()함수로 안에 xAxis값을 대입하면 캔버스 안에 지정한 위치를 기준으로 X축을 그리게 됩니다.

[Y축 그리기]
Y축은 위 X축 그리기 과정과 동일합니다.

    var yScale = d3.scaleLinear().domain([0, d3.max(data)])
        .range([height-50, 0]);    
         
    var yAxis = d3.axisLeft().scale(yScale);
         
    svg.append("g")
        .attr("transform", "translate(30, 30)")
        .call(yAxis);

3) 전체 코딩

<body>
 <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script>  
 <script>
   var width = 300, height = 300;
   var data = [100, 200, 300, 400, 500];
     
   var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height)
         .style("background-color",'yellow');
        
    var xScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, width-50]);

    var yScale = d3.scaleLinear().domain([0, d3.max(data)]).range([height-50, 0]);    
 
    var xAxis = d3.axisBottom().scale(xScale);         
    var yAxis = d3.axisLeft().scale(yScale);
         
    svg.append("g")
        .attr("transform", "translate(30, 30)")
        .call(yAxis);
        
    svg.append("g")
        .attr("transform", "translate(30, 280)")
        .call(xAxis)
        
      </script>
   </body>

4) 결과

마무리

D3.js API 함수를 이용하여 X, Y축을 간단히 그려 보았습니다.참고로 데이터를 그리는 코딩을 하면 코딩이 길어지고 오늘 알아 볼 Axis 관련 함수들에 대한 부분에 집중 하기 위해서 데이터를 그리는 코딩을 일부로 생략 했습니다.

[D3.js] Color Scale 함수

!@!~#!@!# — Fri, 22 Nov 2019 09:00:00 +0900

[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 함수

!@!~#!@!# — Thu, 21 Nov 2019 21:00:00 +0900

[D3.js] Color 함수

참고 : D3.js API - https://github.com/zziuni/d3/wiki/API-Reference

Color 관련 scale 함수들을 다룰까 고민하다가 그냥 D3.js API에 나와 있는 함수들을 간단히 실험 해보겠습니다.

1. rgb(r,g,b) 함수

D3코딩 : d3.rgb(r,g,b);

Red, Green, Blue 값으로 RGB Color를 생성합니다. 우리가 잘 아는 기본 rgb()함수로 그냥 사용하시면 됩니다.

예) 캔버스 영역의 배경색 지정

 <script src="https://d3js.org/d3.v5.min.js"></script>
 
<body>
<script>
  var rgb = d3.rgb(255,0,0);
 
  var svg = d3.select("body").append("svg")
                 .attr("width",100)
                 .attr("height",100)
                 .style("background-color",rgb);
 
</script>
</body>

[결과]

2. hsl(h,s,l) 함수

D3코딩 : d3.hsl(h,s,l);

색조(hue) , 채도(saturation), 명도(lightness) 값으로 HSL Color를 생성합니다.

예) 캔버스 영역의 배경을 색 지정

 <script src="https://d3js.org/d3.v5.min.js"></script>
 
<body>
<script>
  var hsl = d3.hsl(150,50,50);
  var svg = d3.select("body").append("svg")
                 .attr("width",100)
                 .attr("height",100)
                 .style("background-color",hsl);
</script>
</body>

[결과]

Color 문자열을 파싱해서 RGB Color 생성

 <script src="https://d3js.org/d3.v5.min.js"></script>
 
<body>
<script>
  var rgb = d3.rgb(255,0,0);
  var hsl = d3.hsl(d3.rgb(0,255,0));
 
  var svg = d3.select("body").append("svg")
                 .attr("width",100)
                 .attr("height",100)
                 .style("background-color",hsl);
</script>
</body>

[결과]

3. hcl(h, c, l) 함수

D3코딩 : d3.hcl(h, c, l);

예) 캔버스 영역의 배경을 색 지정

 <script src="https://d3js.org/d3.v5.min.js"></script>
 
<body>
<script>
  var hsl = d3.hsl(150,50,50);
  var svg = d3.select("body").append("svg")
                 .attr("width",100)
                 .attr("height",100)
                 .style("background-color",hsl);
</script>
</body>

[결과]

추가로, 위 hsl(color)에서와 마찬가지로 hcl(color)로 표현 할 수 있다.

var rgb = d3.rgb(255,0,0);
var hcl = d3.hcl(d3.rgb(0,255,0));

마무리

rgb()함수 하나만 하더라도 그와 관련 된 여러 함수들이 있는데 다음 D3.js 사이트에 가셔서 Color 편을 보시면 과련 함수들이 많기 때문에 다 거론 할 수 없고 직접 가셔서 각 함수들을 인자 값을 대입하여 확인하시기 바랍니다.

D3.js API - https://github.com/zziuni/d3/wiki/API-Reference

[D3.js] 추가 Scale 함수

!@!~#!@!# — Wed, 20 Nov 2019 09:00:00 +0900

[D3.js] 추가 Scale 함수

참고 :
[D3.js] Scale 함수 사용
[D3.js] ScaleLinear 함수

Scale 관련 함수들을 정리하고 있습니다. 지난시간에 scaleLinear, scalePow, scaleLog 함수에 대해서 간단히 실험 하였고 오늘은 그외 다른 Scale 함수들을 몇개만 더 실험 해볼까 합니다. 과거 제 블로그에 정리하다가 만 내용인데 scaleThreshold(), scaleOrdinal(), scaleQuantize(), scaleQuantile() 함수에 대해서 다시 간단히 정리해 봅니다.

1. d3.scaleThreshold() 함수

구조 : 임의의 수 x가 domain[1,10]의 범위를 가질 때 3가지 상황
x < 1 일때 상황
1 <= x < 10 일때 상황
x >= 10 일때 상황

위와 같은 구조를 x가 값에 3가지 상황이 만들어 집니다.

쉽게 설명하자면,

예)

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

<body>
  <script>
    var data = [0,1,2,3,4,5,6,7,8,9,10,11];

        var a = d3.scaleThreshold().domain([1, 10])
                    .range(["red", "green", "blue"]);
                            
    data.forEach(function (d){console.log(a(d)); }); 

  </script>
</body>

[결과]

위 결과를 보는 것 같이 0은 red이고 1~9까지는 green이고 마지막으로 10은 blue가 됩니다. 대충 scaleThreshold()함수가 어떤식으로 동작하는지 아시겠지요.

추가로,

  var a = d3.scaleThreshold().domain([1, 10, 20])
                    .range(["red", "green", "blue","yellow"]);

위와 같은 상황이면 어떻게 동작할까요.

x < 1 일때 => red
1 <= x < 10 일때 => green
10 < x < 20 일때 => blue
x >= 20 일때 => yellow

위와 같은 형태가 됩니다.

2. d3.scaleOrdinal() 함수

이 함수는 도메인의 값은 범위를 나타낸다기 보다는 지정된 고정값을 나타내고 그 고정값에 대한 매칭되는 반환값을 내놓는 방식인데 실제 동작하는 과정을 통해 이해하셔야 이 말의 뜻을 알 수 있습니다. 그리고 이 함수를 제대로 이해하시면 scalePoint()나 scaleBand() 함수들이 있는데 비슷한 동작을 수행합니다. 하나의 함수를 제대로 이해하시면 이 두 함수를 쉽게 이해하실 수 있습니다.

var b = d3.scaleOrdinal().domain([0, 1])
                .range(["red", "green", "blue"]);

이렇게 선언되었다고 하죠. 여기서 0~1의 범위가 아니라 딱 0일때 1일때 두가진 상황만 존재한다는 것이죠. 포인터값이라고 해도 되겠죠.

0일때 => red
1일때 => green

출력되는 것이죠. 그럼 "blue"은 뭐냐고 할 수 있겠죠 구지 두가지 값만 존재하는 도메인인데 어디냐 쓰냐고 아리송 하겠죠.

domain([1,10]) 하면 1~10까지이겠지 하겠지만 여기서 1과 10 두가지 상황 밖에 존재하지 않습니다.

이때

    console.log(b.domain());  
    console.log(b(2));
    console.log(b.domain());  
    console.log(b(-1)); 
    console.log(b(3));
    console.log(b(5));
    console.log(b.domain());

찍어보시면 엄청 재밌는 상황이 발생합니다.

b.domain() => [0,1]  당연 나옵겁니다.
b(2) => blue
b.domain() => [0,1,2] 가 나옴

갑자기 도메인에 2가 추가되고 2가 "blue"되어 버렸죠.

b(-1) => red
b(3) => green
b(5) => blue
b.domain() => [0,1,2,-1,3,5] 가 나옴

보는것처럼, 현재 도메인에 포한된 포인터값이 없다면 새롭게 도메인에 추가됩니다. 여기서 추가 된 세번째 "blue"라는 반환값을 갖게 됩니다.

즉, 순차적으로 반환값이 반환되는데
domain[0, 1, 2, -1, 3, 5]

range 반환값이 red=>green =>blue=>red=>green=>blue... 이런식으로 반환을 하게 됩니다. 여기서 3가지 색은 순차적으로 도메인 등록된 값 순으로 색이 지정되는것이죠.

그리고,

  var c = d3.scaleOrdinal().domain(["a","b","c"])
                .range([0, 10]);

도메인[a,b,c]인데 반환[0,10]이네 하면서 분명히 scaleLinear()함수에서 domain과 range범위는 일치하라고 했는데 뭐지 하시는분들이 있을 수 있습니다. 방금전 scaleOrdinal()의 동작 원리를 이해하신 분이라면 "a"=0, "b"=10이니 "c"=0이 겠구나 하고 떠올라야 합니다.
각 포인터 값들에 대해서 range() 반환값들이 순차적으로 매칭되어서 반환된다는 점만 기억하세요

예)

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

<body>
  <script>
    var data = [0,1,2,3,4,5,6,7];

    var b = d3.scaleOrdinal().domain([0, 1])
                .range(["red", "green", "blue"]);;
                            
    data.forEach(function (d){console.log(b(d)); console.log(b.domain()); }); 

  </script>
</body>

[결과]
아래 결과에서 도메인 값이 추가 과정을 잘 보세요.

3. d3.scaleQuantize() 함수

domain()의 범위를 range()반환 값에 맞춰서 자동으로 domain() 범위를 쪼개서 분류합니다. 여러분들이 생각을 할 때 반환값을 기준으로 역으로 도메인의 범위를 지정해준다고 생각하시면 될 거에요.

식 : y = m round(x) + b

 var c = d3.scaleQuantize()
                 .domain([0, 30])
                 .range(["red", "green", "blue"]);

위와 같은 코딩을 하게 되면 어떻게 될까요.

도메인 범위가 다음과 같이 지정이 됩니다.

red   => 0~9
green=> 10~19
blue  =>21~29

즉, 도메인 범위 0~9면 red, 10~19면 green, 21~29면 blue가 자동으로 지정 된다고 생각하시면 이해하는데 편하 실 거에요.

저는 이 함수를 보면서 로또 6개의 구슬이 연상이 되더군요. 45까지의 숫자를 기준으로 이 함수를 사용하게 되면 6개의 색을 range() 범위를 지정하면 알아서 45개의 숫자가 나누어서 domain() 범위를 지정 할 수 있겠군 하고 상상하게 되더군요.

쉽게 설명하자면,

예)

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

<body>
  <script>
    var data = [0,1,2,3,4,5,6,7,8,9,10,11];

        var a = d3.scaleThreshold().domain([1, 10])
                    .range(["red", "green", "blue"]);
                            
    data.forEach(function (d){console.log(a(d)); }); 
        
    console.log(d.invertExtent("red"));
    console.log(d.invertExtent("green"));
    console.log(d.invertExtent("blue"));
  </script>
</body>

[결과]
아래 결과를 보시면 잘 쪼개져 있죠. 참고로 invertExtent()함수로 range()값에 해당되는 domain()값을 반환합니다. 어떻게 domain() 범위가 나뉘어 졌는지 확인 하실 수 있겠죠.

4. d3.scaleQuantile() 함수

scaleQuantize()와 유사한 동작을 수행 합니다. 이 함수는 그냥 간단히 예제로 살펴보도록 하죠.

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

<body>
  <script>
    var data = [0,1,2,3,4,5,6,7,8,9,10];

    var a = d3.scaleQuantile()
                     .domain([0, 10])
                     .range(["red", "green", "blue"]);                      
    data.forEach(function (d){console.log(a(d));}); 

    console.log(a.invertExtent("red"));
    console.log(a.invertExtent("green"));
    console.log(a.invertExtent("blue"));
  </script>
</body>

[결과]
scaleQuantize()와 같은 동일한 결과를 얻었습니다.

scaleQuantize()와 scaleQuantile() 차이점

scaleQuantile(), scaleQuantize() 이 두함수는 철자도 비슷하고 얼핏보면은 같은 함수라고 혼동할 정도로 참 닮았고 동작 또한 같아서 처음에 애먹은 함수입니다.

  d3.scaleQuantile().domain([0, 30, 50])
           .range(["red", "green", "blue"]);
 
  d3.scaleQuantize().domain([0, 30, 50])
          .range(["red", "green", "blue"]);

이렇게 주어졌을 때 결과를 보시면 다음과 같습니다.

예)

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

<body>
  <script>
    var data = [0,1,2,3,4,5,6,7,8,9,10];

    var a = d3.scaleQuantile().domain([0, 30, 50])
           .range(["red", "green", "blue"]);
 
    var b =  d3.scaleQuantize().domain([0, 30, 50])
          .range(["red", "green", "blue"]);;                        

    data.forEach(function (d){console.log(a(d));}); 
    console.log(a.invertExtent("red"));
    console.log(a.invertExtent("green"));
    console.log(a.invertExtent("blue"));

    data.forEach(function (d){console.log(b(d));}); 
    console.log(b.invertExtent("red"));
    console.log(b.invertExtent("green"));
    console.log(b.invertExtent("blue"));
  </script>
</body>

[결과]
invertExtent() 결과를 살펴보시면 확실히 차이점을 느끼 실 수 있을거에요.

즉, scaleQuanitle()함수는 0~30 범위를 고정해서 range()반환 갯수를 맞게 정의되지만, scaleQuantize()은 range() 반환 갯수에서 새롭게 추가된 50인 domain값에 맞게 재정의 된다는 차이점을 가지고 있습니다.

마무리

오늘 실험한 함수들은 scaleThreshold(), scaleOrdinal(), scaleQuantize(), scaleQuantile() 함수들에 대해 간단히 정리했습니다. 계속 관련 Scale함수들을 실험하면서 도대체 이 많은 함수들을 정확히 어떤 상황에 써야 할지 저도 좀 막막하긴 하네요. 나중에 예제들을 분석하면서 사용 방법을 터득해야 겠네요.

[D3.js] scaleLinear 함수

!@!~#!@!# — Tue, 19 Nov 2019 09:00:00 +0900

[D3.js] scaleLinear 함수

참고 : [D3.js] Scale 함수 사용

scale 관련 함수들이 D3.js에 보시면 다양한 함수들이 나와 있습니다. 그중에서도 대표적인 함수가 scaleLinear 함수이고 위 참고 링크 예제를 보시면 scaleLinear 함수를 사용하여 Scale를 설정하는 방법이 나와 있습니다. 오늘은 이 scaleLinear 함수에 대해서 간단히 살펴보고 이 함수와 유사한 scalePow, scaleLog 함수에 대해서도 살펴 보도록 하죠.

1. scaleLinear 함수

수학식 : y= mx + b
D3코딩 : d3.scaleLinear()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Linear = d3.scaleLinear().domain([1, 10]) //y = mx + b
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Linear(d)); });

[결과]

이미지 형태로 살펴보면,

2. scaleLinear와 유사한 함수들

(1) scalePow() 함수

수학식 : y = mx^k + b
D3코딩 : d3.scalePow()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Pow = d3.scalePow().domain([1, 10]) // y = mx^k + b
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Pow(d)); });

[결과]

이미지 형태로 살펴보면,

(2) scaleLog () 함수

수학식 : y = m log(x) + b
D3코딩 : d3.scaleLog()

예)

    var data = [1,2,3,4,5,6,7,8,9,10];

    var scale_Log = d3.scaleLog().domain([1, 10]) //y = m log(x) + b*
              .range([0, 100])
                            
    data.forEach(function (d){console.log(scale_Log(d)); });

[결과]

이미지 형태로 살펴보면,

마무리

오늘 실험한 함수들은 scaleLinear(), scalePow(), scaleLog() 함수들에 대해 간단히 실험을 하였습니다. 각 함수들은 어떤 수학식을 가지고 있는지를 잘 정리하고 나중에 적절하게 사용해 봐야 겠네요. 아직은 이 세 함수에 대해 정확히 어떤 상황에서 각 함수들을 사용하는지 약간 애매 합니다. 그래도 대충 그림으로 살펴보면 각 선이 어떤식으로 그려지는지 시각적으로 어느정도 구분하여 이해 할 수 있었네요. 약간은 Linear과 Pow가 비슷한 선이 그려졌고 위 실험에서는 차이점을 시각적으로 보여지지 않았서 약간 애매한 부분이 있고 Log는 차이나게 그려져서 확실히 구분 할 수 있었습니다.

아직은 어디에 어느 함수인지는 많은 예제들을 살펴보면서 사용방법을 정리해야 겠네요.

[D3.js] 데이터 배열 다룰 때 유용함 함수

!@!~#!@!# — Mon, 18 Nov 2019 09:00:00 +0900

[D3.js] 데이터 배열 다룰 때 유용함 함수

예전에 제 블로그에 정리했던 배열 함수들인데 이번 D3.js를 정리하면서 다시 스팀 블록에 연재해볼까 합니다. 데이터를 다룰 때 사용되는 기본 함수들인데 알아 두시면 나중에 유용하게 쓸 수 있을 거라 생각 됩니다. 지난시간에 max()함수를 이용하여 읽어 온 데이터 중 가장 큰수를 찾아 낼 수 있었습니다. 이렇게 쉽게 큰수면 max()함수 작은수면 min()함수를 사용하여 원하는 결과를 쉽게 얻을 수 있습니다.

1. 실험 데이터

데이터를 다룰 때 유용한 함수들을 실험하는게 목적임으로 외부에서 데이터를 읽어오는 방식으로 실험하지 않고 간단히 데이터를 선언하여 실험을 하도록 하겠습니다.

var data = [1,2,5,6,7];

2. 배열을 다루는 유용한 함수

실험 할 함수는 min(), max(), extent(), sum(), mean(), median(), quantile(), variance(), deviation() 함수들입니다.

코딩은 아래와 같이 각각 변수를 선언하여 위에 선언된 배열데이터(data) 값을 기준으로 원하는 값을 찾게 됩니다.

    var min = d3.min(data); //최소
    var max = d3.max(data); //최대
    var extent = d3.extent(data); //[최소,최대]
    var sum = d3.sum(data); //합
    var mean = d3.mean(data); //산술평균치
    var median = d3.median(data); //배열위치의 중앙값
    var quantile1 = d3.quantile(data,0); //배열첫번째값
    var quantile2 = d3.quantile(data,1); //배열끝값
    var quantile3 = d3.quantile(data,0.15); //분위수(표본전체도수를 등분하여 등분값)
    var variance = d3.variance (data); //분산
    var deviation = d3.deviation(data); //표준편차

3. 코딩

이 부분은 다행이 V5 버전에서는 변동 사항이 없는 것 같네요. 정상적으로 결과가 나오네요.

[소스]

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

<body>
  <script>
    var data = [1,2,5,6,7];
    var min = d3.min(data); //최소
    var max = d3.max(data); //최대
    var extent = d3.extent(data); //[최소,최대]
    var sum = d3.sum(data); //합
    var mean = d3.mean(data); //산술평균치
    var median = d3.median(data); //배열위치의 중앙값
    var quantile1 = d3.quantile(data,0); //배열첫번째값
    var quantile2 = d3.quantile(data,1); //배열끝값
    var quantile3 = d3.quantile(data,0.15); //분위수(표본전체도수를 등분하여 등분값)
    var variance = d3.variance (data); //분산
    var deviation = d3.deviation(data); //표준편차

    console.log("min : " + min);
    console.log("max : " + max);
    console.log("extent : " + extent);
    console.log("sum : " + sum);
    console.log("mean : " + mean);
    console.log("median : " + median);
    console.log("quantile1 : " + quantile1);
    console.log("quantile2 : " + quantile2);
    console.log("quantile3 : " + quantile3);
    console.log("variance : " + variance);
    console.log("deviation : " + deviation);
  </script>
</body>

[결과]

data = [1,2,5,6,7];

위 데이터를 기준으로 각 함수들의 결과가 어떻게 나왔는지 아래 결과 이미지를 보시고 이해해 주시기 바랍니다.

마무리

오늘 실험한 각 함수들은 결과 값을 보시고 각 함수가 어떤 결과를 만들어 내는지 위 결과 이미지를 보고 확인하시면 쉽게 이해 할 수 있을 거에요. 데이터 값을 여러분들이 직접 다른 데이터를 만들어 놓고 결과를 비교 분석 해보세요. 아니면 지난 시간에 데이터 파일을 읽는 법에서 사용한 몇가지 데이터 파일 형식 중 하나를 선택하여 외부 데이터 파일을 만들고 한번 읽어와서 오늘 실험한 함수들에 적용해 보세요.

오늘 다룬 내용은 데이터 시각화 하는데 어떻게 활용 되는지 잘 연상이 안되실 수 있습니다. 지난 시간에 Scale() 함수 예제에서 크기의 범위에서 최소, 최대값을 사용할 때 max() 함수를 사용했었는데 기억하실 지 모르겠네요. 우선은 위 함수들을 간단히 이런 함수들이 있구나 정도로 이해하시고 나서 나중에 D3.js 사이트의 있는 다양한 예제들 보시고 코딩 속의 있는 오늘 실험한 함수들을 찾아 보시고 어떻게 사용하는지 분석해보시면 재미있을 거에요.

[D3.js] Scale 함수 사용

!@!~#!@!# — Fri, 15 Nov 2019 09:00:00 +0900

[D3.js] Scale 함수 사용

D3.js 공식 홈페이지 : https://d3js.org
참고 : [D3.js] CSV, TSV, JSON, XML 시각화

지난시간에 이여 CSV 데이터 파일을 읽어 Circle 모양으로 시각화 코딩을 했었습니다. 단순히 좌표(X,Y) 데이터 값을 통해 캔버스 위치에 Circle을 그리는 명령만 내렸는데 이제 좀 더 디테일적으로 Circle의 Scale을 적용해 보는 시간을 갖도록 합시다. 이 내용은 예전에 v4 번전 때 살짝 기초만 공부할 때 정리했던 내용인데 v5로 다시 정리를 해보네요.

1. CSV 데이터 파일

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

[data.csv] : 데이터 간격은 콤마(,) 입니다.(반지름 r를 추가)

x,y,r
50,50,1
100,150,3
150,50,5
200,150,7
250,50,9

2. Scale 함수 사용

[기존 소스]

<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>

위 소스를 보면 attr()함수 내에 r이라는 속성이 있는데 이것이 바로 반지름입니다. 이 반지름 값은 지난시간까지 10으로 고정시켰는데 이제는 크기를 조절하여 시각화를 하고자 합니다.

d3.scaleLinear() 함수를 이용하여 크기를 자동으로 조절 하여 볼까요.

 d3.scaleLinear()
      .domain([참조최소값, 참조최대값])
      .range([출력최소값, 출력최대값]);

위 코딩은 기본 틀로 숙지해주시는 것이 좋습니다. 갑자기 아두이노 생각이 나네요. 아두이노에서 사용하는 map()함수와 유사하네요.

map(입력값,참조최소값,참조최대값,출력최소값,출력최대값)

사설은 접고 위 기본구조는 domain(참조범위)이고 range(반환범위)로 이해하시면 되겠습니다.

**예) **

var scale = d3.scaleLinear().domain([0, 10]).range([0, 100]);

위와 같이 지정하면,

scale(1) => 10이 반환.
scale(5) => 50이 반환
scale(10) => 100이 반환

그러면 실제 그렇게 나오는지 살펴 볼까요.

[소스]

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

<body>
 <script>
 
  var Scale = d3.scaleLinear().domain([0,10]).range([0,100]);

  console.log(Scale(1));
  console.log(Scale(5));
  console.log(Scale(10));

 </script>
</body>

[결과]

결과가 정상적으로 출력 되었습니다. 어떤 느낌인지 아시겠지요. 이 Scale 함수를 이용하여 Circle의 크기를 자동으로 조절하게 하면 데이터 시각화가 좀 더 그럴싸하게 표현 되겠죠.

3. 기존 소스에서 Scale함수를 적용하여 표현

    //데이터 출력
    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")
    }

기존 소스에서 수정할 부부는 위 데이터 출력 부분입니다. 경계를 나누어 코딩을 하니깐 어디를 수정해야 할지 쉽게 찾을 수 있게 되었죠.

수정 부분은 다음과 같습니다.

.attr("r",10) //반지름
.attr("fill","red") //원색

반지름 10이라고 기존에 고정했는데 Scale 함수를 이용하여 데이터 크기를 조절하겠습니다 그리고 고정 Red 색을 Color로 범위를 점해서 데이터 값에 따라서 Color를 지정해 봅시다.

위 Scale 기본구조에 맞게 한번 지정해 보았습니다.

var rScale = d3.scaleLinear()
                     .domain([0,10])
                     .range([0,50]);

데이터 참조범위는 0~10사이로 잡아놓고 반환 범위는 0~50사이로 해서 반지름의 크기를 조정했습니다. 데이터 값이 너무 클수도 있고 찾을 수도 있습니다. 그렇게 되면 캔버스 영역을 벗어나거나 너무 작게 Circle이 그려질 수 있기 때문에 캔버스의 영역에 맞게 데이터 전체의 Scale를 조절하기 위해서 위와 같이 코딩합니다.

다시, 3줄로 코딩을 나열하는게 좀 보기가 그러니깐 한줄로 표현해보죠. 추가로 Color도 동일하게 지정해 보겠습니다.

var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);
var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);

이렇게 해서 Circle의 반지름과 Color를 만들어 놓았습니다. 이제는 참조 데이터 값에 맞게 반환 range()값만 가져와서 실제 캔버스에 그려주면 됩니다.

출력 데이터 값들을 순차적으로 Circle의 r, fill의 값을 지정하여 캔버스에 그리면 됩니다.

.attr("r",function(d){return rScale(d.r);})
.attr("fill",function(d){return ColorScale(d.r);});

종합해보면,
[소스]

<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
  <script>
    var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);
    var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);

    //배경
    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",function(d){return rScale(d.r);})
             .attr("fill",function(d){return ColorScale(d.r);});
    }
        
    //데이터 읽기
    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>

[결과]

위 그림처럼 좀 더 그럴싸하게 데이터가 시각화 된 모습을 보실 수 있죠.

여기서, 여러분들은 먼가 아쉬운 점을 찾아야 합니다. 그 아쉬움은 뭘까요. 바로 domain()함수에 있습니다. 자세히 살펴보시면 참조 범위가 0~10사이로 고정되어 있습니다. 데이터를 시각화하는데 참조 데이터를 고정된 값의 범위로 묶어 둔다는 것은 좀 그렇죠. 만약 데이터가 20일 때는 프로그램 소스에 가셔서 직접 해당 위치의 값을 수정해야 합니다.

자연스럽게 참조값의 범위를 읽어 온 데이터 값에 따라 맞춰서 표현하고 싶을 때 그부분을 코딩에 담아 낸다면 좀 더 멋지겠죠.

다음은 그 부분에 대해 이야기 하겠습니다.

4. d3.max 함수로 참조 데이터 범위를 지정

D3.js 함수에는 min(), max()함수가 있습니다. 오늘 사용할 함수는 max()함수 입니다. 사용법은 동일하니깐 max() 사용법을 잘 보시고 나중에 최소값 사용할 일이 있으면 max 대신에 min으로 수정하세요.

그럼 d3.max( ) 함수를 사용해 볼까요.

var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);

위 코딩이 있다면 domain([0,10])함수의 0~10사이의 참조범위를 지정할 때 이때 max값 10을 읽어 올 데이터의 최대값으로 지정해 봅시다.

예) 위의 data.csv 파일에 반지름은 r에 들어 있습니다. 그러면 다음과 같이 코딩하여 max값을 찾아 냅니다.

[소스]

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

    //데이터 읽기
    d3.csv("data.csv",type).then(function(data){
      var max_r = d3.max(data, function(d) { return d.r; });
      console.log(max_r);
    });

    //데이터 타입
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>
</body>

[결과]

보시는 것과 같이 읽어 온 데이터 값 중의 최대값이 9가 나왔네요. 이렇게 해서 최대값을 캔버스의 나타낼 수 있는 최대값 범위가 되었네요.

최대값을 Scale 함수에 지정

 var rScale ;
 var max_r = d3.max(data, function(d) { return d.r; });
 
 rScale = d3.scaleLinear().domain([0,max_r]).range([0,50]);

위 코딩은 대충 의미를 아시겠지요.

종합해보면,

[소스]

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

<body>
 <script>

   var rScale ;
   var ColorScale ;
   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",function(d){return rScale(d.r);})
            .attr("fill",function(d){return ColorScale(d.r);});
   }

   d3.csv("data.csv",type).then(function(data){
        var max_r = d3.max(data, function(d) { return d.r; });
        rScale = d3.scaleLinear().domain([0,max_r]).range([0,50]);
        ColorScale = d3.scaleLinear().domain([0,max_r]).range(["red","blue"]);
        render(data);
   });

   function type(d){
     d.x=+d.x;  //parseFloat(d.x);
     d.y=+d.y;  //parseFloat(d.y);
     return d;
   }
 </script>
</body>

[결과]

아래와 같이 결과를 얻었습니다. 그런데 별 차이가 없어 보일 꺼에요. 그 이유는 기존 data.csv 파일을 사용했기 때문입니다.

마무리

CSV 데이터 파일을 시각화 할때 Scale 함수를 사용하는 방법을 살펴 보았습니다. 하다보니 꽤 내용이 길어졌는데 간단히 정리하면 딱 두줄 입니다.

var rScale = d3.scaleLinear().domain([0,10]).range([0,50]);
var ColorScale = d3.scaleLinear().domain([0,10]).range(["red","blue"]);

이걸 배우기 위해서 내용을 정리가 좀 안되고 길게 쓰게 되었네요. 한번 간단히 읽어보는 기분으로 보시고 방금 이야기한 이 두줄의 의미만 정확히 이해하시면 됩니다.

[출력]

rScale(데이터)
ColorScale(데이터)

이렇게 해서 D3.js를 이용하여 캔버스 크기에 맞게 자동으로 크기를 조절할 수 있게 되었습니다.

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

!@!~#!@!# — Thu, 14 Nov 2019 09:00:00 +0900

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

D3.js 공식 홈페이지 : https://d3js.org
참고 : [D3.js] CSV, TSV, JSON, XML 시각화

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

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

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