Fake distribution data for visualization [closed]

Question

I want to create some "mock data" for my visualization project (in JavaScript).

Preferably, I'd like to allocate a total of x units to y different groups with a z step interval according to some probability distribution function, i.e. normal or log-normal.

Example:

Allocate exactly 100 units to the groups 0-5000, 5000-10000, [...], 75000-80000 using a normal density function.

Should render something like this:

binNames = [ "0-5000", "5000-10000", [...] ]
binData = [ 0,0,0,1,2,10,12,14,12,10 [...] ] //SUM = 100

(If I could introduce some skewness with a simple seed parameter, that would be a bonus.)

Answer 1

The D3.js library has a useful tool for this, d3.random.normal (reference, code). Even if you aren't using D3, you can copy the function into your own code. It returns a generator function which will produce a random number with a normal distribution based on the mean and standard deviation you provide.

Using that function, you could make some random data in the format you want, like this:

// data generator
var bins = 16,
    target = 100,
    step = 5000,
    max = bins * step,
    stddev = max * .15,
    data = [],
    generator = d3.random.normal(max/2, stddev),
    x=0, y=0;

// set up bins
while (x++ < bins) data.push(0);
// add numbers
while (y++ < target) {
    // get a new number
    var number = generator();
    // don't allow numbers outside the desired range
    number = ~~Math.max(0, Math.min(number, max));
    // increment the bin
    bin = ~~(number / max * bins);
    data[bin]++;
}

I made a little animated histogram as an example: http://bl.ocks.org/2034281

Answer 2

The algorithm you are looking for is a kd-tree or a treemap. A kd-tree reduce the dimensional complexity. There is a free jquery treemap avsilable for download.