当前位置:网站首页>如何创建交互式内核密度图表
如何创建交互式内核密度图表
2020-11-06 22:21:00 【roffey】
Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
内核密度估计是一种有用的统计方法,用于估计随机变量分布的总体形状。换句话说,核密度估计(也称为KDE)可帮助我们“平滑”和探索不遵循任何典型概率密度分布(例如正态分布,二项式分布等)的数据。
在本教程中,我们将向您展示如何在Javascript中创建交互式内核密度估计并使用Highcharts库绘制结果。
让我们首先探索KDE图;然后我们将深入研究代码。
下面的演示显示了随机数据集的高斯核密度估计:
此图表帮助我们估计随机数据集的概率分布,并且我们可以看到数据主要集中在图表的开始和结尾。
基本上,对于每个红色数据点,我们用橙色绘制一个高斯核函数,然后将所有核函数求和在一起,以蓝色创建密度估计值(请参见demo):
顺便说一下,有很多内核函数类型,例如高斯,统一,Epanechnikov等。我们使用的是高斯内核,因为它提供了平滑的模式。
高斯核的数学表示为:
现在,您对内核密度估计的外观有了一个想法,让我们看一下其背后的代码。
代码中有四个主要步骤:
- 创建高斯核函数。
- 处理密度估计点。
- 处理内核点。
- 绘制整个数据点。
高斯核函数
以下代码表示高斯内核函数:
function GaussKDE(xi, x) {
return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(Math.pow(xi - x, 2) / -2);
}
其中x表示主要数据(观测值),xi表示绘制内核的范围和密度估计函数。在我们的情况下,xi范围是88到107,以确保覆盖93到102的观测数据范围。
密度估算点
以下循环使用GaussKDE()数组表示的函数和范围创建密度估计点
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]);
}
内核点
仅当您想要显示内核点(橙色图表)时才需要执行此步骤。否则,您已经对密度估算步骤很满意。这是处理每个内核的数据点的代码:
//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]]);
}
}
基本上,此循环仅是将范围添加xiData到kernel在密度估计步骤中已处理的每个阵列。
绘制点
处理完所有数据点后,就可以使用Highcharts渲染系列了。密度估计和核是样条图类型,而观测值则绘制为散点图:
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]
},... ]
});
现在,您准备使用核密度估计图的功能来探索自己的数据。
随时在下面的评论部分中分享您的评论或问题。
版权声明
本文为[roffey]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4587239/blog/4494509
边栏推荐
- August 30, 2020: naked write algorithm: the nearest common ancestor of two nodes in a binary tree.
- 2020-09-04:函数调用约定了解么?
- How to start the hidden preferences in coda 2 on the terminal?
- 2020-08-29: process thread differences, in addition to the inclusion relationship, the underlying details?
- What kind of music do you need to make for a complete game?
- Junit测试出现 empty test suite
- 非易失性MRAM存储器应用于各级高速缓存
- Open source a set of minimalist front and rear end separation project scaffold
- August 24, 2020: what are small documents? What's wrong with a lot of small files? How to solve many small files? (big data)
- Using iceberg on kubernetes to create a new generation of cloud original data Lake
猜你喜欢
大佬们如何在nginx镜像里面增加模块?
2020-08-30:裸写算法:二叉树两个节点的最近公共祖先。
谷歌浏览器实现视频播放加速功能
August 30, 2020: naked write algorithm: the nearest common ancestor of two nodes in a binary tree.
Introduction to the development of small game cloud
The Interpreter pattern of behavior pattern
Junit测试出现 empty test suite
应用层软件开发教父教你如何重构,资深程序员必备专业技能
打工人好物——磨炼钢铁意志就要这样高效的电脑
Exclusive interview of guests at | 2020 PostgreSQL Asia Conference: Wang Tao
随机推荐
Visual rolling [contrast beauty]
Detect certificate expiration script
Ora-02292: complete constraint violation (midbjdev2.sys_ C0020757) - subrecord found
预留电池接口,内置充放电电路及电量计,迅为助力轻松搞定手持应用
An article will introduce you to CSS3 background knowledge
2020-08-29:进程线程的区别,除了包含关系之外的一些区别,底层详细信息?
Unity performance optimization
Introduction to the development of small game cloud
2020-09-03:裸写算法:回形矩阵遍历。
The method of local search port number occupation in Windows system
2020-08-17:详细说下数据倾斜怎么解决?
Python 100 cases
Code generator plug-in and creator preform file analysis
An article will introduce you to HTML tables and their main attributes
With this artifact, quickly say goodbye to spam messages
August 14, 2020: what are the execution engines for data tasks?
How does cglib implement multiple agents?
win7 APPCRASH(解决方法)(转)
Js字符串-String字符串对象方法
Google browser realizes video playback acceleration function