Maps on maps on maps on stacks

JavaScript
1

Update: to anyone who cares, it turns out I had copied someone else’s d3 code who had been using v3. I am using v5 so copying (and editing) their code did no good. Lesson learned? Always read documentation.

I am continuing work on my Big, Fat Data Dashboard (I will post the whole project for feedback as soon as it is completed). In the meantime, baby steps continue apace:

After finally loading the data in a format palatable to d3 and creating a chart with it, I am now creating a stacked bar chart. In order to do that, I have to further manipulate the data using the d3 method stack(). However, the final array is empty. This, despite console.logs throughout map() showing the correct values.

I think this is a JS problem and not a d3-specific problem so hoping it’s still appropriate to post here.

Thanks in advance!

My code:

// Transpose the data into layers
  let dataset = d3.stack()(
    ["Number of Agents", "Number of Active BB Agents"].map(function(agent) {
      // return data.map(each => { x: each.Year, y: each[agent] });
      return data.map(function(d) {
        console.log({ x: d.Year, y: d[agent] });
        return { x: d.Year, y: d[agent] };
      });
    })
  );

console.log(dataset);

console.log checks:
Original data when loaded in:

Capture
Capture1506×260 70.4 KB

Checking value of { x: d.Year, y: d[agent] } as they are created:

Capture
Capture972×345 72.4 KB

Check of final array:
Capture

Also, and this might be a little greedy, but I want to know why this code won’t work:
// return data.map(each => { x: each.Year, y: each[agent] });
When I try to use it, I get a VS Code highlighting the colon after y. Message is: ';' expected.