当前位置:网站首页>How to create an interactive kernel density chart
How to create an interactive kernel density chart
2020-11-06 22:21:00 【roffey】
Highcharts It's a pure JavaScript A library of charts compiled , For you Web Website 、Web Applications provide intuitive 、 Interactive charts . Currently, broken lines are supported 、 curve 、 Area 、 Regional plot 、 Bar charts 、 Bar chart 、 The pie chart 、 Scatter plot 、 Angle measurement chart 、 Area map 、 Regional curve arrangement 、 Column arrangement 、 There are dozens of chart types, such as polar charts .
Click to download Highcharts The latest trial version
Kernel density estimation is a useful statistical method , Used to estimate the overall shape of the distribution of random variables . let me put it another way , Nuclear density estimates ( Also known as KDE) Can help us “ smooth ” And exploration does not follow any typical probability density distribution ( For example, normal distribution , Binomial distribution, etc ) The data of .
In this tutorial , We're going to show you how to Javascript Create interactive kernel density estimation and use Highcharts Library drawing results .
Let's first explore KDE chart ; Then we're going to delve into the code .
The following demonstration shows the Gaussian kernel density estimation for random data sets :
This chart helps us estimate the probability distribution of random data sets , And we can see that the data is mainly concentrated at the beginning and end of the chart .
Basically , For each red data point , We draw a Gaussian kernel function in orange , Then sum all the kernel functions together , Create density estimates in blue ( Please see the demo):
By the way , There are many kernel function types , For example, Gauss , Unified ,Epanechnikov etc. . We're using a Gaussian kernel , Because it provides a smooth pattern .
The mathematical expression of Gaussian kernel is :
Now? , You have an idea of what the kernel density estimation looks like , Let's take a look at the code behind it .
There are four main steps in the code :
- Create a Gaussian kernel function .
- Processing density estimators .
- Dealing with kernel points .
- Plot the entire data point .
Gaussian kernel
The following code represents the Gaussian kernel function :
function GaussKDE(xi, x) {
return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(Math.pow(xi - x, 2) / -2);
}
among x Represents the main data ( Observed value ),xi Represents the range and density estimation function of the rendering kernel . In our case ,xi The scope is 88 To 107, To ensure coverage 93 To 102 The range of observational data for .
Density estimation point
Here's how to recycle GaussKDE() Array representation of functions and ranges to create density estimators
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]);
}
Kernel point
Only if you want to show kernel points ( Orange chart ) You need to perform this step when . otherwise , You are already satisfied with the density estimation steps . This is the code that handles the data points of each kernel :
//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]]);
}
}
Basically , This loop just adds the scope xiData To kernel Each array that has been processed in the density estimation step .
Draw points
After processing all the data points , You can use Highcharts Rendering series . Density estimates and kernels are spline type , The observations are plotted as scatter plots :
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]
},... ]
});
Now? , You are going to explore your own data using the function of the kernel density estimation map .
Feel free to share your comments or questions in the comments section below .
版权声明
本文为[roffey]所创,转载请带上原文链接,感谢
边栏推荐
- 2020-08-15: under what circumstances should data tasks be optimized?
- Using iceberg on kubernetes to create a new generation of cloud original data Lake
- 如何才能快速正确的部署甘特图
- ImageMagick - 添加水印
- 2020-08-24:什么是小文件?很多小文件会有什么问题?很多小文件怎么解决?(大数据)
- 上海巨微专用蓝牙广播芯片
- Points to be considered when deleting mapping field of index in ES
- 如何使用甘特图图层和筛选器
- Es create a new index database and copy the old index library, practice pro test effective!
- Flink's datasource Trilogy: direct API
猜你喜欢
Characteristics of magnetic memory chip STT-MRAM
Configuration of AP hotspot on xunwei-imx6ull development board
2020-08-29:进程线程的区别,除了包含关系之外的一些区别,底层详细信息?
RFID fixed assets management system for fire equipment
What the hell is fastthreadlocal? The existence of ThreadLocal!!
Introduction to Huawei cloud micro certification examination
小程序商城系统插件代码该如何写?怎么用代码检查添加插件是否成功?
STM32F030K6T6兼容替换灵动MM32F031K6T6
image operating system windows cannot be used on this platform
Epu360: all the H5 templates you want are here, e-book, big turntable, red envelope rain, questionnaire survey
随机推荐
2020-08-24:什么是小文件?很多小文件会有什么问题?很多小文件怎么解决?(大数据)
[learning] interface test case writing and testing concerns
How to start the hidden preferences in coda 2 on the terminal?
Detailed software engineering -- the necessary graphs in each stage
New features of vue3
磁存储芯片STT-MRAM的特点
Js字符串-String字符串对象方法
迅为-iMX6ULL开发板上配置AP热点
Google browser realizes video playback acceleration function
WebAPI接口设计:SwaggerUI文档 / 统一响应格式 / 统一异常处理 / 统一权限验证
Epu360: all the H5 templates you want are here, e-book, big turntable, red envelope rain, questionnaire survey
DC-1 target
1万辆!理想汽车召回全部缺陷车:已发生事故97起,亏损将扩大
消防器材RFID固定资产管理系统
Utility class functions (continuous update)
JS array the usage of array is all here (array method reconstruction, array traversal, array de duplication, array judgment and conversion)
迅为iMX6开发板-设备树内核-menuconfig的使用
Novice guidance and event management system in game development
Stm32f030k6t6 compatible replacement smart mm32f031k6t6
上海巨微专用蓝牙广播芯片