Angular 7 D3|D3 Scales|D3| D3 Part11

D3 Scales

Before we start to D3 Scales refer

• D3 Part 1 - SVG Shapes.
• D3 Part 2-  D3 + Angular 7 Integration .
• D3 Part 3-  D3 Data Bound to DOM Elements.
• D3 Part 4-  D3 Creating SVG Elements Based on Data.
• D3 Part 5-  D3 SVG Coordinate Space.
• D3 Part 6-  Data Structures Using D3.
• D3 Part 7-  Dynamic SVG Coordinate Space Using D3.
• D3 Part 8-  Basic D3 Array Utilities.
• D3 Part 9-  SVG Group Element.
• D3 Part 10-  SVG Text Element.

D3 Linear Scales

In this lab,we will cover D3's Scales.Data to fit into our pre-defined SVG Coordinate space. D3 scales provides functions to perform data transformations.map an input  data Domain and output range.simply D3 Scales takes an interval and transform it into new interval.

Here We are going to experiment with below dataset.

// Actual Data with largest values

let Actualdata: number[] =  [0, 100, 1000, 2500, 5000, 7500, 10000, 12500,15000, 17500,20000];

Steps to follow without d3 to find  linear scale

Step 1 : Largest number function

getlargestnumber(data: Array<number>): number {
let largestnum:number;
let indexofdata:number=0
for(indexofdata = 0;  indexofdata<data.length;  indexofdata++ ) {
if (largestnum === undefined) {
   largestnum= data[indexofdata];
}
if (largestnum < data[indexofdata]) {
  largestnum=data[indexofdata];
}
}
return largestnum;
}

Step 2  : Smallest number function

getsmallestnumber(data: Array<number>): number {
let smallestnum:number;
let indexofdata:number=0
for(indexofdata = 0;  indexofdata<data.length;  indexofdata++ ) {
if (smallestnum === undefined) {
smallestnum= data[indexofdata];
}
if (smallestnum > data[indexofdata]) {
smallestnum=data[indexofdata];
}
}
return smallestnum;
} 

Step 3 : find the largest number 

let largestnum:number;
largestnum=this.getlargestnumber(Actualdata);

Step 4 : find the Smallest number

let smallestnum:number;
smallestnum=this.getsmallestnumber(Actualdata);

Step 5 : find the Difference b/w intervals (Difference b/w intervals 20000-0)

let interval = largestnum-smallestnum;

Step 6: Define the new scaling value 

let scalingnumber=100; 

Step 7:Find the Largest number new interval

let newlargestnum = largestnum/scalingnumber;

Step 8: Find the new interval dataset

let newdata: number[] =Actualdata;
let indexofnewdata:number=0
for(indexofnewdata = 0;  indexofnewdata<newdata.length;  indexofnewdata++ ) {
newdata[indexofnewdata]=newdata[indexofnewdata]/scalingnumber;
}

this entire process is called linear scaling y = mx + b.

We got new interval dataset as below 

[0, 1, 10, 25, 50, 75, 100, 125, 150, 175, 200]

Using D3 scaleLinear

Step 1: Find the Largest number using  d3.max

let d3largestnum = d3.max(Actualdata);

Step 2: Find the Smallest number using  d3.max

let d3smallestnum = d3.min(Actualdata);

Step 3: use d3's scaleLinear domain and range 

var d3linearScale = d3.scaleLinear().domain([d3smallestnum,d3largestnum]).range([0,200]);

Step 4: Apply scale linear to find the new interval

let d3newdata: number[] =[];
let indexofd3newdata: number;
indexofd3newdata =0;
console.log(Actualdata.length);
for(indexofd3newdata = 0;  indexofd3newdata<Actualdata.length;  indexofd3newdata++ ) {
d3newdata.push(d3linearScale(Actualdata[indexofd3newdata]));
}
console.log(d3newdata);

We got new interval using d3 dataset as below 

[0, 1, 10, 25, 50, 75, 100, 125, 150, 175, 200]
D3's scaleLinear makes scaling interval's to simple and more accurate.

Code Action @StackBlitz