JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [
                    ['$', '$'],
                    ["\\(", "\\)"]
                ],
                processEscapes: true
            }
        });

    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({ TeX: { extensions: ["color.js"] }});
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>

<body>
    
    <input type="range" id="myRange" value="50" step="1">
    <input type="number" id="myText">
    <input type="range" id="myRange2" value="50" step="1">
    <input type="number" id="myText2">
    <br>
    <input type="radio" name="type" value="2">Two degrees of freedom and two anchor points
    <br>
    <input type="radio" name="type" value="1" checked>One degree of freedom and three anchor points
    <br>
    <br>
    <button onclick="setSlider()">Set slider to compression</button>

    <a href="https://github.com/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>

        <p id="demo"></p>
    <p id="demo2"></p>
    <br>
    <br>
    <svg id="visual" width="1000" height="500"></svg>
    <svg id="canvas" class="barGraph" width="500" height="100"></svg>
    <br>Hold to zoom out
    <button onmousedown="zoomOut()" onmouseup="restoreView()">Click me</button>

</body>

CSS

.axis path,
        .axis line {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        
        .axis text {
            font-family: 'Arial';
            font-size: 13px;
        }
        
        .tick {
            stroke-dasharray: 1, 2;
        }
        
        .bar {
            fill: FireBrick;
        }
        
        .barGraph {
            position: absolute;
            left: 330px;
            top: 25px;
        }

JavaScript

var slider = $("#myRange").val();
var slider2 = $("#myRange2").val();
var text;
var text2;var slider = $("#myRange").val();
var slider2 = $("#myRange2").val();
var text;
var text2;
var xthree;
var xtwo;
var xone;
var xzero;
var firstx = -1;
var firsty = -4;
var secondx = 2;
var secondy = 4;
var thirdx = 4;
var thirdy = 1;
var lineData = [];
var nodes = [];
var data = [];
var bigX;
var smallX;
var xRange = 1;
var yRange = 1;
var originx1 = firstx;
var originy1 = firsty;
var originx2 = secondx;
var originy2 = secondy;
var originx3 = thirdx;
var originy3 = thirdy;
var graphType = $("input[name=type]:checked").val();
var bars;
var barMARGINS;
var useZoom = $('#zoom').is(":checked");

//updates coefficients
function updateXs() {


    var pixelx1 = xRange(originx1) + nodes[0].x;
    var pixely1 = yRange(originy1) + nodes[0].y;
    var pixelx2 = xRange(originx2) + nodes[1].x;
    var pixely2 = yRange(originy2) + nodes[1].y;
    var pixelx3 = xRange(originx3) + nodes[2].x;
    var pixely3 = yRange(originy3) + nodes[2].y;

    //update vars to match coordinates
    firstx = xRange.invert(pixelx1);
    firsty = yRange.invert(pixely1);
    secondx = xRange.invert(pixelx2);
    secondy = yRange.invert(pixely2);
    thirdx = xRange.invert(pixelx3);
    thirdy = yRange.invert(pixely3);


    redoXs();
}

function roundNum(roundee, type) {
    // return (Math.round(roundee * 100)) / 100;
    var newNum = Math.abs(roundee),
        eVar = 0;

    //rounds scientifically
    while (newNum < 1 || newNum >= 10) {
        if (newNum == 0) {
            break;
        } else if (newNum < 1) {
            newNum *= 10;
            eVar--;
        } else if (newNum >= 10) {
            newNum /= 10;
            eVar++;
        }
    }

    newNum = (Math.round(newNum * 1000)) / 1000;


    //displays rounded num. for first number in equation
    if (type == 1) {
        //console.log("original number: " + roundee + " rounded: " + newNum + " evar: " + eVar);
        return newNum +...