JSFiddle - React, Tailwind, and code Playground

HTML

<title>Compression</title>

<body>
    <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.4.1/d3.min.js"></script>
    <input type="range" id="myRange" value="50" step="2.5">



    <p id="demo"></p>
    <br>
    <br>
    <svg id="visual" width="1000" height="500"></svg>


    <svg id="canvas" width="500" height="500"></svg>

</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;
        }

JavaScript

var slider = $("#myRange").val();
var slider2 = $("#myRange2").val();
var xthree;
var xtwo;
var xone;
var xzero;
var firstx = -1;
var firsty = 1;
var secondx = 2;
var secondy = 4;
var thirdx = 4;
var thirdy = 5;
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;

//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 = xRange.invert(pixely3);


    redoXs();
}

function redoXs() {
    //always a dynamic variable
    xone = (slider ) / 50;
    //xzero = (slider2 - 50) / 50;
    /*
        //variables for use in equation
        var varK = (firsty - secondy) / (Math.pow(firstx, 3) - Math.pow(secondx, 3));
        var varL = (firstx - secondx) / (Math.pow(firstx, 3) - Math.pow(secondx, 3));
        var varM = (Math.pow(firstx, 2) - Math.pow(secondx, 2)) / (Math.pow(firstx, 3) - Math.pow(secondx, 3));

        var varAlpha = (firsty - (varK * Math.pow(firstx, 3))) / (Math.pow(firstx, 2) - Math.pow(firstx, 3) * varM);

        var varBeta = 1 / (Math.pow(firstx, 2) - Math.pow(firstx, 3) * varM);

        var varDelta = (firstx - Math.pow(firstx, 3) * varL) / (Math.pow(firstx, 2) - Math.pow(firstx, 3) * varM);
    */
    //variables for equation

    xzero = (thirdy - (firsty * Math.pow(thirdx, 3) / Math.pow(firstx, 3)) + (secondy * Math.pow(thirdx, 3) / firstx) -...