mirror of
https://github.com/sakitam-gis/kriging.js.git
synced 2025-12-08 18:26:25 +00:00
180 lines
8.9 KiB
HTML
180 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>kriging.js</title>
|
|
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Metrophobic">
|
|
<script src="http://rawgithub.com/oeo4b/kriging.js/master/kriging.js" type="text/javascript"></script>
|
|
<script src="./world.js" type="text/javascript"></script>
|
|
<style type="text/css">
|
|
body {
|
|
font-family: 'Metrophobic';
|
|
margin: 0px 0px;
|
|
padding: 0px;
|
|
}
|
|
a {
|
|
color: black;
|
|
}
|
|
h2 {
|
|
padding-left: 20px;
|
|
}
|
|
h3 {
|
|
padding-left: 40px;
|
|
color: #2C3539;
|
|
}
|
|
p {
|
|
padding-left: 60px;
|
|
padding-right: 40px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
pre {
|
|
padding-left: 80px;
|
|
padding-right: 40px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
color: grey;
|
|
white-space: pre-wrap;
|
|
white-space: -moz-pre-wrap;
|
|
white-space: -pre-wrap;
|
|
white-space: -o-pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
.logo {
|
|
font-size: 36px;
|
|
}
|
|
#content {
|
|
width: 800px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
}
|
|
#header, #footer {
|
|
padding: 10px;
|
|
}
|
|
#header ul li {
|
|
display: inline;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
#map {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="content">
|
|
<div id="header">
|
|
<ul>
|
|
<li>
|
|
<b><a class="logo">kriging.js</a></b>
|
|
</li>
|
|
<li>
|
|
<a href="http://rawgithub.com/oeo4b/kriging.js/master/kriging.js" download="kriging.js">Download</a>
|
|
</li>
|
|
<li>
|
|
<a href="#start">Getting Started</a>
|
|
</li>
|
|
<li>
|
|
<a href="#documentation">Documentation</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.github.com/oeo4b/kriging.js">Source</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<canvas id="map"></canvas>
|
|
<script type="text/javascript">
|
|
// Init canvas dimensions
|
|
var canvas = document.getElementById("map");
|
|
var header = document.getElementById("header");
|
|
canvas.width = 800;
|
|
canvas.height = canvas.width/2;
|
|
|
|
// Random data
|
|
var i, j, k, n = 100;
|
|
var t = Array(n);
|
|
var x = Array(n);
|
|
var y = Array(n);
|
|
for(i=0,k=false;i<n;i++,k=false) {
|
|
t[i] = Math.random()*100;
|
|
while(k==false) {
|
|
x[i] = (-180)+Math.random()*360;
|
|
y[i] = (-90)+Math.random()*180;
|
|
for(j=0;j<world.length;j++) {
|
|
if(world[j].pip(x[i], y[i])) {
|
|
k = true;
|
|
break;
|
|
}
|
|
}
|
|
if(k) break;
|
|
}
|
|
}
|
|
|
|
// Fit data
|
|
var variogram = kriging.train(t, x, y, "exponential", 0, 10);
|
|
|
|
// Increase width for mobile
|
|
var width;
|
|
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
|
|
width = 2;
|
|
else width = 0.5;
|
|
|
|
// Spectrum
|
|
var colors = ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"];
|
|
|
|
// Plot grid
|
|
var grid = kriging.grid(world, variogram, width);
|
|
kriging.plot(canvas, grid, [-180, 180], [-90, 90], colors);
|
|
|
|
</script>
|
|
<div id="start"></div>
|
|
<p><strong>kriging.js</strong> is a Javascript library for mapping and predicting spatial data using the <a href="http://en.wikipedia.org/wiki/Kriging" target="_newtab">kriging algorithm</a>. This library allows one to model and map spatial data.</p>
|
|
<p>The easiest way to get started is to <a href="http://rawgithub.com/oeo4b/kriging.js/master/kriging.js" download="kriging.js">download</a> the Javascript library (or link directly to krigingjs.com/kriging.js) and attach it to your html code. Then, to train a <a href="#documentation">model</a> with coordinates (<strong>x</strong>, <strong>y</strong>) and values <strong>t</strong> on <a href="#documentation">parameters</a> σ<sup>2</sup> and α:</p>
|
|
<pre>var model = "exponential";
|
|
var sigma2 = 0, alpha = 100;
|
|
var fitModel = kriging.train(t, x, y, model, sigma2, alpha);</pre>
|
|
<p>To predict points at a new point in space (<strong>x<sub>new</sub></strong>, <strong>y<sub>new</sub></strong>):</p>
|
|
<pre>var tnew = kriging.predict(xnew, ynew, fitModel);</pre>
|
|
<div id="examples"></div>
|
|
<ul>
|
|
<li>
|
|
<h2>Creating Maps</h2>
|
|
</li>
|
|
</ul>
|
|
<div id="documentation"></div>
|
|
<ul>
|
|
<li>
|
|
<h2>Documentation</h2>
|
|
</li>
|
|
<li>
|
|
<h3>Probability Model</h3>
|
|
<p>The model used is a 2-dimensional gaussian process, <b>y</b>, with a prior on the parameters of the kernel function. One of a variety of different kernel functions (or variogram models) generate the Gram matrix <b>K</b>. The variance σ<sup>2</sup> of the noise process is adjustable, providing a smoothing effect by increasing the uncertainty of the likelihood <b>t</b>.</p>
|
|
<pre><b>y</b> ~ N(<b>0</b>, <b>K</b>)
|
|
<b>t</b>|<b>y</b> ~ N(<b>t</b>|<b>y</b>, σ<sup>2</sup><b>I</b>)</pre>
|
|
</li>
|
|
<li>
|
|
<h3>Variogram</h3>
|
|
<p>The various variogram models can be interpreted as kernel functions for 2-dimensional coordinates <strong>a</strong>, <strong>b</strong> and parameters nugget, range, sill and A. Reparameterized as a linear function, with w = [nugget, (sill-nugget)/range], this becomes:</p>
|
|
<pre>
|
|
Gaussian: k(<strong>a</strong>,<strong>b</strong>) = w[0] + w[1] * ( 1 - exp{ -( ||<strong>a</strong>-<strong>b</strong>|| / range )<sup>2</sup> / A } )
|
|
Exponential: k(<strong>a</strong>,<strong>b</strong>) = w[0] + w[1] * ( 1 - exp{ -( ||<strong>a</strong>-<strong>b</strong>|| / range ) / A } )
|
|
Spherical: k(<strong>a</strong>,<strong>b</strong>) = w[0] + w[1] * ( 1.5 * ( ||<strong>a</strong>-<strong>b</strong>|| / range ) - 0.5 * ( ||<strong>a</strong>-<strong>b</strong>|| / range )<sup>3</sup> )</pre>
|
|
<p>Bayesian regression is used to estimate the parameters with the prior:</p>
|
|
<pre><b>w</b> ~ N(w|<strong>0</strong>, α<strong>I</strong>)</pre>
|
|
</li>
|
|
<li>
|
|
<h3>Mapping methods</h3>
|
|
<p>Grid and vector based mapping methods are available within the instantiated kriging object.</p>
|
|
</li>
|
|
</ul>
|
|
<p></p>
|
|
<div id="footer">
|
|
<small>Copyright 2011-2015, Omar Olmedo. Released under <a href="http://opensource.org/licenses/MIT">The MIT License</a>.</small>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|