Use dc.js seriesChart .seriesAccessor() to pick specific (not all) series

Question

I am trying to show detailed data for 6 series. The example http://dc-js.github.io/dc.js/examples/scatter-series.html is exactly what I need but I need a small tweak. I would like to show three charts with 2 items each.

Can I use the single runGroup from the example but somehow limit chart.seriesAccessor() to display two specific series in one chart. Then use the same runGroup in a second chart and change its .seriesAccessor() to use two different series, etc., etc.

Setting up multiple separate dims and groups works fine but it seems overkill that when I already have a single crossfiltered dataset with everything in it that I could not just use that single dimension and group to drive different charts.

(the dataset actually has 40 series in it but for now I just need to display specific ones, grouped together in several charts).

Gordon Gordon · Accepted Answer · 2015-06-04T21:24:52

This is what Tufte calls a "small multiple". I'm not sure you could actually do this by adding dimensions and groups, because you don't want the charts affected by each others' choose-series filters.

And the seriesAccessor is just a function that extracts a subkey, it doesn't really have a way to filter.

Looks like yet another case for "fake groups". Modifying the scatter-series example:

function filter_keys(source_group, f) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return f(d.key);
            });
        }
    };
}

// in particular, take experiments 1 and 2 from scatter-series.html:
var frunGroup = filter_keys(runGroup, function(k) {
    return k[0] < 3; // k[0] is the same part used for seriesAccessor
});
chart.group(frunGroup)

You would then define one of these filtered groups for each chart in the multiple (or define them in a loop). This has the minor cost of doing one filter over the group for each chart, whenever the crossfilter changes, but that should be negligible.

It would be nice to generalize the seriesChart to deal with this sort of thing, but it would be essentially the same calculation/post-filtering, so I tend to argue that what we need are better data manipulation/filtering tools in between crossfilter and dc.js, not more features built-in.

Use dc.js seriesChart .seriesAccessor() to pick specific (not all) series

1 Answers