'D3.js'에 해당되는 글 4건

Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize]

D3.js 2019. 2. 12. 16:05


Quantize Scales

정보 이론에서 양자화(Quantize)는 아날로그 데이터, 즉 연속적인 값을 디지털 데이터, 즉 띄엄띄엄한 값으로 바꾸어 근사하는 과정을 뜻한다. d3에서 scaleQuzntize() domain()범위를 range값에 맞춰서 자동으로 domain범위를 나눠서 분류한다. 

예제를 통해서 이해를 해보도록하자.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var quantizeData = [1, 15, 26, 48, 51, 57, 63, 79, 82, 99];
var outputRange = ["red", "green", "deeppink", "blue", "yellow"]
var quantizeScale = d3.scaleQuantize()
                      .domain([0, 100])
                      .range(outputRange);
var svg = d3.select("body").append("svg")
            .attr("width", 500).attr("height", 200)
            .style("background", "pink");
 
var circles = svg.selectAll("circle").data(quantizeData);
circles.enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 40)
        .style("fill", function(d){return quantizeScale(d);});
 
 
cs


range값에 "red", "green", "deeppink", "blue", "yellow" 라는 5사지 색을 지정하였으며 , domain 범위는 0~100상이다.

0~100 범위안에 도메인값이 5가지 컬러값에 고정되서 출력된다. 


red : 0~19

green :  20 ~39

deeppink : 40~59

blue : 60~79

yellow : 80~100






1
var quantizeData = [1, 22, 26, 39, 51, 57, 63, 79, 82, 99];
cs






Quantile Scale

quantile scale의 목적은 데이터 세트의 값의 실제 분포를 나타내는 클래스를 얻는 것이다. 따라서 건설 중에 값의 전체 목록을 제공해야합니다. 그런 다음 입력 도메인 (이 값으로 정의)을 간격 (퀀 타이들)으로 분할하여 거의 동일한 수의 값이 각 간격에 속하도록합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var quantizeData = [1, 22, 20, 39, 51, 57, 63, 79, 82, 99];
 
var outputRange = ["red", "green", "deeppink", "blue", "yellow"]
var quantizeScale = d3.scaleQuantize()
                      .domain([0,30,60])
                      .range(outputRange);
 
// 추가 
var quntileScale = d3.scaleQuantile()
                     .domain([0,30,60])
                     .range(outputRange);
 
 
var svg = d3.select("body").append("svg")
            .attr("width", 500).attr("height", 200)
            .style("background", "pink");
 
var circles = svg.selectAll("circle");
circles.data(quantizeData).enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 40)
        .style("fill", function(d){return quantizeScale(d);});
 
 
circles.data(quantizeData).enter().append("circle")
        .attr("r", 20)
        .attr("cx", function(d,i){return (i+1)*45;})
        .attr("cy", 100)
        .style("fill", function(d){return quntileScale(d);});

cs





quantile scale와 quantize scale은 동작방식의 비슷하다. 위의 예제에서 domain 영역값을 [0,30]으로 만 정했을경우

결과값은 동일하게 동작한다. domain영역에 60을 추가한 상태로 코드를 실행한결과 위와 같이 컬러의 색분포도가 다르게 나타난다.

domain 값이 [0, 30, 60] 인데, quantile scale 인경우는  1, 22, 20 39 에 각각 red, green, blue값이 표시가되나  quantize scale 에 경우는 domain 값이 1, 22, 20 값을 제외한 나머지 값을 yellow 컬러에 맵핑을 하게 끔나타납니다. domain 값에서 30, 60이어서 30을 넘어가는 나머지숫자를 모두 Yellow로 맵핑되었습니다.




참고 : http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e

저작자표시

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

D3 LineScale  (0) 2019.02.08
d3 중요문법 정리  (0) 2019.02.06
SVG 정리  (0) 2019.02.06
블로그 이미지

클라인STR

,

D3 LineScale

D3.js 2019. 2. 8. 15:36

수치형 값을 다른 범위의 수치형 값으로 매핑하는걸 scale이라고 한다.

d3의 scale은 입력영역을(domain) 출력 범위(range)에 매핑한다.  기존의 간격을 새로운 간격으로 변환한다. 

D3.js scale은 함수이기 때문에 하나의 입력 도메인의 출력 범위에 매핑 할 수있을뿐만 아니라 함수는 도메인의 숫자를 범위의 출력으로 변환할 수 있다. 



입력데이터가 0~10,000 사이의 숫자인경우 이 값을 0~100 사이의 숫자 간격으로 변환하고 싶다고 가정하자.


1.원래 간격의 가장 큰 숫자가 무엇인지 알아냅니다 (-> 10000).

