JSFiddle - React, Tailwind, and code Playground

by kodisha

HTML

<div>
    <table id="table" style="">
        <tr>
            <th>Chomosome</th>
            <th>Zoom Level</th>
            <th>Data points</th>
            <th>Base pairs merged</th>
        </tr>
    </table>
</div>

CSS

table{
    border-collapse:collapse;
    font:normal 12px Arial, Helvetica, Sans-serif;    
}

td, th{
    border:solid 1px #f1f1f1;
    padding:4px;
}

JavaScript

Number.prototype.format = function() {
    return this.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").replace('.0','');
};

var chromosomes= [
    {name: 'chr1', size: 249250621},
    {name: 'chr2', size: 243199373},
    {name: 'chr3', size: 198022430},
    {name: 'chr4', size: 191154276},
    {name: 'chr5', size: 180915260},
    {name: 'chr6', size: 171115067},
    {name: 'chr7', size: 159138663},
    {name: 'chr8', size: 146364022},
    {name: 'chr9', size: 141213431},
    {name: 'chr10', size: 135534747},
    {name: 'chr11', size: 135006516},
    {name: 'chr12', size: 133851895},
    {name: 'chr13', size: 115169878},
    {name: 'chr14', size: 107349540},
    {name: 'chr15', size: 102531392},
    {name: 'chr16', size: 90354753},
    {name: 'chr17', size: 81195210},
    {name: 'chr18', size: 78077248},
    {name: 'chr19', size: 59128983},
    {name: 'chr20', size: 63025520},
    {name: 'chr21', size: 48129895},
    {name: 'chr22', size: 51304566},
    {name: 'chrX', size: 155270560},
    {name: 'chrY', size: 59373566},
    {name: 'chrM', size: 16569}
];

var targetResolution = 2000;
var pows = [1,3,10,100,1000,10000,100000]  

for(var j = 0;j < chromosomes.length; j++){
    
    var chromosome = chromosomes[j];
  
    
    var totalLen = chromosome.size;
    var x0 = 1;
    var x1 = totalLen / targetResolution;
    var y0 = targetResolution;
    var y1 = totalLen;
    
    
    var step = 5;
    
    
    console.log(chromosome.name, '-----------------');
    for(var i = 0;i < pows.length; i++){
        
        
        var currentPow = pows[i];
        
        var points = y0+(y1-y0)*((currentPow-x0)/(x1-x0))
        if(i=== (pows.length -1) && points < totalLen){
            points = totalLen;
        }
        
        if(points >= totalLen){
            points = totalLen;
        }
    
        var basePairsTakenIntoCalc = Math.round(totalLen / points);    
        console.log(currentPow, Math.round(points), basePairsTakenIntoCalc);
        
        var...