Angular 7 D3|Basic D3 Array Utilities|D3| D3 Part8

Basic D3 Array Utilities 

Before we start to Basic D3 Array Utilities 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
• Array -       Basics Type Script Array 

Basic D3 Array Utilities

D3 provides below basic Array functionalities to improve programming efficiency.

1. d3.min
2. d3.max
3. d3.extent
4. d3.sum
5. d3.mean
6. d3.median

Step 1: create a numeric dataset (array).

 public min: number;
 public max: number;
 public extent: Array<number>;
 public sum: number;
 public mean: number;
 public median: number;
 public dataset: Array<number> = [1,2,3,4,5,6,100,-89];

Step 2: Import d3 to the required component.

import * as d3 from 'd3';

Step 3: experiment with d3's array utilities.

d3.min

it returns the least value of the array using natural order.

findmin() {
 this.min  = d3.min(this.dataset);
 }

d3.max

D3.max returns the maximum value of the given array using natural order.

findmax() {
this.max  = d3.max(this.dataset);
}

d3.extent

extent returns an array with minimum and maximum values of the given array using natural order.

findextent(){
this.extent = d3.extent(this.dataset);
}

d3.sum

sum returns summation of the given array.

findsum(){
this.sum  = d3.sum(this.dataset);
}

d3.mean

mean returns mean of the given array.

findmean(){
this.mean  = d3.mean(this.dataset);
}

d3.median

mean returns median of the given array.

findmedian(){
this.median= d3.median(this.dataset);
}

OutPut

Run the project and see  the result

Code Action @stackblitz