Aggregating data using vanilla JavaScript or another JavaScript library (e.g., lodash)

Question

Could you help me with the following scenario?

I'd like to build a stacked bar chart that shows homicide percentages in Latin America per year. Countries with high homicide percentages will be shown, whereas the remaining countries will appear as others and have their respective homicide percentages added up.

Here's an example.

Let's suppose my data array is:

const data = [ 
  { year: '2020', country: 'Brazil', homicides: 0.60 },
  { year: '2020', country: 'Argentina', homicides: 0.10 }, 
  { year: '2020', country: 'Venezuela', homicides: 0.09 }, 
  { year: '2020', country: 'Uruguay', homicides: 0.08 }, 
  { year: '2020', country: 'Paraguay', homicides: 0.04 }, 
  { year: '2020', country: 'Bolivia', homicides: 0.03 }, 
  { year: '2020', country: 'Peru', homicides: 0.02 }, 
  { year: '2020', country: 'Chile', homicides: 0.02 }. 
  { year: '2020', country: 'Equador', homicides: 0.02 }, 
  { year: '2021', country: 'Brazil', homicides: 0.70 }, 
  { year: '2021', country: 'Venezuela', homicides: 0.10 }, 
  { year: '2021', country: 'Ecuador', homicides: 0.08 }, 
  { year: '2021', country: 'Argentina', homicides: 0.06 }, 
  { year: '2021', country: 'Paraguay', homicides: 0.02 }, 
  { year: '2021', country: 'Uruguay', homicides: 0.02 }, 
  { year: '2021', country: 'Chile', homicides: 0.01 },   
  { year: '2021', country: 'Peru', homicides: 0.01 }
];

If maxCategories = 6:

a) In 2020, objects that refer to the 5 countries with the highest homicide percentages (Brazil, Argentina, Venezuela, Uruguay and Paraguay) will appear in the aggregatedData array. The remaining countries will appear in said array as others.

b) In 2021, objects that refer to the 5 countries with the highest homicide percentages (Brazil, Venezuela, Ecuador, Argentina and Paraguay) will appear in the aggregatedData array. The remaining countries will appear in said array as others.

const aggregatedData = [
  { year: '2020', country: 'Brazil', homicides: 0.60 },
  { year: '2020', country: 'Argentina', homicides: 0.10 },
  { year: '2020', country: 'Venezuela', homicides: 0.09 },
  { year: '2020', country: 'Uruguay', homicides: 0.08 },
  { year: '2020', country: 'Paraguay', homicides: 0.04 },
  { year: '2020', country: 'others', homicides: 0.09 },
  { year: '2021', country: 'Brazil', homicides: 0.70 },
  { year: '2021', country: 'Venezuela', homicides: 0.10 },
  { year: '2021', country: 'Ecuador', homicides: 0.08 },
  { year: '2021', country: 'Argentina', homicides: 0.06 },
  { year: '2021', country: 'Paraguay', homicides: 0.02 },
  { year: '2021', country: 'others', homicides: 0.04 } 
];

I tried to use this question's answer but the code doesn't allow me to set the maximum number of categories.

Thank you!

Answer 1

From my above comment ...

@AbdullahCh ... in case of e.g. limiting the annual-specific homicide-counts to just 6 entries, the OP wants to filter just the first 5 annual-specific entries; all other entries are joined into country: 'others', featuring the totaled annual-specific homicide-count of all the entries that where rejected/truncated.

In order to achieve the collecting and the limiting aggregation tasks within a single run over the source data array, one should choose a reduce based approach.

This method, in addition to its passed reducer-function, accepts an initial value as its 2nd parameter.

One would initially pass an object which holds two properties limit and result where the former is a number-value that indicates the maximum amount of items that can be collected, and the latter is an object which serves as lookup-table and intermediate result for annual-specific item arrays. These arrays are the base of knowing when to proceed with simply collecting and when to start and continuing with the aggregation of item-data from all the items which are rejected/truncated due to the limited item count.

