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 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) / 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 = ((varK - xone * varL - varAlpha + varDelta * xone) * Math.pow(thirdx, 3) + (varAlpha - varDelta * xone) * Math.pow(thirdx, 2) + xone * thirdx) / (varBeta * Math.pow(thirdx, 3) - varBeta * Math.pow(thirdx, 2) + 1);
   ...