score:1

Accepted answer

i think the best way to approach this is to use reductio's multi-value group and maximum reducer to calculate the maximum for each window on your power curve in a single bucket, then create a fake group to make it appear that each of these windows is its own group "bucket".

you start by defining your dimension, some helper maps (you need to get onto a linear scale, so you need to convert your windows to numbers of seconds), and a helper dimension that you can use for filtering in the event that you want to do this:

var rmmdim = facts.dimension(function(d) {
    return true;
});

var timemap = {
    "w15sec": 15,
  "w30sec": 30,
  "w1min": 60,
  "w2min": 120,
  "w5min": 300,
  "w10min": 600,
  "w20min": 1200,
  "w40min": 2400,
  "w1hr": 3600
}

var timearray = ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => timemap[d])

var rmmfilterdim = facts.dimension(function(d) {
    return timearray;
}, true)

you then create your group using reductio, calculating the max for each window:

var rmmgroup = rmmdim.group();
var reducer = reductio()
reducer.value('w15sec')
  .max((d) => { return d.w15sec; })
reducer.value('w30sec')
  .max((d) => { return d.w30sec; })
reducer.value('w1min')
  .max((d) => { return d.w1min; })
reducer.value('w2min')
  .max((d) => { return d.w2min; })
reducer.value('w5min')
  .max((d) => { return d.w5min; })
reducer.value('w10min')
  .max((d) => { return d.w10min; })
reducer.value('w20min')
  .max((d) => { return d.w20min; })
reducer.value('w40min')
  .max((d) => { return d.w40min; })
reducer.value('w1hr')
  .max((d) => { return d.w1hr; })

reducer(rmmgroup)

and finally you create your fake group. you need both top and all because the line chart requires them for some reason:

var fakegroup = {
    all: function() {
    return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => {
        return {
        key: timemap[d],
        value: rmmgroup.top(infinity)[0].value[d]
      }
    })
  },
  top: function() {
    return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => {
        return {
        key: timemap[d],
        value: rmmgroup.top(infinity)[0].value[d]
      }
    })
  }
}

then you can use this fake group in your power distribution chart:

pwrdistchart
  .width(960)
  .height(150)
  .margins({
    top: 10,
    right: 10,
    bottom: 20,
    left: 40
  })
  .dimension(rmmfilterdim)
  .group(fakegroup)
  .valueaccessor((d) => {
    return d.value.max
  })
  .transitionduration(500)
  .x(d3.scale.linear().domain([0,3600]))
  .elasticy(true)

here is an updated version of the fiddle with all of this working: http://jsfiddle.net/fb3wsyck/5/


Related Query