2.원래 간격의 가장 작은 숫자가 무엇인지 알아냅니다 (-> 0).

3.원래의 두 간격 수 (-> 10000 - 0 = 10000)의 차이를 계산합니다.

4.새 간격에서 가장 큰 숫자가 무엇인지 알아냅니다 (-> 100).

5.새로운 간격에서 가장 작은 숫자가 무엇인지 알아 낸다 (-> 0)

6.두 개의 새 간격 수 (-> 100 - 0 = 100)의 차이를 계산합니다.

7.새 간격 차이 (-> 10000 / 100 = 100)와 원래 간격 차이

8.이는 원래 간격의 100 단위가 새 간격의 1 단위와 같음을 나타냅니다.

9.이것을 선형 스케일링이라고합니다 (y = mx + b, 여기서 b = 0 및 m = 1/100)

10 이 예에서 x = 10000이면 100으로 나눠 y = 100이됩니다.



D3.js Scale Linear

d3.js는 d3.js 스케일 선형 함수를 사용하여 자동으로 scale작업을 수행한다. 

d3.scaleLinear()
.domain([최소값, 최대값])
.range([최소값, 최대값])

함수의 동작은 시각화할 데이터의 대상이 domain() 이고, 반환되는 값이 range()이다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var numbers = [3100, 250, 35, 1800, 90, 140];
        var width = 600;
        var height = 500;
        var myScale = d3.scaleLinear()
                        .domain([0, 3100])
                        .range([0, 500]);
        for(var i= 0;i <numbers.length;i++)
            {
                console.log(numbers[i] + " : " + myScale(numbers[i]));
            }
        var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .style("background", "pink");
        var rectangles = svg.selectAll("rect").data(numbers);
        rectangles.enter().append("rect")
                    .attr("width", 25)
                    .attr("height", function(d, i){return myScale(d);})
                    .attr("x", function(d,i){return (i*28);})
                    .attr("y", function(d,i){return height - (myScale(d));})
                    .style("fill", "indigo");

cs

numbers 배열에  해당하는 sclale 값에 변화는 아래와 같다. 


3100 : 500

250 : 40.32258064516129

35 : 5.64516129032258

1800 : 290.32258064516134

90 : 14.516129032258066

140 : 22.58064516129032

[Scale 적용결과 ]


1
2
3
4
var numbers = [31, 25, 35, 18, 90, 14];
var myScale = d3.scaleLinear()
                        .domain([0, 90])
                        .range([0, 100]);
cs

데이터 범위를 변경해서 실행해보았습니다. numbers 배열에 값은 14~90 범위내에 숫자로 변경하였습니다. 

domain 값을 0,90 range 값을 0,100으로 설정한 후 실행한다.


[range 값을 0,100으로 실행한경우]


1
2
3
4
var numbers = [31, 25, 35, 18, 90, 14];
var myScale = d3.scaleLinear()
                        .domain([0, 90])
                        .range([0, 100]);
cs


[range 값을 0, 1000 으로 변경한경우 ]

저작자표시

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

Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize]  (0) 2019.02.12
d3 중요문법 정리  (0) 2019.02.06
SVG 정리  (0) 2019.02.06
블로그 이미지

클라인STR

,

d3 중요문법 정리

D3.js 2019. 2. 6. 23:48

d3js 란?


  • 정해진 그래프 유형이 없음
  • 데이터를 DOCUMENT 표현하기 위한 기능을 제공(좌표, 연산, 색, 레이아웃등)
  • 제공 기능과 데이터를 사용하여 기본 그래프 표현
  • 개발자 프로그램으로 그래프 수정 및 추가
  • Data Driven Document


Selections

  • d3 현재문서에서 가져온 문서요소 집합을 selection이라고 한다. 
  • 문서요소를 selection 한 후에 연산자(operator)를 적용할 수 있다. attr, styles,properties, html, text 지정할 수 있다.
  • seletion 한 뒤에 data와 연결할 뒤에 데이터 중심으로 조작할 수 있다.
  • d3는 메서드 체이닝을 지원한다. 이를 이용하여 연산자 적용할 때 표현을 간결하게 할 수 있다.



d3.select()

  • document.querySelector() 와 같은 기능
  • method chain을 할수 있도록 d3 인스턴스를 반환한다.
  • 단일 문서요소를 선택해서 반환한다. 셀렉터와 일치하는 문서가 여러개 일경우 첫번째로 일치하는 문서요소를 선택한다.
  • 파라메터에 엘리먼트를 직접 지정할 수 있다.

d3.selectAll
  • document.querySelectorAll()와 같은 기능 
  • method chain을 할수 있도록 d3 인스턴스를 반환한다.
  • 인자로 지정한 선택자와 일치하는 모든 문서요소를 선택한다. 문서요소는 문서상의 순서대로(위에서 아래로)선택된다.  



