WaterChart v4 v2

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>WaterChart I</title>

    <!--libs-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!--js-->
    <script>
      $(document).ready(function() {

        var $this = $('.thermometer');

        var height = 480;
        var width = 480;


        var svg = d3.select($this[0])
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr('class', 'liquidchart')
          .attr("transform", "translate(0,0)");

        var liquid = svg.append('g').attr('class', 'liquid');

        var xmin = -10;
        var xmax = 10;
        var dx = 1;
        var ymin = -1; // -6
        var ymax = 9; // 4
        var dy = 1;
        var aspect = (ymax - ymin) / (xmax - xmin);

        var grid = d3
          .range(ymin, dy, dy)
          .map(y => d3.range(xmin - dx, xmax + 2 * dx, dx).map(x => [x, y]));
        grid = grid.reduce(function(accumulated, currentValue) {
          return accumulated.concat(currentValue);
        }, []);

        var A0 = 0; // Height
        var A = A0;
        var alpha0 = 0.1; // Space between waves
        var alpha = alpha0;
        var beta0 = 0.7; // Speed
        var beta = beta0;
        var t0 = 0;
        var pts = grid.map(xy => p(A, alpha, beta, xy[0], xy[1], t0));
        var outline = pts.slice(pts.length - (xmax - xmin + 3));
        outline.push([xmax, ymin]);
        outline.push([xmin, ymin]);

        let R = 128;
        let B = 128;
        let color = `#${R.toString(16)}00${B.toString(16)}`;

        var xScale, yScale, rScale, pts_to_path;

        function setup() {
          liquid.selectAll('*').remove();
          var height = aspect * width;
          liquid.attr('height', height);
          xScale = d3
            .scaleLinear()
            .domain([xmin, xmax])
            .range([0, width]);
       ...