Complex Attrition Rate Calculation in dc.js - dc.js

Question

I'm looking to add an Attrition Rate % graph to my Dashboard but I'm having difficulty in working out how I would do this using the complex calculation.
Basically the attrition rate % needs to look back at the previous 12 periods - for each period.
Calculation (for each Period) -
Total Starters in Previous 12 Periods (including current) / (Total Heads for Period 13 months ago + Leavers in Previous 12 Periods (including current)).
For example, if the Period is 201710 [YYYYMM], then the calculation would be:
(Total Starters in Periods 201611 to 201710) / Heads in Period 201610 + Total Leavers in Periods 201611 to 201710)
And within the line chart, you'd have the same calculation above for each period.
So, if I have the following data:
{ ... }
{ "Period": 201601, "Heads": 100, "Starters": 10, "Leavers": 8 },
{ "Period": 201602, "Heads": 102, "Starters": 8, "Leavers": 8 },
{ "Period": 201603, "Heads": 102, "Starters": 3, "Leavers": 0 },
{ "Period": 201604, "Heads": 105, "Starters": 8, "Leavers": 12 },
{ "Period": 201605, "Heads": 101, "Starters": 2, "Leavers": 5 },
{ "Period": 201606, "Heads": 98, "Starters": 8, "Leavers": 11 },
{ "Period": 201607, "Heads": 101, "Starters": 6, "Leavers": 5 },
{ "Period": 201608, "Heads": 102, "Starters": 4, "Leavers": 1 },
{ "Period": 201609, "Heads": 105, "Starters": 11, "Leavers": 17 },
{ "Period": 201610, "Heads": 99, "Starters": 8, "Leavers": 11 },
{ "Period": 201611, "Heads": 96, "Starters": 5, "Leavers": 8 },
{ "Period": 201612, "Heads": 95, "Starters": 4, "Leavers": 5 },
{ "Period": 201701, "Heads": 91, "Starters": 1, "Leavers": 5 },
The calculation and attrition rate % for Period 201701 would be:
Starters (Period 201602-201701): 68 / (Heads (Period 201601): 100 + Leavers (Period 201602-201701): 88
Attrition Rate for 201701 is: 36.17%
I would also like to have a number display that shows the attrition rate for the most recent Period.
I have some sample data and a Period chart to work with in a jsfiddle here: https://jsfiddle.net/kevinelphick/nh34aknn/
And a custom reduce function for the group like this:
attritionGroup = dimPeriod.group().reduce(
function (p, d) {
p.heads += d.Heads;
p.starters += d.Starters;
p.leavers += d.Leavers;
return p;
},
function (p, d) {
p.heads -= d.Heads;
p.starters -= d.Starters;
p.leavers -= d.Leavers;
return p;
},
function () {
return {heads: 0, starters: 0, leavers: 0};
});
I appreciate this may be a long shot due to its complex nature and I hope I've described my problem without confusion. I've tried in the past but I can't find any solutions that would work due to my limited knowledge. I can only guess that it would have to loop through the arrays dynamically to sum up starters, leavers that I need for the required Periods? Would I need to get a count of unique Periods to reference the correct periods I need for the calculation?

Answer 1

The reduce sets up the groups for you, then you can use a dummy group that calculates the attrition rates.
(UPDATED code)
function calcAttritionGroup (group) {
return {
all() {
var groupAll = group.all()
groupAll.forEach((p) => {
let elevenMonthsAgo = d3.time.month.offset(p.key, -11)
let twelveMonthsAgo = d3.time.month.offset(p.key, -12)
let twelveMonthsAgoGroup = groupAll.find(function(g){
return g.key.getTime() === twelveMonthsAgo.getTime()
})
let attrHeads = null
if (twelveMonthsAgoGroup) {
attrHeads = twelveMonthsAgoGroup.value.heads;
}
p.attrition = null
if (attrHeads) {
let subgroup = groupAll.filter(function(g) {
return g.key <= p.key && g.key >= elevenMonthsAgo;
})
let attrStarters = subgroup.reduce(function(sum, n) {
return sum + n.value.starters
}, 0)
let attrLeavers = subgroup.reduce(function(sum, n) {
return sum + n.value.leavers
}, 0)
let attrRate = (attrStarters / (attrHeads + attrLeavers))
p.attrition = attrRate || null
})
return groupAll
}
};
}
Here are modifications to your fiddle: https://jsfiddle.net/ga7x1p8m/ (UPDATED)
(Note, the values and formula in your question are different from in the fiddle.)
Some points...
1 - Formatting your period like that is not going to get you far because it won't give you a smooth range for your x scale, and makes it hard to do the comparisons you'll need for getting previous periods. So easiest is probably to cast as date object.
var format = d3.time.format("%Y%m");
data.forEach(function (d) {
d.date = format.parse(d.Period + '')
})
2 - You will have to manage edge cases. What happens if the 12 months previous period can't be found? If the earliest available period is used then this will add some more logic to the calculation.