selection.selectAll(selector)

  • selector 문자열에 부합하는 자손 문서요소를 모두선택하고 이를 그룹화하여 반환한다.
  • selectAll 사용하여 그룹핑은 추가로 입력될 수 있는 플레이스 홀더에 영향을 준다.  
  • 아래처럼 사용하는경우가 많다. 
1
d3.select("body").selectAll("div")
cs


selection.data([values[, key]])

  • 현재 선택물에 데이터 배열을 연결한다. 데이터가 문서요소에 할당되면 _data_ 프로퍼티에 저장된다.
  • 첫번째 파라메터로 selection 반복에 사용할 배열데이터를 지정한다.
  • 두 번째 파라메터는 함수를 작성할경우 함수의 파라메터로 데이터를 설정할 수 있다.
  • 함수의 인자로는 datum(데이터) d와 인덱스 i를 전달받는다. key 함수가 데이터의 원별로 실행될때, 함수 내에서 this는 데이터 배열이고, key 함수가 존재하는 선택물에 실행될 때는 this는 DOM 관련문서이다. 

selection.enter()
  • selection 안에서 데이터에 부합하는 만큼 DOM요소가 없을때, 각 데이터 원소를 위한 플레이스 홀더 역할을 하는 부족한 선택물에대한 참조를 반한다.
  • data연산자의 반환값에 정의되어 있다. (data().enter()형식으로 사용)
  • enter() 선택자에 대한 참조로 append, insert, select를 사용하여 부족한 부분에 DOM 요소를 추가 할 수 있다. 



Data jon Update & Enter & Exit


data() 연산자를 선택 항목에 적용하여 데이터 항목과 DOM 요소를 서로 조인한다. 결과 선택항목을 update 선택항목이라고 한다. 

데이터가 사용 가능한 DOM 요소보다 많은 경우 잉여 데이터 항목은 입력 선택이라는 선택항목의 하위 집합에 저장된다. 

enter()는 바인드된 데이터들 중에서 아직 실제 문서요소로 가지 못한 것들을 찾아서 가상의 객체로 생성하고 반환한다. 

exit() data에 있는 요소보다 이미 존재하는 DOM요소가 적을 때,  선택받지 못한 요소들을 선택한다. 선택받지 못한 요소들을 remove메서드를 통해서 제거한다. 


d3 version 3에서의 update, enter, exit 예제실습


1
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
cs


1
2
3
4
<p>Chair 1</p>
<p>Chair 2</p>
<p>Chair 3</p>
<p>Chair 4</p>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p{
  background : black;
  color:white;
  font-size:30px;
  width:100px;
  margin:20px;
  padding : 10px;
}
.person
{
   background : indigo;
  color:deeppink;
  font-size:30px;
  width:130px;
  margin:20px;
  padding : 10px;
}
cs


1) No: of Data Points = No: of Elements (Enter Selection)


1
2
3
4
5
var myData = ["Persion 1", "Persion 2","Persion 3","Persion 4"];
 
d3.selectAll("p").data(myData).text(function(d){
  return d;
}).classed("person", true);


cs

문서요소수와 데이터의 갯수가 같으면 update 가 일어난다.


2) No: of Data Points > No: of Elements (Enter Selection)

1
2
3
4
5
6
var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
        var update = d3.selectAll("p").data(myData);
        update.enter().append("p");
        update.text(function(d){return d;}).classed("person", true); 
 
 
cs

데이터의 개수가 문서요소의 수보다 많은경우 enter().append() 패턴으로 앨리먼트를 추가한 예제 

d3 version3에 경우정상적으로 동작하나 d3 version5에 경우 아래와 같이 동작한다. 

[d3 version3 실행결과]

[d3 version5 실행결과]


3) No:of Data Points < No:of Elements (Exit Selection)


1
2
3
4
5
6
var myData = ["Person 1", "Person 2"];
var update = d3.selectAll("p").data(myData);
update.exit().remove();
update.text(function(d){
  return d;
}).classed("person", true);
cs


데이터의 개수가 문서의 요소수보다적은경우 exit().remove() 패턴을 이용하여 앨리먼트를 데이터에 맞개 삭제할 수 있다.

해당코드를 V3, V5버전에 실행후 아래와같이 같은 결과를 도출한다. 


version5 Enter메서드 변경

selection 항목의 요소와 부모는 절대 변경되지 않는다. selection.append 할경우 입력 노드 값을 업데이트 선택 항목에 병합하지 않는다.

데이터 결합후 enter와 update를 결합할려면 selection.merge메서드를 사용해야한다.


