JSFiddle - React, Tailwind, and code Playground

by gamea12

HTML

<!DOCTYPE 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>



    <br>
    


    <!---div id="math">$$$$</div--->
    <div id="demo"></div>

    <p id="demo2"></p>
    <br>
    The second dot's x is:
    <div id="number"></div>
    <br>
    <svg id="visual" width="1000" height="500"></svg>
    <br>Check to zoom out
    <input type="checkbox" id="zoom">
    <script src='./Compressive%20script.js'></script>
   
    <br>
    <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 >Set slider to compression</button>
    <br> Credit to http://stemblab.github.io/cs-intro/ for base idea
</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 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 useZoom = $('#zoom').is(":checked");
var rangeStandard = 100;

//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 redoXs() {
    //always a dynamic variable 
    xzero = (slider) * (rangeStandard / 50) - (rangeStandard);

    //vars for use in equation
    var varM = (firsty / Math.pow(firstx, 3));
    var varN = 1 / firstx;
    var varP = 1 / (Math.pow(firstx, 2));
    var varQ = 1 / (Math.pow(firstx, 3));
    var varZ = 1 / (Math.pow(secondx, 2) - varN * Math.pow(secondx, 3));

    var varAlpha = (varP * Math.pow(secondx, 3) - secondx) * varZ;
    var varBeta = (varQ * Math.pow(secondx, 3) - 1) * varZ;
    var varGamma = (-varM * Math.pow(secondx, 3) + secondy) * varZ;

    var varI = (Math.pow(thirdx, 2) * (thirdx * (varM - varN * varGamma) + varGamma));
    var varJ = (thirdx + Math.pow(thirdx, 2) * (varAlpha - thirdx * (varP + varAlpha * varN)));
    var varK =...