수치형 값을 다른 범위의 수치형 값으로 매핑하는걸 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
함수의 동작은 시각화할 데이터의 대상이 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