Grouping the loaded data so we only have the top 10 names for both sexes

At this point, we've only loaded the data. If you look back at the figure, you can see that we create a chart using the top 10 female and male names. With the following lines of code, we convert the big incoming data array to an array that contains just the top 10 female and male names:

var grouped = _.groupBy(data, 'sex'); 
var top10F = grouped['F'].slice(0, namesToShow); 
var top10M = grouped['M'].slice(0, namesToShow); 
 
var both = top10F.concat(top10M.reverse());

Here we use the lodash's groupBy function,to sort our data based on the sex property of each row. Next we take the first 10 (namesToShow) elements from the grouped data, and create a single array from them using the concat function. We also reverse the top10M array to make the highest boy's name appear at the bottom of the chart (as you can see when you look at the example).