crossfilter + dc.js // dimension groups containing each other

Question

I've got a data source with the following model:

[
    {
        days : 3,
        value : 500
    },
    {
        days : 30,
        value : 320
    },
    {
        days : 4,
        value : 330
    },
    {
        days : 14,
        value : 300
    },
    {
        days : 44,
        value : 300
    }
]

I'd like to create an dc.js scatter graph showing the min, max and average values (y axis) in three groups (x axis): all, last 10 days and last 5 days.

So far I've created this dimension:

var daysGroupsDimension = data.dimension(function(d) {
    if(d.days <= 5) {
        return 'last 5';
    } else if(d.days <= 10) {
        return 'last 10';
    } else {
        return 'all';
    }
})

but when I group it, it separates the data in three groups and it's not exactly what I want.

I feel this is not the correct way to approach it but I can't seem to find anything like it. If someone could at least point me in the right direction that'd be great!

Thanks!

Ethan Jewett Ethan Jewett · Accepted Answer · 2018-02-14T16:48:08

Use Crossfilter 1.4's array dimension concept to put a single record into more than one group: https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension_with_arrays

var daysGroupsDimension = data.dimension(function(d) {
    if(d.days <= 5) {
        return ['last 5', 'last 10', 'all'];
    } else if(d.days <= 10) {
        return ['last 10', 'all'];
    } else {
        return ['all'];
    }
}, true)

When you do this, and then group on this dimension, you'll get 3 groups: 'last 5', 'last 10', and 'all'. Records with a days value <= 5 will be counted in all 3 groups, etc.

crossfilter + dc.js // dimension groups containing each other

1 Answers