JSFiddle - React, Tailwind, and code Playground

HTML

Input: <span id='input'>run to see result</span><br/>
Result: <span id='result'>run to see result</span>

JavaScript

class Test {
  constructor(data) {
    let self = this;
    this.data = data;
    this.magnitude = 10;

    const randomizer = max => {
      return Math.floor(
      	Math.random() * Math.floor(max)
      );
    };

    this.plotTwistData = this.data.map(
    	(x) => randomizer(x) * this.magnitude
    );
    this.plotTwistMoment = randomizer(
    	data.length
    );

    return new Proxy(this, {
      get(target, prop) {
        if (Number(prop) == prop &&
        			!(prop in target)
          ) {
          if (prop < self.plotTwistMoment) {
              return self.data[prop];
          } else {
              return self.plotTwistData[prop];
          }
        }
        return target[prop];
      }
    });
  }

}

const input = [1,2,3,4,5,6,7,8,9];
const test = new Test(input);

const inputText = input.reduce(
  	(item1, item2) => `${item1}, ${item2}`
  );
const resultText = input.map(
		(item, index) => test[index]
  )
	.reduce(
  	(item1, item2) => `${item1}, ${item2}`
  );
  
document.getElementById('input').innerHTML
	= inputText;
document.getElementById('result').innerHTML
	= resultText;