Using multiple fields in one crossfilter dimension for a dc.js dashboard

Question

In my dataset I have 4 columns which are formatted like this:

Basically we are following patients throughout the time and as soon as the event occurs, all the values from that timeslot till the end will be true. So to see the percentage of survival at a certain time I need to see the amount of people that have value 'false' at that moment in time I am trying to get this into a linechart (dc.js) where the x-as represent time and y-axis represents percentage of dataset that contains 'false'(at that time)

I tried first doing this with 4 different dimensions, 1 for each field. This did not work correctly.

I assume i need to get these 4 fields into one dimension.

i have a printfilter function to check if my dimensions and groups work correctly:

function print_filter(filter){
        var f=eval(filter);
        if (typeof(f.length) != "undefined") {}else{}
        if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
        if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
        console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
    };

When i call this filter on myDimension.group.reduceCount() i want the output to be as following:

[{0 : 100}, {13: 48}, {26 : 60}, {52: 72}]

the first item in the object is the time in weeks and the second item is the percentage of people with false at that time

How should i set up the dimensions and groups to achieve this output?

UPDATE: tried using the following code which did not work either:

var recDim = {
                            x0: cf1.dimension(function(d){return d.recidiefNa0;}),
                            x13: cf1.dimension(function(d){return d.recidiefNa13;}),
                            x26: cf1.dimension(function(d){return d.recidiefNa26;}),
                            x52: cf1.dimension(function(d){return d.recidiefNa52;})
                         };
            var recGroup =  {
                                0: recDim.x0.group(),
                                13: recDim.x13.group(),
                                26: recDim.x26.group(),
                                52: recDim.x52.group()
                            } ;

          print_filter(recGroup);

UPDATE 2 : I tried using 4 dimensions instead and making a composite linechart. This is the current code. It calculates and renders the datapoints at the right place put because its 4 different chart is doenst show the correct line

var recDim0 = cf1.dimension(function(d){ return [d.recidiefNa0]});
            var recDim13 = cf1.dimension(function(d){return [d.recidiefNa13]});
            var recDim26 = cf1.dimension(function(d){return [d.recidiefNa26]});
            var recDim52 = cf1.dimension(function(d){return [d.recidiefNa52]});

            var recGroup0 = recDim0.group();
            var recGroup13 = recDim13.group();
            var recGroup26 = recDim26.group();
            var recGroup52 = recDim52.group();

            var scChart = dc.compositeChart("#scStepChart");
            scChart
            .width(600)
            .height(400)
            .x(d3.scale.linear().domain([0,52]))
            .y(d3.scale.linear().domain([0,100]))
            .clipPadding(10)
            .brushOn(false)
            .xAxisLabel("tijd in weken")
            .yAxisLabel("percentage vrij van residu/recidief")
            .compose([
                dc.lineChart(scChart)
                    .dimension(recDim0)
                    .group(recGroup0)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .keyAccessor(function(d) {return 0;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim13)
                    .group(recGroup13)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 13;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim26)
                    .group(recGroup26)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 26;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100;}),
                dc.lineChart(scChart)
                    .dimension(recDim52)
                    .group(recGroup52)
                    .renderDataPoints(true)
                    .renderTitle(false)
                    .colors(['blue'])
                    .keyAccessor(function(d){return 52;})
                    .valueAccessor(function(d){return d.value/cf1.groupAll().reduceCount().value()*100})


            ])                    
            .xAxis().ticks(4);
            scChart.render();

This is the result , as you can see the line isn't showing correctly.

http://postimg.org/image/gitdw1yj9/

In the comments are the links for JSFiddle and CodePen

Please share what you've tried or (better) create a working example using Codepen, JSFiddle, or a similar service. Generally speaking, I'd start by restructuring your data so that you have all your observations in rows. In the case of this data set there is only one real variable, so it should only have one column. Each row in the current data set should turn into 4 rows in the new data set. With a working example, we can work from there. — Ethan Jewett
Hi there @EthanJewett, at first i had the data in column which was xAfter and the value would be the number of weeks after it occurred. However this resulted in the issue that i didnt have a value for 0 which i need for the chart (hope that makes sense). The other issue is that it would show the oppisite percentage of what i needed i.e. 48 instead of 52. Which could not be solved by subtracted it from 100. — Erik Westra
Here is the JSFiddle: jsfiddle.net/3rxxo0am the code contains the entire dashboard but the part in question is marked between comments containing "start of question" & "end of question" — Erik Westra
You need a row for each week you want to display and each patient. N patients and 5 observation weeks (0, 13, 26, 39, 52) means you should have N*5 rows. — Ethan Jewett
The dataset however is a csv file so it doesnt run on JSfiddle — Erik Westra

Erik Westra Erik Westra · Accepted Answer · 2016-03-05T09:50:18

Fixed the issue with help of @Gordon. changed my dataformat back to one field: with the number of weeks as value.

using this fakegroup i was able to get the graph correct:

function accumulate_subtract_from_100_and_prepend_start_point_group(source_group) {
return {
    all:function () {
        var cumulate = 100;
        var result = [];
        return [{key: 0, value: cumulate}]
           .concat(source_group.all().map(function(d) {
              cumulate -= d.value;
              return {key:d.key, value:cumulate};
           }));
    }
};

}

Using multiple fields in one crossfilter dimension for a dc.js dashboard

1 Answers