JSFiddle - React, Tailwind, and code Playground

by rohitrox

HTML

<img width="285" height="115" title="" alt=""...

CSS

body{
        font-family: arial;
    }
    .bolx{
        width: 220px;
        float: left;
        min-height: 200px;
        margin: 10px;
    }
    h3 small{
        color: gray;
    }

JavaScript

// A representation of a 2D Point.
        function Point(label, lat, lon) {

            this.label = label;
            this.x = (lon + 180) * 360;
            this.y = (lat + 90) * 180;

            this.distance=function(that) {
                var dX = that.x - this.x;
                var dY = that.y - this.y;
                return Math.sqrt((dX*dX) + (dY*dY));
            }

            this.slope=function(that) {
                var dX = that.x - this.x;
                var dY = that.y - this.y;
                return dY / dX;
            }

            this.toString=function() {
                return this.label + ": "+ lat + " , " + lon;
            }
        }

        // A custom sort function that sorts p1 and p2 based on their slope
        // that is formed from the upper most point from the array of points.
        function pointSort(p1, p2) {
            // Exclude the 'upper' point from the sort (which should come first).
            if(p1 == upper) return -1;
            if(p2 == upper) return 1;

            // Find the slopes of 'p1' and 'p2' when a line is 
            // drawn from those points through the 'upper' point.
            var m1 = upper.slope(p1);
            var m2 = upper.slope(p2);

            // 'p1' and 'p2' are on the same line towards 'upper'.
            if(m1 == m2) {
                // The point closest to 'upper' will come first.
                return p1.distance(upper) < p2.distance(upper) ? -1 : 1;
            }

            // If 'p1' is to the right of 'upper' and 'p2' is the the left.
            if(m1 <= 0 && m2 > 0) return -1;

            // If 'p1' is to the left of 'upper' and 'p2' is the the right.
            if(m1 > 0 && m2 <= 0) return 1;

            // It seems that both slopes are either positive, or negative.
            return m1 > m2 ? -1 : 1;
        }

        // Find the upper most point. In case of a tie, get the left most point.
        function upperLeft(points) {
            var top =...