JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='num1'></div><div id='num2'></div>
<br><div id='num3'></div>
<br><br><div id='num4'></div>

CSS

.n {
    width: 35px;
    display: inline-block;
    background-color: skyblue;
    vertical-align: bottom;
    text-align: center;
}

.n1 {
    background-color: skyblue;
}
.n2 {
    background-color: pink;
}

JavaScript

let array1 = [5.9, 0.2, 1.6, 3.6, 3.1, 2.5, 5.1, 0.4, 0.0, 7.2, 7.0, 7.1, 4.3];

// Turn 7.348946 into 7.35 or 7.3
function decimalPlaces(num, decimals){
    num = parseFloat(num);
    return num.toFixed(decimals);
}

/*
* Start with array of altitude numbers, 0.0 to 7.2.
* Stretch the scale to -10 to 10.
*/
function rescale(array){
    array.sort((a,b)=> a-b);
    let numbers = [];
    let html1 = "";
    let html2 = "";
    array.forEach(function(num){
        
        html1 += "<div class='n n1' style='height:" + (num * 10) + "px'>" + num + "</div>";
        
        // First double the range, to -7.2 to 7.2.
        // Then make lower numbers negative.
        // Then divide by 0.72.
        num = ((num * 2) - 7.2) / 0.72;
        
        //let k = num / 0.72;
        num = decimalPlaces(num, 1);
        numbers.push(num);
        
        if(num < 0){num = 0 - num;}
        let a = num * 10;
        html2 += "<div class='n n2' style='height:" + a + "px'>" + num + "</div>";
    });
    
    document.getElementById("num1").innerHTML = JSON.stringify(array);
    document.getElementById("num2").innerHTML = JSON.stringify(numbers);
    document.getElementById("num3").innerHTML = JSON.stringify(html1);
    document.getElementById("num4").innerHTML = JSON.stringify(html2);
}

rescale(array1);


/*
* Start with array of altitude numbers, 0.0 to 7.2.
* Stretch the scale to -10 to 10.
*/
function scaleAltitude(array){
    let numbers = [];
    array.forEach(function(num){
        // First double the range, to -7.2 to 7.2.
        // Then make lower numbers negative.
        // Then divide by 0.72.
        num = ((num * 2) - 7.2) / 0.72;
        num = decimalPlaces(num, 1);
        numbers.push(num);
        
    });
    return numbers;
}