geostats
Version:
A tiny and standalone javascript library for classification and basic statistics
460 lines (393 loc) • 17.8 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>geostats.js (by simon georget)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/geostats.js"></script>
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script type="text/javascript" src="https://raw.github.com/gka/chroma.js/master/chroma.min.js"></script>
<script type="text/javascript" src="tests/openlayers_sample.js"></script>
<link rel="stylesheet" href="lib/geostats.css" type="text/css" />
<style type="text/css">
<!--
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color:#333;
font-size: 0.8em;
background-color: #F7F7F7;
}
#legend, #legend2, #legend3{float:left;width:28%;margin:0 2em 2em 2em;}
.legend-block {
border: 1px solid #555555;
display: block;
float: left;
height: 12px;
margin: 0.3em 0.8em 0 2em;
width: 20px;
}
.container {margin:0 auto;width:60%;}
.serie strong {color:#333;}
.serie {font-size: .9em;color:#555;}
.classes {margin:0em 4em 2em;}
.projectinfo {width:100%;text-align: center;margin:-3em 0 3em;}
.legend p { height: 70px;color:#555;font-variant: small-caps;text-align: justify;border-top:1px dotted #ccc}
a {color:#F47FE7;font-weight: bold;text-shadow: #fff 2px 2px 0px;text-decoration: none;}
a:hover {color:#514F51;}
#map, #map2, #map3 {width:100%;height:500px;border: 1px solid #ccc;background-color: #eee}
h1 {color:#B5B1B1;text-shadow: #fff 2px 2px 0px;text-align: center;margin:2em 0;}
h2 {color:#A2A3F2;text-shadow: #fff 2px 2px 0px;margin:2em 0 1em 0;}
h3 {color:#555;font-size: .9em}
hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #ddd;
background-color: #ddd;
border: 0;
}
pre {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #D3E5FF;
}
#footer {font-size:0.8em;text-align: center;color:#777;margin:2em 0 1em;padding:.3em}
-->
</style>
<script type="text/javascript">
var callback_sample = function(c) {
return '<strong>' + c + '</strong>';
};
$(document).ready(function() {
$.getJSON('tests/test.json',function(data) {
var items = []; // will store values
var uValues = []; // will store values
// Don't forget to use firebug console to retrieve your data
// console.log(data.features);
$.each(data.features, function(i,feature){
items.push(feature.properties.Pop_2006);
});
$.each(data.features, function(i,feature){
uValues.push(feature.properties.value);
});
var dataJson = items;
// Seventh serie
serie7 = new geostats(dataJson);
serie7.setPrecision(6);
// we get Eq interval classification
var a = serie7.getClassQuantile(5);
//var a = serie7.getClassEqInterval(5);
//var a = serie7.getClassJenks(3);
var str = '<strong>Classification Method : <\/strong>' + serie7.method + " :\n";
str += '<div class="classes">';
var ranges = serie7.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
var content = '';
content += '<h2>Sample 7 - Loading data from JSON file (with jQuery)<\/h2>';
content += '<p>' + nl2br(serie7.info()) + '<\/p>';
content += '<p>' + nl2br(str) + '<\/p>';
content += '<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie7.getSortedlist() + '<\/p>';
content += '<hr \/>';
jQuery('#sample-7').html(content);
// sample-8
// for openlayers representation
var color_x = new Array('#e2dee6', '#c2abdd', '#9d87b6', '#735a8f', '#3d2e4e');
serie7.setColors(color_x);
var class_x = ranges;
var content = serie7.getHtmlLegend();
serie7.legendSeparator = ' ⇔ ';
serie7.setPrecision(2);
var content_flare = serie7.getHtmlLegend(null, 'Customized legend, callback function (<em>here, values wrapped by strong tags<\/em>) and feature count', true, callback_sample, 'distinct');
var content_legend3 = serie7.getHtmlLegend(null, 'Legend (real values, breaking continuous serie)', true, null, 'discontinuous', 'DESC');
jQuery('#method').html('<p><strong>Classification Method : <\/strong>' + serie7.method + '<\/p>');
jQuery('#legend p').before(content);
jQuery('#legend2 p').before(content_flare);
jQuery('#legend3 p').before(content_legend3);
init(color_x, class_x);
// sample-10
// for openlayers representation
serieUV = new geostats(uValues);
var colors = new Array('#2BCE72', '#FFC414', '#E069BC', '#4D8CEA');
serieUV.setColors(colors);
// we get Unique classification
var values = serieUV.getClassUniqueValues();
var legend = serieUV.getHtmlLegend(null, null, 1);
jQuery('#legend4').html(legend);
initUniqueValues(colors, values);
// sample-11
// for openlayers representation
var color_x = chroma.scale('RdYlGn').domain([serie7.min(),serie7.max()], 5).colors()
console.log(color_x);
serie7.setColors(color_x);
var legend = serie7.getHtmlLegend(null, null, 1);
jQuery('#legend5').html(legend);
initChromaSample(color_x, class_x);
});
});
</script>
<script type="text/javascript">
// from https://raw.github.com/kvz/phpjs/master/functions/strings/nl2br.js
function nl2br (str, is_xhtml) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Philip Peterson
// + improved by: Onno Marsman
// + improved by: Atli Þór
// + bugfixed by: Onno Marsman
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Maximusya
// * example 1: nl2br('Kevin\nvan\nZonneveld');
// * returns 1: 'Kevin<br />\nvan<br />\nZonneveld'
// * example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
// * returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
// * example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
// * returns 3: '<br />\nOne<br />\nTwo<br />\n<br />\nThree<br />\n'
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
</script>
</head>
<body>
<div class="container" id="top">
<h1>geostats - Javascript classification library <em>samples</em></h1>
<p class="projectinfo"><a href="https://github.com/simogeo/geostats" title="geostats Github page">Github page</a> - <a href="https://github.com/simogeo/geostats/archive/master.zip" title="geostats download">download (from github)</a></p>
<script type="text/javascript"><!--
// Samples datasets
// test integer - 14 values
var a1 = Array(12, 22, 5, 8, 43, 2, 34, 12, 34, 36, 5, 21, 23, 45);
// test integer - 17 values
var a2 = Array(12, 22, 5, 8, 43, 2, 34, 12, 34, 36, 5, 21, 23, 45, 12, 31, 38);
// test float - 5 values
var a3 = Array(1.54567, 0.7623122, 1.895432, 2.435357, 0.11143);
// test integer - 10 values
var a4 = Array(12, 22, 5, 8, 43, 2, 34, 12, 34, 36);
// test float
var a5 = Array(0.1, 1.2, 3, 2.5, 1.6, 2.2, 3.1, 2.8, 1.1, 2.7, 7.1);
// test integer - 11 values
//var a6 = Array(12, 22, 18, 5, 8, 43, 2, 34, 12, 34, 36);
var a6 = Array(12, 22, 18, 5, 8, 43, 2, 34, 12, 34, 36, 4, 9, 35, 12, 42, 43, 56, 12, 23,
43, 19, 11, -1, 51, -6, 34, 33,41, 45, 23, -3, 3, 54, 1, 18, 44, 41,28, 16, 19,
35, 44, 21, 23, -3, 5, 64, 15, 17, 7, 93, 6, 16, 47, 13, 46, 53, 10, 30, 31, 32,
58, 28, 32, 46,53, 31, 2, 36, 41, 23, 3, 8, 15, 54, 35, 79, 15, 83, 6,-9, 78, 74,
56, 78, 45, 62, 19, 70, 23, 51, 73, 67, 78, 34, 52, 61, 60, 11, 26, 48, 15, 2);
// First serie
serie1 = new geostats(a1);
document.write('<h2>Sample 1 - basic statistics methods <\/h2>');
document.write('<p>geostats.min() : ' + serie1.min() + '<\/p>');
document.write('<p>geostats.max() : ' + serie1.max() + '<\/p>');
document.write('<p>geostats.sum() : ' + serie1.sum() + '<\/p>');
document.write('<p>geostats.pop() : ' + serie1.pop() + '<\/p>');
document.write('<p>geostats.mean() : ' + serie1.mean() + '<\/p>');
document.write('<p>geostats.median() : ' + serie1.median() + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie1.getSortedlist() + '<\/p>');
document.write('<hr \/>');
// Second serie
serie2 = new geostats(a2);
document.write('<h2>Sample 2 - geostats.info() <\/h2>');
document.write('<p>' + nl2br(serie2.info()) + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie2.getSortedlist() + '<\/p>');
document.write('<hr \/>');
// Third serie
serie3 = new geostats(a3);
document.write('<h2>Sample 3 - handle both integer and float values <\/h2>');
document.write('<p>' + nl2br(serie3.info()) + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie3.getSortedlist() + '<\/p>');
document.write('<hr \/>');
// Fourth serie
serie4 = new geostats(a4);
// we get Eq interval classification 3 classes
var a = serie4.getClassEqInterval(3);
var str = '<strong>Classification Method : <\/strong>' + serie4.method + " :\n";
str += '<div class="classes">';
var ranges = serie4.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Eq interval classification 4 classes
var a = serie4.getClassEqInterval(4);
str += '<strong>Classification Method : <\/strong>' + serie4.method + " :\n";
str += '<div class="classes">';
var ranges = serie4.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Eq interval classification 5 classes
var a = serie4.getClassEqInterval(5);
str += '<strong>Classification Method : <\/strong>' + serie4.method + " :\n";
str += '<div class="classes">';
var ranges = serie4.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
document.write('<h2>Sample 4 - classification : choose classes number <\/h2>');
document.write('<p>' + nl2br(serie4.info()) + '<\/p>');
document.write('<p>' + nl2br(str) + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie4.getSortedlist() + '<\/p>');
document.write('<hr \/>');
// Fifth serie
var serie5 = new geostats();
serie5.setSerie(a5);
// we get Eq interval classification
var a = serie5.getClassEqInterval(4);
var str = '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Quantile classification
var a = serie5.getClassQuantile(4);
str += '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Std Deviation classification
var a = serie5.getClassStdDeviation(4);
str += '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Arithmetic Progression classification
var a = serie5.getClassArithmeticProgression(4);
str += '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Arithmetic Progression classification
var a = serie5.getClassGeometricProgression(4);
str += '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Jenks classification
var a = serie5.getClassJenks(4);
str += '<strong>Classification Method : <\/strong>' + serie5.method + " :\n";
str += '<div class="classes">';
var ranges = serie5.ranges;
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
document.write('<h2>Sample 5 - classification : choose classification method<\/h2>');
document.write('<h3>Equal Interval, Quantile, Standard Deviation, Arithmetic Progression, Geometric Progression, Jenks<\/h3>');
document.write('<div>6 methods: <\/div>');
document.write('<ul>');
document.write('<li><em>geostats.getClassEqInterval(nbClass);<\/em><\/<li>');
document.write('<li><em>geostats.getClassQuantile(nbClass);<\/em><\/<li>');
document.write('<li><em>geostats.getClassStdDeviation(nbClass);<\/em><\/<li>');
document.write('<li><em>geostats.getClassArithmeticProgression(nbClass);<\/em><\/<li>');
document.write('<li><em>geostats.getClassGeometricProgression(nbClass);<\/em><\/<li>');
document.write('<li><em>geostats.getClassJenks(nbClass);<\/em><\/<li>');
document.write('<\/ul>');
document.write('<p>You can even use <em>geostats.setClassManually([0.1, 1.5, 2.2, 3.5, 7.1]);<\/em> method to classify manually your data. It will then be easy to render the legend.<\/p>');
document.write('<p>' + nl2br(serie5.info()) + '<\/p>');
document.write('<p>' + nl2br(str) + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie5.getSortedlist() + '<\/p>');
document.write('<hr \/>');
// Sixth serie
var serie6 = new geostats(a6);
// we get Eq interval classification
serie6.getClassEqInterval(3);
var str = '<strong>Classification Method : <\/strong>' + serie6.method + " :\n";
str += '<div class="classes">';
var ranges = serie6.getRanges();
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Quantile classification
serie6.getClassQuantile(5);
str += '<strong>Classification Method : <\/strong>' + serie6.method + " :\n";
str += '<div class="classes">';
var ranges = serie6.getRanges();
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
// we get Jenks classification
serie6.getClassJenks(4);
str += '<strong>Classification Method : <\/strong>' + serie6.method + " :\n";
str += '<div class="classes">';
var ranges = serie6.getRanges();
for(i = 0; i < ranges.length ; i++) {
str += ranges[i] + "\n";
}
str += '<\/div>';
document.write('<h2>Sample 6 - choose the right classification<\/h2>');
document.write('<p>' + nl2br(serie6.info()) + '<\/p>');
document.write('<p>' + nl2br(str) + '<\/p>');
document.write('<p class="serie"><strong>Serie (sorted) : <\/strong>' + serie6.getSortedlist() + '<\/p>');
document.write('<hr \/>');
document.write('<div id="sample-7"><\/div>');
--></script>
<div id="sample-8">
<h2>Sample 8 - a choropleth representation (using openlayers) with JSON input</h2>
<div id="method"></div>
<div id="map"></div>
</div>
<div id="sample-9">
<h2>Sample 9 - dynamic HTML legend with user input, feature count, callback function and display mode option</h2>
<div id="legend" class="legend">
<p>Call to legend method with default options</p>
</div>
<div id="legend2" class="legend">
<p>Call to legend method with options : customized text, callback function and 'distinct' mode. Decimal precision has been set to 2.</p>
</div>
<div id="legend3" class="legend">
<p>Call to legend method with options : 'discontinuous' mode, and descending order.</p>
</div>
</div>
<div style="clear:both"></div>
<div id="sample-10">
<h2>Sample 10 - Handle unique values</h2>
<div id="map2"></div>
<div id="legend4"></div>
</div>
<div id="sample-11">
<h2>Sample 11 - a choropleth representation (using openlayers) with JSON input and <a href="https://github.com/gka/chroma.js">Chroma.js</a></h2>
<div id="chroma-code">
<pre>
<code>
// getting the color ramp from chroma by passing min, max values and number of classes
var color_x = chroma.scale('RdYlGn').domain([serie7.min(),serie7.max()], 5).colors();
// setting colors into geostats
serie7.setColors(color_x);
// rendering the html legend with geostats
jQuery('#legend5').html(serie7.getHtmlLegend(null, null, 1));
// displaying map with openlayers
initChromaSample(color_x, class_x);
</code></pre>
</div>
<div id="map3"></div>
<div id="legend5"></div>
</div>
<div id="sample-12">
<h2>Sample 12 - Reading shapefile and creating choropleth map from attribute data</h2>
<div>Using geostats and <a href="http://github.com/wavded/js-shapefile-to-geojson">js-shapefile-to-geojson</a> (by <a href="https://github.com/wavded">Marc Harter</a>) to create thematic maps. <a href="./sample_shp.html">Access demo page.</a></div>
</div>
<div id="footer"><em>geostats.js</em> - Copyright (c) 2011 Simon Georget - released under MIT license - <a href="https://github.com/simogeo/geostats" title="geostats Github page">Github page</a> | <a href="#top">Go to top</a></div>
</div>
</body>
</html>