I am trying to modify this example to my purposes: https://observablehq.com/@d3/grouped-bar-chart

I was able to do so in Observable and plain Javascript. However I am using react and typescript in my personal project and do not know how the double arrow function parameter works.

I.e. What does:

GroupedBarChart(stateages, {
  x: d => d.state, ....

and then:

x = (d, i) => i,
const X = d3.map(data, x);

here do exactly?

In the first, I select the state attribute of every datapoint

but then of every datapoints datapoint (?) I select the numeric index.

How would I write this concisely without using it as a parameter in the function call?

I've tried d3.map(data.state, (d, i) => i) with no luck.

Thanks a lot for any pointers and hints you can give!