CODEWITHSUNDEEP
javascriptjquerydc.jscrossfilter
Koba
Koba

Reputation: 1544

How to filter, group and plot data using crossfilter and dc.js

I have the following data and a bar chart of its counts. Here is the jsfiddle. I would like to filter the dimensions, so that in the bar chart I only have Alyssa and Bob. I have tried different variations of creating filtered variables using .filter() function and filtering the chart directly. The main problem appears to be the XDimension.group().reduceCount because apparently "group methods consider only records that satisfy every filter except this dimension's filter." I am lost. Help appreciated.

var data = [{
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "A"
}, {
    Owner: "Alyssa",
    ID: "B"
}, {
    Owner: "Bob",
    ID: "A"
}, {
    Owner: "Bob",
    ID: "A"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "C"
}, {
    Owner: "Bob",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "A"
}, {
    Owner: "Joe",
    ID: "A"
}, {
    Owner: "Joe",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "D"
}, {
    Owner: "Joe",
    ID: "E"
}];

var ndx = crossfilter(data);


var XDimension = ndx.dimension(function (d) {
    return d.Owner;
});
var YDimension = XDimension.group().reduceCount(function (d) {
    return d.Owner;
});
dc.barChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(true)
    .gap(56)
    .x(d3.scale.ordinal().domain(XDimension))
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Market Developer")
    .yAxisLabel("Unique Counts")
    .elasticY(true)
    .xAxis().tickFormat(function (v) {
    return v;
});
dc.renderAll();

Upvotes: 1

Views: 796

Answers (1)

feenz
feenz

Reputation: 97

Would it be possible to filter the data prior to adding it to the crossfilter?

data = data.filter(function (d) { return d.Owner !== "Joe"; });
var ndx = crossfilter(data);

I am currently working on a similar problem and this was a temporary solution. I tried filtering the dimension like so:

var filtered = XDimension.filter(function (d) { return d !== "Joe"; });
var YDimension = filtered.group().reduceCount(function (d) { return d.Owner });

When I print out "filtered", I see that the dimension was properly filtered. However, when the chart is drawn, "Joe" was still in the data set.

Ill post back if I find a better solution..

Upvotes: 1

Related Questions