JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

JavaScript

(function() {
    var 
        pad = function(n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        },
        src = [
            {x1:   5, y1:   0, x2:  50, y2:  10},
            {x1:  90, y1:   0, x2: 110, y2:  10},
            {x1: 200, y1:   0, x2: 250, y2:  10},
            {x1:   5, y1:  20, x2:  40, y2:  30},
            {x1:  95, y1:  20, x2: 105, y2:  30},
            {x1: 230, y1:  20, x2: 250, y2:  30},
            {x1:   5, y1:  40, x2:  60, y2:  50},
            {x1:  85, y1:  40, x2: 115, y2:  50},
            {x1: 190, y1:  40, x2: 250, y2:  50}
        ];
    
        var result = _.chain(src)
            .map(function(r) { return { x1: r.x1, x2: r.x2 }; })                //flatten it vertically
            .sortBy(function(x) { return "" + pad(x.x1,7) + pad(x.x2,7); })     //sort it left to right
            .value();
    
        console.log(result);
        
}());