Given min-value, max-value and mean, can I elegantly generate data to fit a bell curve?

Question

Let's say I have an array of objects.

I have 3 values associated with this array: min-height, max-height and average-height.

I want to assign a height to each object so that:

• No object's height is less than min-height
• No object's height is greater than max-height
• The mean of all objects' heights is average-height.

Essentially I am looking to generate a height distribution like this:

The heights have to be pseudo-random - that is to say, I want to be able to get a height for each object by feeding the result of a random number generator into a function and getting the height returned.

My solution at the moment is to split my range of acceptable heights (all between min-height and max-height) into a series of bins and assign a probability to each bin. Once a bin is selected, I choose a height from within that range at random.

This is not an ideal solution as it is inelegant, clunky, and produces a stepped curve as opposed to a smooth one.

Here is my current code for producing the bins:

var min_height = 10
var max_height = 100
var avg_height = 30

var scale = SCALE ()
    .map_from([min_height, avg_height, max_height])
    .map_to([-Math.PI, 0, Math.PI])

var range = max_height - min_height;

var num_of_bins = 10
var bin_size = range/num_of_bins;

var bins = []
var sum_of_probability = 0

while (bins.length < num_of_bins) {
    var bin = {};
    bin.min = min_height + (bins.length*bin_size);
    bin.max = bin.min + bin_size;
    bin.mid = bin.min + (bin_size/2);

    bin.probability = Math.cos(scale(bin.mid))+1
    sum_of_probability += bin.probability;

    bins.push(bin)
}

var i;
var l = bins.length;
for (i=0; i<l; i++) {
    bins[i].probability /= sum_of_probability

    if (bins[i-1]) {
        bins[i].cumulative_probability = bins[i-1].cumulative_probability + bins[i].probability;
    }
    else {
        bins[i].cumulative_probability = bins[i].probability;
    }
}

Essentially I would love to be able to generate pseudo-random data to roughly fit a curve in an elegant way, and I am not sure if this is possible in javascript. Let me know if you think this is do-able.

Answer 1

I borrowed the Gaussian "class" from here: html5 draw gaussian function using bezierCurveTo.

The stuff that's really relevant to you is the getPoints() function. Basically, given a min, max and average height, getPoints() will return an array with a smooth gaussian curve of values. You can then take those points and scale them over whatever range you would need (just multiply them).

The numSteps value of generateValues (which getPoints has hard-coded to 1000) controls how many values you get back, giving you a better "resolution". If you did something like 10, you'd have the values for something like your bar graph. Given 1000 gives a nice smooth curve.

Hope this helps.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 200;

var Gaussian = function(mean, std) {
  this.mean = mean;
  this.std = std;
  this.a = 1/Math.sqrt(2*Math.PI);
};

Gaussian.prototype = {
  addStd: function(v) {
    this.std += v;
  },

  get: function(x) {
    var f = this.a / this.std;
    var p = -1/2;
    var c = (x-this.mean)/this.std;
    c *= c;
    p *= c;
    return f * Math.pow(Math.E, p);
  },

  generateValues: function(start, end, numSteps = 100) {
    var LUT = [];
    var step = (Math.abs(start)+Math.abs(end)) / numSteps;
    for(var i=start; i<end; i+=step) {
      LUT.push(this.get(i));
    }
    return LUT;
  }
};

const getPoints = () => {
  const minHeight = 0;
  const maxHeight = 200;
  const averageHeight = 50;

  const start = -10;
  const end = 10;
  const mean = averageHeight / (maxHeight - minHeight) * (end - start) + start;
  const std = 1;
  
  const g = new Gaussian(mean, std);
  return g.generateValues(start, end, 1000);
}

const draw = () => {
  const points = getPoints();

  // x-axis
  ctx.moveTo(0, canvas.height - 20);
  ctx.lineTo(canvas.width, canvas.height - 20);
  
  // y-axis
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  
  ctx.moveTo(0, canvas.height - 20);
  console.log(points);
  for (let i = 0; i < points.length; i++) {
    ctx.lineTo(i * (canvas.width / points.length),      
      canvas.height - points[i] * canvas.height - 20);
  }
  
  ctx.stroke();
};

draw();

body {
  background: #000;
}

canvas {
  background: #FFF;
}

<canvas></canvas>