Angular 7 D3|D3 Scales|D3| D3 Part11

D3 Scales


Before we start to D3 Scales refer
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

No comments

Post Top Ad

Post Bottom Ad