1
2
3
4
5
6
7
8
9
10
11
12
var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p");
update.text(function(d){return d;}).classed("person", true); 
// v3
 
 
 
var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p").text(function(d){return d;}).classed("person", true); 
// v5

cs


[아래에 코드를 실행한경우]


1
2
3
4
5
var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p").merge(update).text(function(d){
  return d;
}).classed("person", true);

cs

[enter(), merge()구문을 실행한경우 ]



1
2
3
4
var myData = ["Person 1", "Person 2"];
var update = d3.selectAll("p").data(myData);
update.exit().remove();
update.enter().append("p").merge(update).text(function(d){return d;}).classed("person", true);

cs

[exit,enter,merge 구문을 사용한 예]





참조원문 

Changes in D3 5.0


저작자표시

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

Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize]  (0) 2019.02.12
D3 LineScale  (0) 2019.02.08
SVG 정리  (0) 2019.02.06
블로그 이미지

클라인STR

,

SVG 정리

D3.js 2019. 2. 6. 00:12

SVG란?

확장 가능한 벡터 그래픽(Scalable Vector Graphics), SVG는 그래픽을 마크업하기 위한 W3C XML의 특수언어(diaelct)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.

SVG 렌더링 순서  파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링 된다.

웹브라우저에서 SVG를 사용할경우  version, xmlns, xmlns:xlink 다음속성은 필요하지 않다. 


1
2
3
4
5
6
7
8
<svg 
  version="1.1"
  xmlns=http://www.w3.org/2000/svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="600" height="600"
  viewBox="0 0 600 600">
  ...
</svg>

cs


SVG 위치요소

 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향한다.


SVG픽셀단위 

SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑된다. SVG는 사용자단위(User Unit) 기준으로한다. 별도로 명시하지 않을경우 사용자단위와 화면단위는 1:1 비율로 동작한다. 



SVG기본도형


rect

rect는 사각형을 그린다.

1
2
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

cs



 x

사각형의 좌측상단 x값 

 y

사각형의 좌측상단 y값 

width 

사각형의 폭을 나타낸다.

height

사각형의 넓이를 나타낸다.

 rx

사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다. 

 ry

사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.



Circle

circle 은 화면에 원을 나타낸다.


1
<circle cx="25" cy="75" r="20"/>
cs


cx 

원의 중심 중 x 값을 의미한다.

cy

원의 중심 중 y 값을 의미한다.

 r

원의 반지름



Line

line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

 x1

점 1의 x값

 y1

점 1의 y 값

 x2

점 2의 x 값

 y2

점 2의 y 값


Polyline

연결된 직선들의 그룹이다. 목록들이 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

각 포인트는 X좌표와 Y좌표를 가지고 있어야한다.  포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2" 라고 쓸 수 있다.

1
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
cs


Polygon 다각형

점을 연결하는 직선으로 구성된다는 점에서 polyline과 유사하나, 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

1
<polygon points="200 10, 250 190,160 210"></polygon>
cs


Ellipse 타원

원의 x와 y 반경을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다. 

1
<ellipse cx="75" cy="75" rx="20" ry="5"/>
cs

 

rx 

타원의 x 방향으로의 반지름의 길이를 의미한다.

ry

타원의 y 방향으로의 반지름의 길이를 의미한다.

cx

타원의 중심 중 x 값을 의미한다.

cy

타원의 중심 중 y 값을 의미한다.


기본도형 실습하기  1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
svg
{
  background: pink;
}
line
{
  stroke:red;
  stroke-width:15;
}
rect, circle
{
  stroke:red;
  stroke-width:5;
  stroke-opacity:.7;
  fill:blue;
  fill-opacity:.6;
}
text
{
  fill:green;
  
}
cs


1
2
3
4
5
6
7
<svg width="600" height="600">
  <line x1="0" y1="0" x2="100" y2="100" />
  <rect x="120" y="120" width="100" height="50" />
  <circle cx="350" cy="150" r="50" />
  <ellipse cx="350" cy="350" rx="100" ry="50" />
  <text x="100" y="20">SVG Basics</text>
</svg>

cs








Path 앨리먼트는 SVG 기본 도형 라이브러이에서 가장 강력한 엘리먼트이다. 패스는 여러 개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 패스의 모양은 d 속성 하나로 정의된다. d 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다. d속성의 좌표는 절대 단위가 붙지않는다. 


'Move To(이동하기)' 혹은 'M' 



저작자표시

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

Quantize Scale , Quantile Scale ,[d3.scaleQuantile vs d3.scaleQuantize]  (0) 2019.02.12
D3 LineScale  (0) 2019.02.08
d3 중요문법 정리  (0) 2019.02.06
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

티스토리툴바