fix typos and change headers

index.html

@@ -14,7 +14,7 @@
     <title>Hull.js by Andrii Heonia</title>
     <script src="./javascripts/hull.js"></script>
     <script src="./javascripts/dbscan.js"></script>
-    <script src="./javascripts/dataUa.js"></script>
+    <script src="./javascripts/dataTorch.js"></script>
     <script src="./javascripts/dataChars.js"></script>
     <script src="./javascripts/dataHorse.js"></script>
     <script src="./javascripts/dataGeo.js"></script>
@@ -38,18 +38,18 @@ <h2></h2>
 
 
 <!-- Example 1 -->
-<h3><a name="ex1" class="anchor" href="#ex1"><span class="octicon octicon-link"></span>Ukrainian border</a></h3>
-<p>To receive concave hull (polygon) by the set of points just call <code>hull</code> function:</p>
-<pre><code>var pointset = [[168, 180], [168, 178], [168, 179], ...];
+<h3><a name="ex1" class="anchor" href="#ex1"><span class="octicon octicon-link"></span>Basic Usage</a></h3>
+<p>To get concave hull (polygon) by a set of points just call <code>hull</code> function:</p>
+<pre><code>var pointset = [[90, 187], [91, 189], [92, 186], [93, 190], ...];
 var pts = hull(pointset, 10);
 // ... draw pts</code></pre>
 <p>
