D3js 常用資料處理API - d3.scale

用途

d3.scale就是比例尺的概念！下面來個常見的例子。今天下載一部影片1.64GB，目前下載640MB，但常見的Chrome會轉給我們百分比3.9%，其實Scale就是協助我們快速計算出對應的比例位置。

搭配extent

前面說到要能產生出比例尺，其實很明顯知道，我們需要影片總大小，當然這範例的最小值就是0，並用目前下載量算出對應的%數。因此昨天的d3.extentr就有幫助了！

範例：

const downloadScale = d3.scaleLinear()
    .domain([640, 16400])
    .range([0, 100]);
    
console.log(downloadScale(640)) // 3.902439024390244

目前還大部分值都是固定的狀況，但如果是動態資料列需要算出對應的值時，就會需要d3.extent

scaleLinear

最常用的線性Scale，如果未設定Range，會以最小為0，最大為1，也就是會算出0-1的值。

未設Range：

const myScale = d3.scaleLinear()
                .domain([100, 0]);
                
console.log('myScale', myScale(0));
// Output: 1
console.log('myScale', myScale(100));
// Output: 0
console.log('myScale', myScale(30));
// Output: 0.7

有設Range:

const myScale = d3.scaleLinear()
                .domain([100, 0])
                .range([0, 1024])
                
console.log('myScale', myScale(0));
// Output: 1024
console.log('myScale', myScale(100));
// Output: 0
console.log('myScale', myScale(30));
// Output: 716.8

scaleTime

對時間的計算非常好用，比如：要計算從今年開始到今天，已經過了今年的幾%，這種對於日期的計算，非常方便。當然算圖上位置也是如此。

const startDate = new Date('2020/01/01 00:00')
const endDate = new Date('2020/12/31 24:00')

const myScaleTime = d3.scaleTime()
  .domain([startDate, endDate])
  .range([0, 1024]);

console.log(myScaleTime(new Date('2020/09/21 10:00')));
// Output: 739.7887067395264

scalePoint

常用來計算某些種類，不能被分割或組合的資料。目前看以下範例是有四種種類，分別要對應算出ball在0-100之中是位於哪個位置。

這用途也就是在有時候圖表並非只有時間區間，可能是員工的績效、產品的銷量，也是需要對應整張圖表的寬度算出對應的位置，這樣在增加資料時，就可以輕易算出對應資料的位置。

而ScalePoint正是計算點的位置，也就是四個點散在0-100之間，且頭尾散在0, 100，因此中間有三個空個區間，也就是100/3大約也就是33.33333, ball位於第二，正是33.33333。

const stuffs = ['apple', 'ball', 'cat', 'dog'];
const myScalePoint = d3.scalePoint()
            .domain(stuffs)
            .range([0, 100]);
console.log(myScalePoint('ball'))
// 33.33333

scaleBand

非常類似scalePoint，但scaleBand是計算段的位置，也就是計算四筆資料分成四區段的位置。

如下範例所示，這四筆資料會被分成四段，並計算出對應位置，四筆資料在0-100區間中，每一段可以分成25，此區段寬度可以透過myScaleBand.bandwidth()算出，透過這兩個值，我們便可輕鬆畫出這區段的圖，比如cat就是位於75，且區段寬為25。

const stuffs = ['apple', 'ball', 'cat', 'dog'];
const myScaleBand = d3.scaleBand()
            .domain(stuffs)
            .range([0, 100]);
console.log(myScaleBand('ball'))
// 25

console.log(myScaleBand.bandwidth())
// 25

scalePoint、scaleBand

scalePoint

以下範例，紅色的點就是透過scalePoint計算出來的位置，看的出來就是計算四個點的位置。

scaleBand

以下範例，紅色的直線就是透過scaleBand計算出來的位置，看的出來就是計算四個區段的位置，藍色區塊則是該區段的範圍。

範例連結 Codepen

結論

d3.scale可以說是D3的靈魂，還有很多關於scale的API，指數對數等等的計算，讓我們非常方便實作各種圖表，隨心所欲！

參考連結

observablehq d3-scaletime
observablehq continuous-scales