Rendering Mapped / Grouped Data

Community Help
1

After manipulating some data with d3.group, I would like to plug it into a donut chart. The trouble is, I don’t know how to gain access to these data.

I realize Phil’s tutorial on g3.group, d3.rollup explains this a bit, but I haven’t quite managed to grasp how it works.

What I would like to visualize is this: the name of the location and the number of different categories of entries in that location:

information-sought

What I can’t figure out is how to re-label the indexes so that I can use them. I can transform the grouped data into an array, but even at that I don’t know how to reference these ‘counts’ for each group.
I can manually construct the array that I am after using index numbers (as done in this shared notebook), but this doesn’t seem like a good solution:

Any tips for how to render in values directly from my grouped data (or the derived array)?

1 Like
2

d3.group returns a Map, which is a standard Javascript ojbect, so you probably just need to read up on iterating over those:

1 Like
3

Thanks @mcmcclur. Unfortunately, I am still not getting it:

Iterating over an Object requires obtaining its keys in some fashion and iterating over them.

Seems vague :frowning:

Also, when I try something like this to get keys:

{
for (let value of grouped_data.values()) {
  return(value)
}
}

… I end up with exactly the same map.

In the donut chart code, it was calling on data with these named indexes: ‘name’ and ‘value’. But the map indexes are just numbers, and I can’t seem to refer to them… though I can get at the information I wish for specific arrays, like this:

grouped_data_array[0][0]

(which is how I manually re-built the array with index names).

Any further guidance?

4

You almost had it:

grouped_data_array = Array.from(grouped_data, ([key, map]) => ({
  name: key.toLowerCase(),
  value: map.size,
}))

I highly recommend following some tutorials on the various Array, Set and Map methods as well as Destructuring in JS, as this knowledge will likely come in handy on a daily basis.

4 Likes
5

Thanks, Fabian! As always, good advice. I’ll look for tutorials - but in case you have any favorites, please let me know!