比例尺 Scale

D3.js Scale 比例尺分類

按照輸入域與輸出域的資料來分類，比例尺可以被歸納為三大類

「連續性資料輸入」與「連續性資料輸出」的比例尺

連續性比例尺 Continuous Scale

d3.scaleLinear

程式碼

                    
                      // JS
                      let linearScale = d3.scaleLinear()
                                          .domain([0, 100])
                                          .range([0, 50]);
                
                      linearScale(0);   // return 0
                      linearScale(50);   // returns 25
                      linearScale(100);  // returns 50

                    
                      const colorScale = d3.scaleLinear()
                                            .domain([0, 10])
                                            .range(['yellow', 'red']);

                      colorScale(0);   // returns "rgb(255, 255, 0)"
                      colorScale(5);   // returns "rgb(255, 128, 0)"
                      colorScale(10);  // returns "rgb(255, 0, 0)"

d3.scaleTime

程式碼

                    
                      // JS
                      const timeScale = d3.scaleTime()
                                      .domain([new Date(2023, 0, 1), new Date(2023, 11, 1)])
                                      .range([0, 100]);

                      timeScale(new Date(2023, 0, 1));   // returns 0
                      timeScale(new Date(2023, 6, 1));   // returns 45.209...
                      timeScale(new Date(2023, 11, 1));   // returns 100

continuous.clamp

程式碼

                    
                      // JS
                      const linearScaleClamp = d3.scaleLinear()
                                                .domain([0, 10])
                                                .range([0, 100])
                                                .clamp(true) // 斬斷鎖鏈～

                      linearScaleClamp(20);  // returns 100
                      linearScaleClamp(-10); // returns 0

continuous.nice

程式碼

                    
                      // JS
                      const data = [0.243, 0.584, 0.987, 0.153, 0.433];
                      const xAxis = d3.scaleLinear()
                                      .domain(d3.extent(data))
                                      .range([0, 100])
                                      .nice();

continuous.invert

程式碼

                    
                      // JS
                      const linearScale = d3.scaleLinear()
                                            .domain([0, 10])
                                            .range([0, 100]);

                      linearScale.invert(50);   // return 5
                      linearScale.invert(100);  // return 10

序列比例尺 Sequential Scale

d3.scaleSequential()

程式碼

                  
                    // JS
                    const sequentialScale = d3.scaleSequential()
                                              .domain([0, 100])
                                              .interpolator(d3.interpolateRainbow);
                                              
                    sequentialScale(0);   // return 'rgb(110, 64, 170)'
                    sequentialScale(50);  // return 'rgb(175, 240, 91)'
                    sequentialScale(100); // return 'rgb(110, 64, 170)'

發散比例尺 Diverging Scale

d3.scaleDiverging()

程式碼

                  
                    // JS
                    const scaleAnomalyPuOr = d3.scaleDiverging()
                                              .domain([-10, 0, 10])
                                              .interpolator(d3.interpolatePuOr)

                    scaleAnomalyPuOr(-10); //rgb(45, 0, 75) 深紫色
                    scaleAnomalyPuOr(10); //rgb(127, 59, 8) 橘色

「連續性資料輸入」與「離散性資料輸出」的比例尺

量化比例尺 Quantize Scale

d3.scaleQuantize

程式碼

                    
                      // JS
                      const quantizeScale = d3.scaleQuantize()
                                        .domain([0, 100])
                                        .range(['lightblue', 'orange', 'lightgreen', 'red']);
                     
                      quantizeScale(10);  // return 'lightblue'
                      quantizeScale(30);  // return 'orange'
                      quantizeScale(73);  // return 'lightgreen'
                      quantizeScale(90);  // return 'red'

「離散性資料輸入」與「離散性資料輸出」的比例尺

次序/序位比例尺 Ordinal Scale

d3.scaleOrdinal

程式碼

                    
                      // JS
                      const ordinalData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

                      const ordinalScale = d3.scaleOrdinal()
                                            .domain(ordinalData)
                                            .range(['black', 'red', 'green']);

                      ordinalScale('Monday');  // return 'black';

                      ordinalScale('Jan');  // return 'black';
                      ordinalScale('Feb');  // return 'red';
                      ordinalScale('Mar');  // return 'green';
                      ordinalScale('Apr');  // return 'black'; 從頭重複算一次

d3.scaleBand

程式碼

                    
                      // JS
                      const bandScale = d3.scaleBand()
                                          .domain(['狗', '貓', '天竺鼠', '烏龜', '海豚'])
                                          .range([0, 200]); // SVG 寬度

                      bandScale('狗'); // returns 0
                      bandScale('貓'); // returns 40
                      bandScale('海豚'); // returns 160

d3.scalePoint

程式碼

                    
                      // point scale
                      const pointScale = d3.scalePoint()
                                        .domain(['狗', '貓', '天竺鼠', '烏龜', '海豚'])
                                        .range([0, 200])
                                        .padding(3)
                      
                      pointScale.step();  // return 50
                
                      pointScale('狗');  // returns 0
                      pointScale('貓');  // returns 50
                      pointScale('海豚');  // returns 200

比例尺 Scales

輸入域與輸出域 Domain ＆ Range

D3.js Scale 比例尺分類