Summing a multi-dimension crossfilter to reduce the number of dimensions

Question

I'm working wtih @tillandsia on this problem and have made some strides thanks to @Gordon's advice. I've reshaped the data so there are Date, Hair Color, Age Group, and Value columns. E.g.

Date, Hair Color, Age Group, Value
1/1/21, Brown, 0-18, 10
1/1/21, Brown, 19-39, 20
1/1/21, Brown, 40+, 30
1/1/21, Blonde, 0-18, 11
1/1/21, Blonde, 19-39, 21
1/1/21, Blonde, 40+, 31
1/2/21, Brown, 0-18, 8
...

I've also created a fake cumulative group to sum by Hair Color. If I create a dimension, group, and chart like this:

dateColorDimension = cf.dimension([d.Date, d['Hair Color']]);
dateColorGroup = dateColorDimension.group().reduceSum(d => +d.Value);
chart
  .dimension(dateColorDimension)
  .group(dateColorGroup)
  .seriesAccessor(d => d.key[1])
  .keyAccessor(d => d.key[0])
  .valueAccessor(d => +d.value)

Then it looks mostly correct. Chart with only date and hair color in the dimension:

But if I tried to add the Age Group to the dimension like this:

dateColorDimension = cf.dimension([d.Date, d['Hair Color'], d['Age Group']]);

Then the chart has this jagged look. Chart with age group added to the dimension:

I can see in the group that there are multiple age groups for each Hair Color for each date. So the accumulator is creating little vertical steps on each date as it accumulates the Age Groups. Is there a way that I can collapse the Age Group part of the group before I plot it? By collapse, I mean I would like to sum in this case. I assume I would want to keep the Age Group column in the dimension so that it is accessible when we do filtering for a particular Hair Color.

I've created a jsfiddle to better illustrate the problem. https://jsfiddle.net/djacu2/Lwp2cs9u/112/

Summing a multi-dimension crossfilter to reduce the number of dimensions

0 Answers