Recently, I played the thermal diagram of the chart, because a colleague in the company wanted to visualize the signal strength of wireless devices. The signal strength in different frequency bands (X-axis: MHz) (Y-axis: DBM) itself is a two-dimensional data, plus the change of signal intensity over time, in two-dimensional space will accumulate the heat zone effect, we can calculate the thermal value as the third dimensional data.

Ps: The following charts show random simulation data.

method

Chart.js can be used to complete the drawing of basic coordinate axes and signal strength lines, but the thermal diagram is not supported by Chart.js itself, so secondary development is required. In essence, a thermal map can be considered as a point density map, which is the density of data points in space. The more dense the data points are, the higher the value is. The specific algorithm can be determined according to their own needs, but the mainstream approach is point density. This algorithm can be truncated, that is, how many data points are in the search radius, as the thermal value. It can also decay with distance, like IDW.

The more distant the point is, the less influence it has on the thermal value of the current cell, which is a typical application of the first law of geography.

static computeDensity(heatSets: any[], lineSets: number[], maxValueY: number) {
    if(! heatSets) { mat = this.genMat(matY, matX, 0); // initialize Y*X matrix}else{ mat = heatSets; // The thermodynamic value matrix after the last accumulation} //for (letx = 0; x < matX; Mat [lineSets[x] -1][x] += 1; mat[lineSets[x] -1][x] += 1; this.addBuffer(mat, lineSets, x, radius); // The search radius is RADIUS. For the current data point, we need to add TA to the nearby cells of the thermal matrix. }}} // Define the boundary color according to the statistical results of the thermodynamic matrix (maximum and minimum values), from red gradient to background color staticsetColor(densityData: densityData) {// Make each thermal value correspond to a different gradient. }Copy the code

performance

Performance is very important in thermal maps with high real-time requirements, including heatmap.js, a famous thermal map library with very high performance, because TA directly putImageDate in canvas rendering function and directly color by using gradient function, with very high performance, millisecond level.

However, my initial thermodynamic calculation function was very stupid. It was very complicated to traverse the whole matrix (if N * N) to search for nodes (m points) to calculate the data points or lines of thermal power, and it needed to perform n * N * m cumulative functions at most. But later, I thought in reverse, directly traversing the data points (m), and traversing the cells in the surrounding radius (RAD) at most, and performing the m * rad sub-summation function at most. This complexity is greatly reduced, from around 1000ms to less than 10ms. Forgive me if I’m confused about big O. Ha ha

The calculation of point density is interesting, and then the key code will be put on Github. That’s right, Github, which was acquired by Microsoft.