开源图表库如何创建交互式内核密度

转载

roffey 2022-09-29 09:12:21

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

开源图表库如何创建交互式内核密度_数据可视化

内核密度估计是一种有用的统计方法，用于估计随机变量分布的总体形状。换句话说，核密度估计（也称为KDE）可帮助我们“平滑”和探索不遵循任何典型概率密度分布（例如正态分布，二项式分布等）的数据。

在本教程中，我们将向您展示如何在Javascript中创建交互式内核密度估计并使用Highcharts库绘制结果。

让我们首先探索KDE图；然后我们将深入研究代码。

下面的演示显示了随机数据集的高斯核密度估计：

开源图表库如何创建交互式内核密度_数据可视化_02

此图表帮助我们估计随机数据集的概率分布，并且我们可以看到数据主要集中在图表的开始和结尾。

基本上，对于每个红色数据点，我们用橙色绘制一个高斯核函数，然后将所有核函数求和在一起，以蓝色创建密度估计值（请参见demo）：

开源图表库如何创建交互式内核密度_js_03

顺便说一下，有很多内核函数类型，例如高斯，统一，Epanechnikov等。我们使用的是高斯内核，因为它提供了平滑的模式。

高斯核的数学表示为：

开源图表库如何创建交互式内核密度_可视化_04

现在，您对内核密度估计的外观有了一个想法，让我们看一下其背后的代码。
代码中有四个主要步骤：
1.创建高斯核函数。
2.处理密度估计点。
3.处理内核点。
4.绘制整个数据点。

高斯核函数

以下代码表示高斯内核函数：

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: “{point.x}”
 },
 zIndex: 9
 },
 {
 name: “KDE”,
 dashStyle: “solid”,
 lineWidth: 2,
 color: “#1E90FF”,
 data: data
 },
 {
 name: “k(” + dataSource[0] + “)”,
 data: kernelChart[0]
 },… ]
 });