How to apply a function to an array in DC.js - dc.js

Question

I have two charts, the first, a line chart, in which the user can brush.
Based on the selection, a bar chart (only one bar) updates its value thanks to a specific function. I would like to apply this specific function in an efficient manner to the new array.
I started by following the complex reduce example. There is something wrong with my logic because the function std gets
the all dataset instead of an array. It seems that to put the function within the valueAccessor is not the right thing to do.
This is my code:
/**********************************
* Step0: javascript functions *
**********************************/
// instead of calculating the desired metric on every change, which is slow, we'll just maintain
// these arrays of rows and calculate the metrics when needed in the accessor
function groupArrayAdd(keyfn) {
var bisect = d3.bisector(keyfn);
return function(elements, item) {
var pos = bisect.right(elements, keyfn(item));
elements.splice(pos, 0, item);
return elements;
};
}
function groupArrayRemove(keyfn) {
var bisect = d3.bisector(keyfn);
return function(elements, item) {
var pos = bisect.left(elements, keyfn(item));
if(keyfn(elements[pos])===keyfn(item))
elements.splice(pos, 1);
return elements;
};
}
function groupArrayInit() {
return [];
}
/**********************************
* Step1: Load data from json file *
**********************************/
d3.json("{% url "block__time_series" portfolio value_date %}").then(function(data){
const dateFormatSpecifier = "%Y-%m-%d";
const dateFormat = d3.timeFormat(dateFormatSpecifier);
const dateFormatParser = d3.timeParse(dateFormatSpecifier);
const numberFormat = d3.format('.2f');
data.forEach(function(d) {
d.dd = dateFormatParser(d.date);
d.month = d3.timeMonth(d.dd); // pre-calculate month for better performance
d.returns = +d.returns;
d.value = +d.value;
});
/******************************************************
* Step2: Create the dc.js chart objects & ling to div *
******************************************************/
const myBarChart = new dc.BarChart('#my_bar_chart');
const myLineChart = dc.compositeChart('#my_line_chart');
const palette_color_block4 = ["#6c5373", "#8badd9", "#b6d6f2", "#45788c", "#6E87F2", "#996A4E",
"#BF7761", "#735360", "#D994B0", "#6C5373", "#7F805E", "#A6A27A", "#48BDCC", "#FFC956", "#f2f2f2"]
/************************************************
* Step3: Run the data through crossfilter *
************************************************/
var facts = crossfilter(data), // Gets our 'facts' into crossfilter
returns = function (d) {return +d.returns}
/*Here my function that I want to use */
function std(kv) {
return d3.deviation(kv.value, returns);
}
/******************************************************
* Step4: Create the Dimensions *
******************************************************/
const dateDimension = facts.dimension(d => d.dd);
var returnsDimension = facts.dimension(returns);
var volGroup = dateDimension.group().reduce(groupArrayAdd(returns), groupArrayRemove(returns),
groupArrayInit);
var valueGroup = dateDimension.group().reduceSum(function (d) {return d.value; });
const moveMonths = facts.dimension(d => d.month);
const monthlyMoveGroup = moveMonths.group().reduceSum(d => d.value);
/***************************************
* Step5: Create the Visualisations *
***************************************/
myBarChart /* dc.BarChart('#my_bar_chart', 'chartGroup')*/
.width(400)
.height(200)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.colorAccessor(d => d.key)
.ordinalColors(palette_color_block4)
.margins({left: 80, top: 30, right: 10, bottom: 20})
.elasticY(false)
.brushOn(false)
.controlsUseVisibility(false)
.valueAccessor(std)
.dimension(returnsDimension)
.group(volGroup);
mylineChart /*dc.compositeChart('#my_line_chart', 'chartGroup')*/
.width(800)
.height(200)
.transitionDuration(1000)
.margins({top: 20, right: 10, bottom: 10, left: 10})
.dimension(moveMonths)
.mouseZoomable(true)
.round(d3.timeMonth.round)
.xUnits(d3.timeMonths)
.renderHorizontalGridLines(true)
.legend(new dc.Legend().x(800).y(10).itemHeight(13).gap(5))
.brushOn(true)
.title( function(d) { return dateFormat(d.key) + ': ' + numberFormat(d.value);
})
.valueAccessor(function (d) { return d.value})
.compose([
dc.lineChart(mylineChart).group(valueGroup , data[0].name)
]);
/****************************
* Step6: Render the Charts *
****************************/
dc.renderAll();
});