JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/flot/flot/master/jquery.flot.js"></script>
FREQUENCIES
<div id="freq" style="width:100%;height:300px"></div>
<br>COSINE directly using the theoretical formula
<div id="signal" style="width:100%;height:300px"></div>
<br>COSINE using a phase accumulator
<div id="signal2" style="width:100%;height:300px"></div>

JavaScript

$(function() {
  var sampleRate = 44100;
  var signal = new Array(sampleRate);
  var signal2 = new Array(sampleRate);
  var freq = new Array(sampleRate);

  // --- Calculating the frequencies
  var y1 = 50;
  var x1 = sampleRate / 2;
  var slope = y1 / x1;

  for (var i = 0; i < sampleRate / 2; i++) {
    freq[i] = slope * i;
  }
  for (var i = sampleRate / 2; i < sampleRate; i++) {
    freq[i] = y1;
  }

  // --- Using the theoretical formula
  for (var i = 0; i < sampleRate; i++) {
    signal[i] = Math.cos(freq[i] * i * 2 * Math.PI / sampleRate);
  }

  // --- Using a phase accumulator
  var ph = 0;
  for (var i = 0; i < sampleRate; i++) {
    ph += freq[i] * 2 * Math.PI / sampleRate
    signal2[i] = Math.cos(ph);
  }

  // --- ploting the whole stuff
  var plot;

  function plotTable(elem, data) {
    var plotData = [];
    for (var i = 0; i < data.length; i++) plotData.push([i, data[i]]);
    plot = $.plot(elem, [{
      data: plotData,
      label: "output"
    }], {
      series: {
        lines: {
          show: true
        },
        points: {
          show: false
        }
      },
      grid: {
        hoverable: true,
        clickable: true
      },
      yaxis: {
        min: Math.min.apply(this, data) - 1,
        max: Math.max.apply(this, data) + 1
      }
    });
  };
  plotTable($("#freq"), freq);
  plotTable($("#signal"), signal);
  plotTable($("#signal2"), signal2);
});