-2

I have created a stacked chart my data look like this:

[{probability: 0.12 , impact: 27 },
 {probability: 0.22 , impact: 27 },
 {probability: 0.44 , impact: 27 },
 {probability: 0.12 , impact: 28 },
 {probability: 0.31 , impact: 28 },
 {probability: 0.41 , impact: 28 },
...]

Impact goes on the X axis, probability on the Y axis.

There are many data on the same axis X. I had to calculate the difference between the Y-axis components of the same X.

[{"coordinate":0.027215999999999997,"probability":0.027215999999999997,"impact":23,"stackNumber":0},
{"coordinate":0.01701,"probability":0.01701,"impact":24,"stackNumber":0},
{"coordinate":0.055566000000000004,"probability":0.072576,"impact":24,"stackNumber":1},
{"coordinate":0.015119999999999998,"probability":0.015119999999999998,"impact":25,"stackNumber":0},
{"coordinate":0.03024,"probability":0.04536,"impact":25,"stackNumber":1},
{"coordinate":0.00945,"probability":0.00945,"impact":26,"stackNumber":0},
{"coordinate":0.013229999999999999,"probability":0.02268,"impact":26,"stackNumber":1},
{"coordinate":0.017639999999999996,"probability":0.040319999999999995,"impact":26,"stackNumber":2},
{"coordinate":0.014175,"probability":0.014175,"impact":27,"stackNumber":0},
{"coordinate":0.011024999999999997,"probability":0.025199999999999997,"impact":27,"stackNumber":1},
{"coordinate":0.02016,"probability":0.04536,"impact":27,"stackNumber":2},
{"coordinate":0.015120000000000001,"probability":0.06048,"impact":27,"stackNumber":3},
 ... ]

for these data, I constructed a dimension

 this.demansion = crossData.dimension(function(d) {
    return d.impact
 });

and n groups

for(let i = 0; i<=this.maxIndex; i++) {
   this.groups.push(this.demansion.group().reduceSum(function(d) {
     return d.stackNumber === i ? d.coordinate : 0
   }))
}

and built a chart

barChart
      .dimension(this.demansion)
      .group(this.groups[0])
      .width(document.getElementById('main-card').offsetWidth*0.9)
      .height(480)
      .y(d3.scaleLinear().domain([0,self.maxY]))
      .x(d3.scaleLinear().domain([0,45]))
      .centerBar(true)
      .renderHorizontalGridLines(true)

for(let i = 1; i<this.maxIndex; i++) {
        this.barChart.stack(this.groups[i]);
      }

Now I need to set the color for each element of the stack, in accordance with its value probability, but in colorAccessor(function(d) { }) I have the "coordinate" value.

What do I need to get the real probability value in the colorAccessor?

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](http://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask). And more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). You might also want to learn about [Minimal, Complete, and Verifiable Examples](http://stackoverflow.com/help/mcve). – secelite Nov 17 '16 at 09:52
  • In particular, SO is supposed to be self-contained. So while it might make sense to link to an SO question on a mailing list, linking to a mailing list post on SO will be frowned on. – Gordon Nov 17 '16 at 13:23
  • Alright, I pasted it in and formatted it. – Gordon Nov 18 '16 at 16:44

1 Answers1

1

Probably the best way to do this is to reduce both coordinate and probability.

I think reductio will make this easier, but with raw Crossfilter, this would look something like:

for(let i = 0; i<=this.maxIndex; i++) {
   this.groups.push(this.demansion.group().reduce(
     function(p, v) { // add
       if(v.stackNumber === i) {
         p.coordinate += v.coordinate;
         p.probability += v.probability;
       }
       return p;
     },
     function(p, v) { // delete
       if(v.stackNumber === i) {
         p.coordinate -= v.coordinate;
         p.probability -= + v.probability;
       }
       return p;
     },
     function() { // initialize
       return {coordinate: 0, probability: 0};
     }));
}

Then you'd add a value accessor and color accessor like so:

barChart
  .valueAccessor(function(d) { return d.value.coordinate; })
  .colorAccessor(function(d) { return d.value.probability; })
Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Note: in this example, it doesn't appear that you are really using the filtering/reduction capabilities of crossfilter, so it's probably just making things harder for you. I never quite understand why people use dc.js when they aren't filtering. It's not that much easier than other charting libraries. – Gordon Nov 23 '16 at 17:13