JSFiddle - React, Tailwind, and code Playground

HTML

<title>Compression</title>
    <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>

<body>

    <input type="range" id="myRange" value="50" step="2.5">



    <p id="demo"></p>
    <br>
    <br>
    <svg id="visual" width="1000" height="500"></svg>1
    
       
    <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 xtwo;
var xone;
var xzero;
var firstx = -1;
var firsty = 1;
var secondx = 2;
var secondy = 4;
var lineData = [];
var nodes = [];

//updates coefficients
function updateXs() {
    xtwo = (75 - slider) / 50;
    xone = (slider - 25) / 50;
    xzero = (slider - 25) / 25;
}

//gets corresponding y from x and coefficients
function getY(xval) {
    return (xval * xval * xtwo + xval * xone + xzero);
}

function displayVals() {}

function updateLineData() {
    //resets and fills points
    lineData = [];
    for (i = (firstx - 1); i < (secondx + 2); i = i + .1) {
        lineData.push({
            x: i,
            y: getY(i)
        });
    }

}
//makes dots for static points
function makeDots(xvalue, xvalue2) {
    nodes = [{
        x: xvalue,
        y: getY(xvalue)
            }, {
        x: xvalue2,
        y: getY(xvalue2)
            }];

}

//function makeLine() {}

$(document).ready(function () {
    updateXs();
    updateLineData();
    displayVals();



    var vis = d3.select('#visual'),
        WIDTH = 1000,
        HEIGHT = 500,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
            return d.x;
        }), d3.max(lineData, function (d) {
            return d.x;
        })]),
        yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
            return d.y - 1;
        }), d3.max(lineData, function (d) {
            return d.y;
        })]),


        //setup x
        xAxis = d3.svg.axis()
        .scale(xRange)
        .tickSize(5)
        .tickSubdivide(true),

        //setup y
        yAxis = d3.svg.axis()
        .scale(yRange)
        .tickSize(5)
        .orient("left")
        .tickSubdivide(true);


    vis.append("svg:g")
        .attr("class", "x...