当前位置:网站首页>如何创建交互式内核密度图表

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

2020-11-06 22:21:56 roffey

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

点击下载Highcharts最新试用版

Featured image

内核密度估计是一种有用的统计方法,用于估计随机变量分布的总体形状。换句话说,核密度估计(也称为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]
    },...  ]
});

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

版权声明
本文为[roffey]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4587239/blog/4494509