JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<canvas id="canvas" width='1200' height='500'></canvas>

<div style="color:green">lakhovski clinical</div>
<div style="color:orange">lakhovski portable</div>
<div style="color:purple">average</div>

JavaScript

var data = {


  //need 50cm normalization
  lvclinicallr_green: normSq(norm50cm([3, 6, 11, 18, 24, 31, 38, 47, 57, 68, 85, 107]), 1.0),
  lvclinicalrr_green: normSq(norm50cm([7, 12, 20, 28, 37, 48, 60, 73, 86, 104, 128, 158]), 1.0),
  lportables_orange: normSq(norm50cm([8, 16, 30, 47, 65, 85, 109, 136, 168, 198, 254, 322]), 1.0)
}

var averagex = [ 0 ];
var averagey = [ 0 ];

for( var i = 1; i<12; i++){
    var avr = _.reduce(data, (acc, set) => set.y[i] + acc, 0);
    avr /= 3;

    averagex.push(i);
    averagey.push(avr)
}
data.average_purple = { x: averagex, y: averagey };
console.log(data)

function norm50cm(seq) {
  const coef = 50.0 / seq[seq.length - 1];
  return _.map(seq, v => parseFloat((v * coef).toFixed(2)))
}

function normSq(seq, xcoef) {
  var ys = [0],
    xs = [0];
  _.each(seq, (v, i) => {
    ys.push(seq[i]);
    i++;
    xs.push(i * 1.0 * xcoef);
  })
  return {
    x: xs,
    y: ys
  }
}

/*_.each(data, (seq, name) => {
 document.write(`${name}:${JSON.stringify(seq, undefined, 2)}<br>`)
})*/
console.log(data);

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
_.each(data, (seq, name) => {

  ctx.beginPath();
  ctx.moveTo(0, 0);
  for (var i = 0; i <= 12; i++) {
    for( var k = 0; k <=10; k++ ){
      var x = i + k * 0.1;
      var y = spline(x, seq.x, seq.y);
    
      ctx.lineTo(x*80, 10*y);
    }
   }
  ctx.strokeStyle=name.split('_')[1];
  ctx.stroke();
});


for( var y = 0; y <= 50; y++ ){
  ctx.beginPath();
ctx.moveTo(0, y*10.0);
ctx.lineTo(1200, y*10.0);
ctx.strokeStyle = 'gray';
ctx.stroke();
ctx.font="10px Georgia";
ctx.fillText(y, y*19.0 , y*10.0);
}

for( var x = 1; x <= 12; x++ ){
ctx.stroke();
ctx.font="10px Georgia";
ctx.fillText(data.average_purple.y[x].toFixed(2), x*80, 400 );
}

for( var i = 0; i <= 12; i++ ){
  ctx.beginPath();
ctx.moveTo(i*80, 0);
ctx.lineTo(i*80, 500);
ctx.strokeStyle = 'red';
ctx.stroke()
ctx.font="10px Georgia";
ctx.fillText(i,i*80,450);
}

function spline(x, xs, ys) {
  var ks...