This is the 21st day of my participation in the First Challenge 2022
See the Data Visualization column for a series of articles
Reference:
- Arrays (d3-array)
- D3-array
This article focuses on the Arrays module
In front-end data visualization, data sets are generally stored in the form of JavaScript iterable, such as array, set set, map map, generator, etc. So D3 provides the D3-array module with rich methods for dealing with these iterables, which can be used for preliminary data analysis in JavaScript.
💡 Before using this module, you should be familiar with JavaScript’s built-in methods for arrays, as some of the methods in the D3-array module borrow and extend the built-in methods for arrays.
The following methods can calculate some basic statistics about the data set
-
D3. min(iterable[, accessor]) gets the minimum value in the data set. This method returns undefined if the iterable contains non-comparable elements
💡 differs from JavaScript’s built-in math.min () method, which ignores elements with values of undefined, null, NaN.
The first argument iterable is an iterable, or data set.
The second argument is the accessor, which is a function. The iterable calls the accessor once for each element before comparing to find the minimum value, takes that element as an input parameter, and finally returns a representation of that element, which is then compared with the return value. It is similar to arr.map() or array.from ().
// First convert the string to a value, then find the minimum value d3.min(["2"."3"."10"].s= > +s) Copy the code💡 d3.min() The order used to compare two elements is natural order, so if the elements of the dataset are strings, characters in the strings are compared in sequence, using numeric codes (all strings are utF-16 encoded, You can get the character code for the character at position 0 of the string by using str.codePointat (0).
console.log("20".codePointAt(0)); / / 50 console.log("3".codePointAt(0)); / / 51 const stringArr = ["20"."3"]; d3.min(stringArr); 20 "/ /" const numberArr = [20.3]; d3.min(numberArr); / / 3 Copy the code💡 If you want to get the position of the minimum value in the iterable, the index, you can use the method d3.minIndex(iterable[, accessor]), which returns -1 if the iterable contains elements that are not comparable.
-
D3. Max (iterable[, accessor]) and d3.maxIndex(iterable[, accessor]) are used to obtain the maximum value and corresponding index in the iterable, respectively
-
D3.extent (iterable[, accessor]) retrieves the extent of the iterable, that is, returns an array of min and Max. If the iterable contains non-comparable elements, this method returns undefined, undefined.
-
D3. mean(iterable[, accessor]) retrieves the average value of an iterable. Returns undefined if there are no numeric elements in the iterable
-
D3. mode(iterable[, accessor]) gets the mode of an iterable. If there are more than one element with the same frequency, return the one with the higher index.
-
D3. sum(iterable[, accessor]) gets the sum of all elements of an iterable. If there are no numeric elements in the iterable (and if the string is made only of numbers it counts as a number because it can be converted implicitly to a number during an operation), then 0 is returned
-
Cumsum (iterable[, accessor]) Obtains the cumulative sum array of iterable objects, where the array element is the 64-bit precision Float64Array. If the iterable contains a non-numeric element, that element is considered 0. The length of the array is the same as the length of the iterable.
d3.cumsum([1.2.3.4]); // Float64Array(4) [1, 3, 6, 10] d3.cumsum([1."2"."c".undefined]); // Float64Array(4) [1, 3, 3, 3] Copy the code -
D3. fsum([values][, accessor]) gets the sum of all elements of the iterable. Same as d3.sum(), but more precise (though slower) because it uses d3 adder inside, instead of JavaScript +, which makes the result accurate to IEEE 754 floating-point arithmetic.
d3.fsum([1..1..1..1..1..1..1..1..1..1.]); / / 1 d3.sum([1..1..1..1..1..1..1..1..1..1.]); / / 0.9999999999999999 Copy the code💡 D3 provides an Adder. With new D3.adder (), create an Adder(hereinafter referred to as add) with an initial value of 0. Perform numerical operations with this Adder to make the result accurate to the IEEE 754 floating-point arithmetic standard.
-
Adder.add (number) adds the numeric number to the current value of the adder
-
Adder.valueof () returns the current adder value, which can also be obtained using +adder
-
-
D3. fcumsum([values][, accessor]) gets the cumulative sum of the iterable. Same effect as d3.cumsum(), but with more accurate results.
d3.fcumsum([1.1e-14, -1]); / / [14] 1, 1.00000000000001, 1 e - d3.cumsum([1.1e-14, -1]); / / [1, 1.00000000000001, 9.992 e-15] Copy the code -
D3.median (iterable[, accessor]) gets the median of the iterable. Returns undefined if there are no numeric elements in the iterable
-
D3. quantile(iterable, p[, accessor]) gets the quantile of the iterable.
The first argument iterable is an iterable, or data set.
The second parameter p is the quantile to be obtained, ranging from [0,1][0, 1][0,1]. For example, if the median (Q2, the second quartile) is needed, p=0.5; To obtain the first quartile Q1, p=0.25; To obtain the third quartile Q3, p=0.75; If p=0 or p=1, get the first and last element in the iterable, respectively.
The third parameter is the accessor.
💡 The iterables passed in by the above methods are not required to be ordered, because the iterables are sorted and the range is determined each time; If the raw data is already ordered, the better performance method d3.quantilesorted (Array, p[, accessor]) can be called, which no longer performs sorting operations and executes faster. Specific differences can be viewed source code.
-
D3. variance(iterable[, accessor]) gets the variance of an iterable. If the iterable has less than two elements of numeric type, undefined is returned
-
D3. deviation(iterable[, accessor]) Obtain the standard deviation of the iterable. If the iterable has less than two elements of numeric type, undefined is returned