当前位置:网站首页>How to create an interactive kernel density chart
How to create an interactive kernel density chart
2020-11-06 22:21:56 【roffey】
Highcharts It's a pure JavaScript A library of charts compiled , For you Web Website 、Web Applications provide intuitive 、 Interactive charts . Currently, broken lines are supported 、 curve 、 Area 、 Regional plot 、 Bar charts 、 Bar chart 、 The pie chart 、 Scatter plot 、 Angle measurement chart 、 Area map 、 Regional curve arrangement 、 Column arrangement 、 There are dozens of chart types, such as polar charts .
Click to download Highcharts The latest trial version
Kernel density estimation is a useful statistical method , Used to estimate the overall shape of the distribution of random variables . let me put it another way , Nuclear density estimates ( Also known as KDE) Can help us “ smooth ” And exploration does not follow any typical probability density distribution ( For example, normal distribution , Binomial distribution, etc ) The data of .
In this tutorial , We're going to show you how to Javascript Create interactive kernel density estimation and use Highcharts Library drawing results .
Let's first explore KDE chart ; Then we're going to delve into the code .
The following demonstration shows the Gaussian kernel density estimation for random data sets :

This chart helps us estimate the probability distribution of random data sets , And we can see that the data is mainly concentrated at the beginning and end of the chart .
Basically , For each red data point , We draw a Gaussian kernel function in orange , Then sum all the kernel functions together , Create density estimates in blue ( Please see the demo):

By the way , There are many kernel function types , For example, Gauss , Unified ,Epanechnikov etc. . We're using a Gaussian kernel , Because it provides a smooth pattern .
The mathematical expression of Gaussian kernel is :
Now? , You have an idea of what the kernel density estimation looks like , Let's take a look at the code behind it .
There are four main steps in the code :
- Create a Gaussian kernel function .
- Processing density estimators .
- Dealing with kernel points .
- Plot the entire data point .
Gaussian kernel
The following code represents the Gaussian kernel function :
function GaussKDE(xi, x) {
return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(Math.pow(xi - x, 2) / -2);
}
among x Represents the main data ( Observed value ),xi Represents the range and density estimation function of the rendering kernel . In our case ,xi The scope is 88 To 107, To ensure coverage 93 To 102 The range of observational data for .
Density estimation point
Here's how to recycle GaussKDE() Array representation of functions and ranges to create density estimators
xiData:
//Create the density estimate
for (i = 0; i < xiData.length; i++) {
let temp = 0;
kernel.push([]);
kernel[i].push(new Array(dataSource.length));
for (j = 0; j < dataSource.length; j++) {
temp = temp + GaussKDE(xiData[i], dataSource[j]);
kernel[i][j] = GaussKDE(xiData[i], dataSource[j]);
}
data.push([xiData[i], (1 / N) * temp]);
}
Kernel point
Only if you want to show kernel points ( Orange chart ) You need to perform this step when . otherwise , You are already satisfied with the density estimation steps . This is the code that handles the data points of each kernel :
//Create the kernels
for (i = 0; i < dataSource.length; i++) {
kernelChart.push([]);
kernelChart[i].push(new Array(kernel.length));
for (j = 0; j < kernel.length; j++) {
kernelChart[i].push([xiData[j], (1 / N) * kernel[j][i]]);
}
}
Basically , This loop just adds the scope xiData To kernel Each array that has been processed in the density estimation step .
Draw points
After processing all the data points , You can use Highcharts Rendering series . Density estimates and kernels are spline type , The observations are plotted as scatter plots :
Highcharts.chart("container", {
chart: {
type: "spline",
animation: true
},
title: {
text: "Gaussian Kernel Density Estimation (KDE)"
},
yAxis: {
title: { text: null }
},
tooltip: {
valueDecimals: 3
},
plotOptions: {
series: {
marker: {
enabled: false
},
dashStyle: "shortdot",
color: "#ff8d1e",
pointStart: xiData[0],
animation: {
duration: animationTime
}
}
},
series: [
{
type: "scatter",
name: "Observation",
marker: {
enabled: true,
radius: 5,
fillColor: "#ff1e1f"
},
data: dataPoint,
tooltip: {
headerFormat: "{series.name}:",
pointFormat: "<b>{point.x}</b>"
},
zIndex: 9
},
{
name: "KDE",
dashStyle: "solid",
lineWidth: 2,
color: "#1E90FF",
data: data
},
{
name: "k(" + dataSource[0] + ")",
data: kernelChart[0]
},... ]
});
Now? , You are going to explore your own data using the function of the kernel density estimation map .
Feel free to share your comments or questions in the comments section below .
版权声明
本文为[roffey]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World