如何建立交互式內核密度圖表

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]
    },...  ]
});

如今，您準備使用核密度估計圖的功能來探索本身的數據。
隨時在下面的評論部分中分享您的評論或問題。