Question

I am drawing a histogram using an array of data (counts) and an array to represent the histogram. I want to zoom into the data so that the number of points in the histogram is typically fewer than the data points that I have.

I need to map the data array to the histogram array such that when the histogram is exactly half the length of the data then each point is the sum of two data points, when it is 1.5 times then each histogram point is the sum of one data point plus half of the value of the next. Etc.

E.g

Data |2|3|1|2|2|3|4|1|
Hist | 5 | 3 | 5 | 5 |

Data | 2| 3| 1| 2| 2| 3| 4| 1|
Hist | 3.5|2.5| 3 |  4 | 4.5 |    

It seems like it could be a common problem (particularly for zooming images) but I have not found a library or function to do it. Does such as JavaScript thing exist?

Answer 1

This seems to be a pretty straight-forward algorithm:

function get_hist(data, factor) {
    var hist = new Array();

    for(i=0; i<data.length; i+=factor) {
        el = get_hist_elem(data, i, factor);
        if(!isNaN(el))
            hist.push(el);
    }

    alert(hist.join(", "));
    return hist;
}

function get_hist_elem(data, start_pos, factor) {
    var int_start = (Math.floor(start_pos) == start_pos ? start_pos : Math.floor(start_pos) + 1);
    if(int_start > data.length)
        return NaN;
    var part_start = int_start - start_pos;

    var end_pos = start_pos + factor;
    var int_end = (Math.floor(end_pos) == end_pos ? end_pos : Math.floor(end_pos));
    var part_end = end_pos - int_end;

    var val = 0;
    for(j=int_start; j<int_end; j++)
        val += data[j];
    if(part_start > 0)
        val += data[int_start - 1] * part_start;
    if(part_end > 0)
        val += data[int_end] * part_end;

    return val;
}

And call it like this:

var data = [2, 3, 1, 2, 2, 3, 4, 1];
var factor = 1.5;
var hist = get_hist(data, factor);

I created a jsfiddle for you to play around with: http://jsfiddle.net/3RVKr/