JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
    <div id="drawingArea"></div>
    <div>TODO write content</div>
     <h4>Sample Count</h4>

    <div id="sampleCountSlider" class="slider"></div>
     <h4>Sine Frequency</h4>

    <div id="frequencySlider" class="slider"></div>
     <h4>Sine Amplitude</h4>

    <div id="amplitudeSlider" class="slider"></div>
     <h4>Noise Intensity</h4>

    <div id="noiseIntensitySlider" class="slider"></div>
     <h4>Stiffness</h4>

    <div id="stiffnessSlider" class="slider"></div>
    <input type="text" class="sliderValue" id="stiffnessValue" />
     <h4>Damper</h4>

    <div id="damperSlider" class="slider"></div>
    <input type="text" class="sliderValue" id="damperValue" />
    <input type="button" onclick="startSpring();" value="Start Spring" />
    <input type="button" onclick="stopSpring();" value="Stop Spring" />
    <input type="button" onclick="test();" value="log" />
    <div id="debugOutputBack"></div>
    <div id="debugOutputFront"></div>
</body>

CSS

svg {
          font: 10px sans-serif;
      }
      .axis path, .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
      }
      .x.axis line {
          shape-rendering: auto;
      }
      .line {
          fill: none;
          stroke: #000;
          stroke-width: 1.5px;
      }
      #debugOutputFront {
          position: absolute;
          left: 500px;
          top: 10px;
      }
      #debugOutputBack {
          position: absolute;
          left: 100px;
          top: 10px;
      }
      h4 {
          margin: 5px;
      }
      .slider {
          width : 70%;
      }

JavaScript

Suspension = function (suffix, offset, frameDelay) {
    this.suffix = suffix;

    this.frameDelay = frameDelay;
    this.frameRate = this.frameDelay / 1000;


    this.sprungMass = 1200;
    this.normalForce = this.sprungMass * 9.81;
    this.suspensionStiffness = 31000;
    this.suspensionDamperStiffness = 2000;
    this.unsprungMass = 350;
    this.tireSpringStiffness = 950000;
    this.tireDamperStiffness = 300;

    this.minLength = 0.3;
    this.maxLength = 1;

    //calculating initial compression
    this.springLength = this.normalForce / this.suspensionStiffness;
    this.sprungMassPosition = this.springLength;
    this.sprungMassVelocity = 0;

    this.xPos = 0 + offset;
    this.yPos = 0;

    this.stepSize = width / samples;

    this.debugText = "";

    this.floorHeight = this.lastFloorHeight = 0;

    this.counter = 0 + offset;

    this.scaleFactor = 100;

    this.addGraphics();
};

Suspension.prototype.update = function () {
    this.counter += 1;

    if (this.counter >= samples - 1) {
        this.counter = 0;
    }

    this.floorHeight = data[this.counter];

    var compression = (this.maxLength - this.springLength) - this.floorHeight; //

    var springForce = this.suspensionStiffness * compression;
    var damperForce = this.suspensionDamperStiffness * this.sprungMassVelocity;
    var normalForce = this.sprungMass * 9.81;

    var totalForce = (springForce - damperForce) - normalForce;

    var acceleration = totalForce / this.sprungMass;

    this.sprungMassVelocity += acceleration * this.frameRate;

    this.springLength += this.sprungMassVelocity * this.frameRate;

    this.sprungMassPosition = this.springLength;

    if (this.springLength <= this.minLength) {
        this.springLength = this.minLength;
        this.sprungMassPosition = this.minLength - this.floorHeight;
        this.sprungMassVelocity = 0;
    } else if (this.springLength >= this.maxLength) {
        this.springLength = this.maxLength - 0.001;
       ...