Since ...

data
  .reduce(aggregateLimitedNumberOfAnnualSpecificItems, {
    limit: 6, result: {},
  })
  .result;

... does return an object like ...

{
  2020: [
    { year: "2020", country: "Brazil", homicides: 0.6 },
    { year: "2020", country: "Argentina", homicides: 0.1 },
    { year: "2020", country: "Venezuela", homicides: 0.09 },
    { year: "2020", country: "Uruguay", homicides: 0.08 },
    { year: "2020", country: "Paraguay", homicides: 0.04 },
    { year: "2020", country: "others", homicides: 0.09 },
  ],
  2021: [
    { year: "2021", country: "Brazil", homicides: 0.7 },
    { year: "2021", country: "Venezuela", homicides: 0.1 },
    { year: "2021", country: "Ecuador", homicides: 0.08 },
    { year: "2021", country: "Argentina", homicides: 0.06 },
    { year: "2021", country: "Paraguay", homicides: 0.02 },
    { year: "2021", country: "others", homicides: 0.04 },
  ]
}

... one in addition needs to access the Object.values of the result object. And since this will be an array of annual-specific item arrays, one has to flatten it as well ...

function aggregateLimitedNumberOfAnnualSpecificItems(collector = {}, item) {

  // access the result object and the item limit from the collector object.
  const { result = {}, limit = Number.MAX_SAFE_INTEGER } = collector;

  // access an item's year value.
  const { year } = item;

  // create or/and access the year-specific items array.
  const annualItemList = (result[year] ??= []);

  if (annualItemList.length < (limit - 1)) {
    // ... either collect unlimited yet ...

    annualItemList.push(item);

  } else if (annualItemList.length === (limit - 1)) {
    // ... or prepare the last item ...
  
    annualItemList.push({ ...item, country: 'others' });
  } else {
    // ... which then will aggregate specifc data from
    //     every still to be processed but limited item ...
    const lastItem = annualItemList.at(-1);
    
    lastItem.homicides =
      // - in order to prevent floating point inaccuracies like
      //   totaling to `0.09000000000000001` instead of just `0.09`.
      Math.round((lastItem.homicides + item.homicides) * 100) / 100;
  }
  // - proceed with or return the year-specific
  //   collection/aggregation of limited items.
  return { limit, result };
}

console.log(
  Object
    .values(
      data
        .reduce(aggregateLimitedNumberOfAnnualSpecificItems, {
          limit: 6, result: {},
        })
        .result
    )
    .flat()
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

<script>
  const data = [ 
    { year: '2020', country: 'Brazil', homicides: 0.60 },
    { year: '2020', country: 'Argentina', homicides: 0.10 }, 
    { year: '2020', country: 'Venezuela', homicides: 0.09 }, 
    { year: '2020', country: 'Uruguay', homicides: 0.08 }, 
    { year: '2020', country: 'Paraguay', homicides: 0.04 }, 
    { year: '2020', country: 'Bolivia', homicides: 0.03 }, 
    { year: '2020', country: 'Peru', homicides: 0.02 }, 
    { year: '2020', country: 'Chile', homicides: 0.02 },
    { year: '2020', country: 'Equador', homicides: 0.02 }, 
    { year: '2021', country: 'Brazil', homicides: 0.70 }, 
    { year: '2021', country: 'Venezuela', homicides: 0.10 }, 
    { year: '2021', country: 'Ecuador', homicides: 0.08 }, 
    { year: '2021', country: 'Argentina', homicides: 0.06 }, 
    { year: '2021', country: 'Paraguay', homicides: 0.02 }, 
    { year: '2021', country: 'Uruguay', homicides: 0.02 }, 
    { year: '2021', country: 'Chile', homicides: 0.01 },   
    { year: '2021', country: 'Peru', homicides: 0.01 },
  ];
</script>