-  <canvas id="canv1" width="400" height="250"></canvas>
+  <canvas id="canv1" width="190" height="400"></canvas>
   <script>
   function example1() {
     var c = document.getElementById('canv1'),
         ctx = c.getContext('2d'),
-        pointset = dataUa;
+        pointset = dataTorch;
 
     // draw all points
     ctx.fillStyle = "black";
@@ -79,17 +79,17 @@ <h3><a name="ex1" class="anchor" href="#ex1"><span class="octicon octicon-link">
 
 
 <!-- EXAMPLE 1.1 -->
-<p>You can adjust concavity of the hull via 2nd param:</p>
-<pre><code>var pointset = [[168, 180], [168, 178], [168, 179], ...];
+<p>You can adjust concavity of a hull via 2nd param:</p>
+<pre><code>var pointset = [[90, 187], [91, 189], [92, 186], [93, 190], ...];
 var pts = hull(pointset, 80);
 // ... draw pts</code></pre>
 <p>
-  <canvas id="canv1_1" width="400" height="250"></canvas>
+  <canvas id="canv1_1" width="190" height="400"></canvas>
   <script>
   function example1_1() {
     var c = document.getElementById('canv1_1'),
         ctx = c.getContext('2d'),
-        pointset = dataUa;
+        pointset = dataTorch;
 
     // draw all points
     ctx.fillStyle = "black";
@@ -118,8 +118,8 @@ <h3><a name="ex1" class="anchor" href="#ex1"><span class="octicon octicon-link">
 
 
 <!-- Example 2 -->
-<h3><a name="ex2" class="anchor" href="#ex2"><span class="octicon octicon-link"></span>Big horse</a></h3>
-<p>Hull.js also works well with the large data sets. In this example more than 52K points, <code>concavity = 20</code>. Execution time in your browser: <span id="horseExecTime"></span> ms.</p>
+<h3><a name="ex2" class="anchor" href="#ex2"><span class="octicon octicon-link"></span>Performance</a></h3>
+<p>Hull.js also works well with large data sets. This example has more than 52K points, <code>concavity = 20</code>. Execution time in your browser: <span id="horseExecTime"></span> ms.</p>
 
 <p>
   <canvas id="canv2" width="960" height="750"></canvas>
@@ -164,8 +164,8 @@ <h3><a name="ex2" class="anchor" href="#ex2"><span class="octicon octicon-link">
 
 
 <!-- Example 3 -->
-<h3><a name="ex3" class="anchor" href="#ex3"><span class="octicon octicon-link"></span>Chars</a></h3>
-<p>If you want to get hulls of the point set that looks like a multipolygon, then you need to call <code>hull</code> function for the each subset (for each polygon). In this example we use LukaszKrawczyk's <a href="https://github.com/LukaszKrawczyk/clustering" target="_blank">density based clustering library</a> (but you can use any other implementation) to split one large point set to the several groups, after that we recive hulls for each of them:</p>
+<h3><a name="ex3" class="anchor" href="#ex3"><span class="octicon octicon-link"></span>Multiple Shapes</a></h3>
+<p>If you want to get hulls of a point set that looks like a multipolygon, then you need to call <code>hull</code> function for each subset (for each polygon). In this example we use LukaszKrawczyk's <a href="https://github.com/LukaszKrawczyk/clustering" target="_blank">density based clustering library</a> (but you can use any other implementation) to split one large point set to several groups, after that we get hulls for each one:</p>
 <pre><code>var clusters,
     dbscan = new DBSCAN(),
     pointset = [[14, 18], [22, 19], [23, 20], ...];
@@ -233,7 +233,7 @@ <h3><a name="ex3" class="anchor" href="#ex3"><span class="octicon octicon-link">
 
 <!-- Example 3_1 -->
 
-<p>Otherwise (without clustering) you'll receive something like that:</p>
+<p>Otherwise (without clustering) you'll get something like this:</p>
 <pre><code>var pts = hull(pointset, 30);
 // ... draw pts
 </code></pre>
@@ -270,7 +270,7 @@ <h3><a name="ex3" class="anchor" href="#ex3"><span class="octicon octicon-link">
 <!-- END: Example 3_1 -->
 
 <!-- Example 4 -->
-<h3><a name="ex4" class="anchor" href="#ex4"><span class="octicon octicon-link"></span>Geo points</a></h3>
+<h3><a name="ex4" class="anchor" href="#ex4"><span class="octicon octicon-link"></span>Geo Points</a></h3>
 <p>If your point format differs from the [x, y] then you can provide a custom format pattern:</p>
 <pre><code>var pointset = [
     { lng: -0.2067, lat: 51.4911 },
@@ -303,7 +303,7 @@ <h3><a name="ex4" class="anchor" href="#ex4"><span class="octicon octicon-link">
 
 <!-- Example 5 -->
 <h3><a name="ex5" class="anchor" href="#ex5"><span class="octicon octicon-link"></span>Geo points on the globe</a></h3>
-<p>All calculations in hull.js based on the cartesian coordinate system. If you use it for the calculation and data visualization on the global map please don't forget that globe has the shape of geoid, latitude and longitude are angles (not points with X and Y), and after projection we have some map distortion. So, for the better accuracy you need to convert latitudes and longitudes to cartesian coordinates, calculate concave hull and then convert points back to the geo points. For example (using <a href="http://leafletjs.com/" target="_blank">Leaflet</a> library):</p>
+<p>All calculations in hull.js are based on cartesian coordinate system. If you use it for calculation and data visualization on the global map, don't forget that globe has the shape of geoid, latitude and longitude are angles (not points with X and Y), and after projection we have some map distortion. So, for the better accuracy you need to convert latitudes and longitudes to cartesian coordinates, calculate concave hull and then convert points back to the geo points. For example (using <a href="http://leafletjs.com/" target="_blank">Leaflet</a> library):</p>
 <pre><code>var pointset = [
     { lng:-20, lat:90 },
     { lng:-20, lat:80 },
@@ -345,7 +345,7 @@ <h3><a name="ex5" class="anchor" href="#ex5"><span class="octicon octicon-link">
     </div>
     <footer>
       <div class="inner">
-        &copy; 2014-2024 <a href="https://www.linkedin.com/in/andriiheonia" target="_blank">Andrii Heonia</a>
+        &copy; 2014-2024 Andrii Heonia
       </div>
     </footer>
     <script>

javascripts/hull.js

@@ -154,8 +154,8 @@
     module.exports = grid;
     },{}],4:[function(require,module,exports){
     /*
-     (c) 2014-2022, Andrii Heonia
-     Hull.js is a JavaScript library for concave hull generation by the set of points.
+     (c) 2014-2024, Andrii Heonia
+     Hull.js, a JavaScript library for concave hull generation by the set of points.
      https://github.com/AndriiHeonia/hull
     */