Better way to create a stacked area on multiple keys?

[BenP]

Hi All

I am returning to dc after quite a break, and working my way through the codeproject tutorial.  https://www.codeproject.com/Articles/697043/Making-Dashboards-with-Dc-js-Part-2-Graphing

I notice to make a stacked graph they create a new group for each of the http request return code keys, like so:

var status_200=dateDim.group().reduceSum(function(d) {return d.http_200;}); var status_302=dateDim.group().reduceSum(function(d) {return d.http_302;}); var status_404=dateDim.group().reduceSum(function(d) {return d.http_404;});

This seems rather hard coded approach to me, is it possible top achieve the same with one group and specify the key to use? or even better dynamically determine the stack groups based keys present in the data.

 I see something close in the stacked bargraph example ( https://github.com/dc-js/dc.js/blob/develop/web-src/examples/stacked-bar.html ) but its dividing the group on the primary key, not a secondary attribute as in the codeproject example.

speedSumGroup = runDimension.group().reduce((p, v) => {

p[v.Expt] = (p[v.Expt] || 0) + v.Speed;

return p;

}, (p, v) => {

p[v.Expt] = (p[v.Expt] || 0) - v.Speed;

return p;

}, () => ({}));

:

:

:

 for (var i = 1; i < 5; ++i) {

                chart.stack(speedSumGroup, '' + i, sel_stack(i));

            }

[BenP]

TL:DR   I guess my question comes down too how does the sel_stack(i) work.

[Gordon Woodhull]

Hi Ben,

sel_stack is just a tiny helper function defined in the example,  which selects a subfield of the reduced value.

function sel_stack (i) { 
  return d => d.value[i]; 
}

The more important things to understand in the example are the group reduction that produces objects, and the second and third parameter to .stack(), which specify the name and accessor for the stack.

http://dc-js.github.io/dc.js/docs/html/StackMixin.html#stack

If you have a list of fields,  you could use this pattern from the FAQ to reduce multiple values to objects:

https://github.com/dc-js/dc.js/wiki/FAQ#reducing-rows-that-each-contain-multiple-values

Then loop over those fields in order to create your stacks, using the field name for the stack name and accessor. Something like

fields.forEach((field, i) => {
  const acc = ({value}) => value[field];
  if(i==0)
    chart.group(group, field, acc);
  else
    chart.stack(group, field, acc);
});

Please give this a shot and if you're still having trouble,  follow up with a reproducible example (block, observable notebook, fiddle, etc).

Cheers,
Gordon

Note there is a Google Group specifically for dc.js.
https://groups.google.com/forum/?fromgroups=#!forum/dc-js-user-group

Feb 10, 2021 11:10:59 PM BenP <bent...@gmail.com>:

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/361d6a7b-cefa-4066-ab76-108ee817b76cn%40googlegroups.com.