Tukukkk

I need to create a bar chart with D3.js based on the data provided by the Github API call:

GET /repos/:username/:repository/stats/punch_card

The response is an array with the following structure:

Each array contains the day number, hour number, and number of
commits:

0-6: Sunday - Saturday 0-23: Hour of day Number of commits

For example, [2, 14, 25] indicates that there were 25 total commits,
during the 2:00pm hour on Tuesdays. All times are based on the time
zone of individual commits.

Status: 200 OK

[

  [

    0,

    0,

    5

  ],

  [

    0,

    1,

    43

  ],

  (...)

  [

    6,

    22,

    21

  ], 

  [

    6,

    23,

    11

  ]

]

What I need is to transform this data and return another array that would group all this information by days and by hours. I know I need to use .map(), .filter() ... but I have no previous experience with functional programming and I am very lost here. Any help is appreciated.

Given the example above, I would need to return 2 different arrays (to paint two different bar charts) like this:

commitsByDay = [48, ..., 33] (sum of commits by first element)



commitsByHour = [5, 43, ..., 21, 11] (sum of commits by second element)

Thanks

One approach is to use reduce (reference here).

The reduce function will apply a reducer function to each element in the array. This function has two arguments: the accumulator and the currentValue.

The most basic reduction gets the sum of a list. Here is an example:

let numbers = [1,2,3,4,5];

let sum = numbers.reduce((accumulator, currentValue) => {

  return accumulator + currentValue;

});

sum; //has a value of (1 + 2) + 3) + 4) + 5 = 15

Essentially, the reducer gets called for each element in the array. Each time, the currentValue is equal to the current array element, and the accumulator is equal to the return value of the previous call. The output of the reduce function is the last return value of the reducer.

For your problem, the accumulator needs to keep track of the sum per period (day or hour) rather than the total sum. To do this, the accumulator should start out as an empty array, and then be updated each time the reducer gets called. Assuming the data is in a variable named response, this is how you could get data by day:

let commitsByDay = response.reduce(

  (accumulator, currentValue) => {

    // "currentValue" is an individual record, stored as [day, hour, commits]

    let day = currentValue[0]; 

    let commits = currentValue[2];



    // "accumulator" contains the number of commits per day in an array

    // The index of the array corresponds to the day number

    // We will update the accumulator to contain the data from "currentValue"

    accumulator[day] = (accumulator[day] || 0) + commits;



    // The "accumulator" must be returned

    return accumulator;

  }, 

   // The initial value for "accumulator" is an empty array

);

commitsByDay; // Now contains the final value of "accumulator"

Note

Though reduce is nice, you don't need to use it. You can accomplish the exact same thing using a for-loop. In general, reduce, map, and filter make code more readable, but they are not necessary.