<!-- ############################################################################################################################## -->

<!-- # John Wiley & Sons, Inc. # -->

<!-- # # -->

<!-- # Book: Algorithms in Bioinformatics: Theory and Implementation # -->

<!-- # Author: Dr. Paul A. Gagniuc # -->

<!-- # # -->

<!-- # Institution: # -->

<!-- # University Politehnica of Bucharest # -->

<!-- # Faculty of Engineering in Foreign Languages # -->

<!-- # Department of Engineering in Foreign Languages # -->

<!-- # # -->

<!-- # Area: European Union # -->

<!-- # Date: 04/01/2021 # -->

<!-- # # -->

<!-- # Cite this work as: # -->

<!-- # Paul A. Gagniuc. Algorithms in Bioinformatics: Theory and Implementation. John Wiley & Sons, 2021, ISBN: 9781119697961. # -->

<!-- # # -->

<!-- ############################################################################################################################## -->

<canvas id="bio" width="900" height="200"></canvas>

<canvas id="letter" width="370" height="410" style="display: none;">

</canvas>

<div id="print"></div><br>

<script>

window. {

//MAKE LOGO FROM MATRICES

c = '|G\t0.5\t0.2\t0.5\t1\t0\t0.5\t0.1\t0.8\t0.1' +

'|A\t0.3\t0.4\t0.2\t0\t0\t0.5\t0.7\t0.1\t0' +

'|T\t0.2\t0.3\t0.2\t0\t1\t0\t0\t0.1\t0.7' +

'|C\t0.4\t0.1\t0.1\t0\t0\t0\t0.2\t0\t0.2';

var msg;

var tmp;

tmp = load(c);

msg = 'Unordered:<br>' + SMC(tmp[0])+'<br>';

var M = tmp[0];

var max = tmp[1];

var a = [];

var t = M[0].length;

var canvas = document.getElementById('bio');

var canvasl = document.getElementById('letter');

var ctl = canvasl.getContext('2d');

var w = canvas.width;

var h = canvas.height - 5;

var wl = canvasl.width;

var hl = canvasl.height;

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

for(var j=1; j<t; j++){

//ORDER VALUES ON EACH COLUMN

for(var k=0; k<M.length; k++){

a[k]=[];

a[k][0] = M[k][j].split('|')[0];

a[k][1] = M[k][j].split('|')[1];

}

a = iSort(a);

for(var k=0; k<M.length; k++){

M[k][j] = a[k][0] + '|' + a[k][1];

}

// LOGO

var iw = w/(t-1);

var x = (j-1)*iw;

for (var u=0; u<a.length; u++)

{

ctl.imageSmoothingQuality = 'high';

ctl.clearRect(0, 0, wl, hl);

ctl.font = 'bold 540px Arial';

var cl = 'black';

if(a[u][1]=='G'){cl='#f4244c';}

if(a[u][1]=='T'){cl='#607b46';}

if(a[u][1]=='A'){cl='#3464ac';}

if(a[u][1]=='C'){cl='#dcb655';}

//if(a[u][1]=='G'){cl='#fcaf07';}

//if(a[u][1]=='T'){cl='#d50000';}

//if(a[u][1]=='A'){cl='#07d607';}

//if(a[u][1]=='C'){cl='#0909c8';}

ctl.fillStyle = cl;

var ltr = ctl.measureText(a[u][1]).width;

ctl.fillText(a[u][1], (wl/2)-(ltr/2), hl-5);

var y = h-(h/max)*a[u][0];

if(u>0){var ih = h-((h/max)*a[u-1][0])-y;}

if(u==0){var ih = h-y;}

ctx.imageSmoothingQuality = 'high';

ctx.drawImage(canvasl, x, y, iw, ih);

}

}

}

msg += 'Ordered by columns:<br>' + SMC(M);

document.getElementById('print').innerHTML = msg;

}

//SORT

function iSort(a) {

var n = a.length;

for (var i = 1; i < n; i++) {

let n = a[i][0];

let j = i-1;

while ((j > -1) && (n < a[j][0])) {

a[j+1][0] = a[j][0];

var t = a[j+1][1];

a[j+1][1] = a[j][1];

a[j][1]=t;

j--;

}

a[j+1][0] = n;

}

return a;

}

//LOAD MATRICES FROM STRINGS

function load(t){

var n = [];

var m = [];

var L = [];

m = t.split('|');

var max = 0;

for(var i=1; i<m.length; i++) {

L[i-1]=[];

n = m[i].split('\t');

for(var j=0; j<n.length; j++){

L[i-1][j]=n[j];

if(j>0){

if(max<=L[i-1][j]){max=L[i-1][j];}

L[i-1][j]+='|'+L[i-1][0];

}

}

}

return [L, max];

}

// SHOW MATRIX CONTENT

function SMC(m) {

var r = "<table border=1>";

for(var i=0; i<m.length; i++) {

r += "<tr>";

for(var j=0; j<m[i].length; j++){

r += "<td>"+m[i][j]+"</td>";

}

r += "</tr>";

}

r += "</table>";

return r;

}

</script>