Group array by index

Question

I have an array, that looks like this:

colors = [
    [356, 11, 30, 1],
    [354, 10, 1, 1],
    [220, 15, 33, 14],
    [51, 4, 69, 31],
    [38, 4, 54, 32],
    [33, 53, 52, 33],
    [19, 28, 78, 34],
    [0, 0, 27, 36]
];

It is an array of HSL colors with colors[0], colors[1], colors[2] representing HSL values and colors[3] representing the group that this color belongs to. I have 36 groups of colors.

I want to be able to get the frequency of colors in each group (so count of color[3]) and also sum the colors[1] of each group.

Could you help me setup my code? I’ve tried making an object with keys for every group to make this easier to work with, but couldn’t ...

Here's the code I was trying to transform my array and make it easier to make the sum and frequency calculations:

     hueGroups = {};
     for (var i = 0;i<colors.length-1;i++) {
     var group = colors[i][3];
     hueGroups[group] = colors[i];
     }

    And it gives me:
    { '1': [ 354, 10, 1, 1 ],
      '14': [ 220, 15, 33, 14 ],
      '31': [ 51, 4, 69, 31 ],
      '32': [ 38, 4, 54, 32 ],
      '33': [ 33, 53, 52, 33 ],
      '34': [ 19, 28, 78, 34 ] }

I also would prefer not using external libraries, I’ve seen solutions using Underscore.js.

For grouping the values, have a look at [What is the most efficient method to groupby on a javascript array of objects?](http://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects) — Jonathan Lonowski, Nov 07 '15 at 03:13
@Jonathan Lonowski Thanks for the link. I'm quite new with this, isn't the answer picked in that link using underscore.js..? — Vera, Nov 07 '15 at 04:14

deamentiaemundi · Accepted Answer · 2015-11-07T04:18:11.733

Count of color[][3] and sum of color[][1]

colors = [
    [356, 11, 30, 1],
    [354, 10, 1, 1],
    [220, 15, 33, 14],
    [51, 4, 69, 31],
    [38, 4, 54, 32],
    [33, 53, 52, 33],
    [19, 28, 78, 34],
    [0, 0, 27, 36]
];

var histogram = (new Array(37)).fill(0);
var sum_c_1 = 0;

for(var i=0;i<colors.length;i++){
  histogram[colors[i][3]]++;
  sum_c_1 += colors[i][1];
}

console.log("sum = " + sum_c_1 + ", goups = " + histogram.join(","));

Code adapted to corrected question (see comment of OP below):

// starting at 1 to simplify things
var histogram = (new Array(37)).fill(0);
// each individual colore per group as requested
var sum_c_1 = (new Array(37)).fill(0);

for(var i=0;i<colors.length;i++){
  histogram[colors[i][3]]++;
  // just the same as with the histogram
  sum_c_1[colors[i][3]] += colors[i][1];
}

console.log("   sum = " + sum_c_1.join(",") + "\ngroups = " + histogram.join(","));

The conversion to an Object is a bit more complicated because you shouldn't start the key-identifiers with a number but not that much:

hueGroups = {}; 
for (var i = 0;i<colors.length;i++) { 
  var group = colors[i][3];
  hueGroups["hue" + group] = colors[i];
}
console.log(JSON.stringify(hueGroups));

You can addd more groups to the object by simply doing

var newColor = [12,32,34,13]
hueGroups["hue" + (newColor[3])] = newColor;

To update histogram and sum you have to rerun the loop from the beginning or update manually.

:) Thanks, for the histogram, part. How would you get the sum of each individual colors[1] per group? (i.e. group 1 = 21 (11+10)) Also, I'll edit my question above. I am also trying to transform my array into an object with each key being a group and the value being the colors. Thanks a lot! — Vera, Nov 07 '15 at 03:52
Hello, thank you this is exactly what I wanted for the sum and frequency! For the object part, it doesn't quite work as for hue1, there are two colors in that group, and that's not reflected in the object. But I think I might have just found my answer to that: [How to add new property with same key name inside declared object?](http://stackoverflow.com/questions/25507234/how-to-add-new-property-with-same-key-name-inside-declared-object) — Vera, Nov 08 '15 at 13:25

Group array by index

1 Answers1