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

5行代码，即可让微信小程序上架到自己的APP中 | 注册送大疆、华为、樱桃键盘！>>>

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

点击下载Highcharts最新试用版

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

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

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

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

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

 

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

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

 

现在，您对内核密度估计的外观有了一个想法，让我们看一下其背后的代码。
代码中有四个主要步骤：

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

现在，您准备使用核密度估计图的功能来探索自己的数据。
随时在下面的评论部分中分享您的评论或问题。