Search code examples
dc.jscrossfilter

Why is my pie chart showing incorrect groups when filtered with stacked bar chart in dc.js & crossfilter.js?

When I click on a dc.js stacked bar chart, my pie chart elsewhere on the same page doesn't show the correct groups.

I'm new to dc.js, so I've created a simple dataset to demo features I need: Alice and Bob write articles about fruit, and tag each article with a single tag. I've charted this data as follows:

  • Line chart showing number of articles per day
  • Pie chart showing total number of each tag used
  • Stacked bar chart showing number of tags used by author

The data set is as follows:

rawData = [
{"ID":"00000001","User":"Alice","Date":"20/02/2019","Tag":"apple"},
{"ID":"00000002","User":"Bob","Date":"17/02/2019","Tag":"dragonfruit"},
{"ID":"00000003","User":"Alice","Date":"21/02/2019","Tag":"banana"},
{"ID":"00000004","User":"Alice","Date":"22/02/2019","Tag":"cherry"},
{"ID":"00000005","User":"Bob","Date":"23/02/2019","Tag":"cherry"},
];

Illustrative JSFiddle here: https://jsfiddle.net/hv8sw6km/ and code snippet below:

/* Prepare data */

rawData = [
{"ID":"00000001","User":"Alice","Date":"20/02/2019","Tag":"apple"},
{"ID":"00000002","User":"Bob","Date":"17/02/2019","Tag":"dragonfruit"},
{"ID":"00000003","User":"Alice","Date":"21/02/2019","Tag":"banana"},
{"ID":"00000004","User":"Alice","Date":"22/02/2019","Tag":"cherry"},
{"ID":"00000005","User":"Bob","Date":"23/02/2019","Tag":"cherry"},
];

var data = [];

var parseDate = d3.timeParse("%d/%m/%Y");
rawData.forEach(function(d) {
	d.Date = parseDate(d.Date);
	data.push(d);
});

var ndx = crossfilter(data);

/* Set up dimensions, groups etc. */

var dateDim = ndx.dimension(function(d) {return d.Date;});
var dateGrp = dateDim.group();

var tagsDim = ndx.dimension(function(d) {return d.Tag;});
var tagsGrp = tagsDim.group();

var authorDim = ndx.dimension(function(d) { return d.User; });
/* Following stacked bar chart example at
   https://dc-js.github.io/dc.js/examples/stacked-bar.html
   adapted for context. */
var authorGrp = authorDim.group().reduce(
	function reduceAdd(p,v) {
		p[v.Tag] = (p[v.Tag] || 0) + 1;
		p.total += 1;
		return p;
	},
	function reduceRemove(p,v) {
		p[v.Tag] = (p[v.Tag] || 0) - 1;
		p.total -= 1;
		return p;
	},
	function reduceInit() { return { total: 0 } }
);

var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;

var fruitColors = d3
	.scaleOrdinal()
	.range(["#00CC00","#FFFF33","#CC0000","#CC00CC"])
	.domain(["apple","banana","cherry","dragonfruit"]);

/* Create charts */

var articlesByDay  = dc.lineChart("#chart-articlesperday");
articlesByDay
	.width(500).height(200)
	.dimension(dateDim)
	.group(dateGrp)
	.x(d3.scaleTime().domain([minDate,maxDate]));

var tagsPie = dc.pieChart("#chart-article-tags");
tagsPie
    .width(150).height(150)
    .dimension(tagsDim)
    .group(tagsGrp)
	.colors(fruitColors)
	.ordering(function (d) { return d.key });

var reviewerOrdering = authorGrp
	.all()
//	.sort(function (a, b) { return a.value.total - b.value.total })
	.map(function (d) { return d.key });

var tagsByAuthor = dc.barChart("#chart-tags-by-reviewer");
tagsByAuthor
	.width(600).height(400)
	.x(d3.scaleBand().domain(reviewerOrdering))
	.xUnits(dc.units.ordinal)
	.dimension(authorDim)
	.colors(fruitColors)
	.elasticY(true)
	.title(function (d) { return d.key + ": " + this.layer + ": " + d.value[this.layer] });

function sel_stack(i) {
  return function(d) {
	  return d.value[i];
  };
}

var tags = tagsGrp
	.all()
	.sort(function(a,b) { return b.value - a.value})
	.map(function (d) { return d.key });
tagsByAuthor.group(authorGrp, tags[0]);
tagsByAuthor.valueAccessor(sel_stack(tags[0]));
tags.shift(); // drop the first, as already added as .group()
tags.forEach(function (tag) {
	tagsByAuthor.stack(authorGrp, tag, sel_stack(tag));
});

dc.renderAll();
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.1/dc.min.js"></script>
<div id="chart-articlesperday"></div>
<div id="chart-article-tags"></div>
<div id="chart-tags-by-reviewer"></div>

As you can see, Alice has made three articles, each tagged with "apple", "banana" and "cherry" respectively, and her stacked bar chart shows this.

Full dashboard with line chart, pie chart and stacked bar chart working correctly

However whenever her column of the bar chart is clicked, the pie chart instead shows her as having 1 "apple" and 2 "cherry".

enter image description here

It took me a very long time even to get to this point, so it may be that there's something fundamental I'm not getting about crossfilter groupings, so any insights, tips or comments are very welcome.

Solution

  • Indeed, this is very weird behavior, and I wouldn't know what to think except that I have faced it a few times before.

    If you look at the documentation for group.all(), it warns:

    This method is faster than top(Infinity) because the entire group array is returned as-is rather than selecting into a new array and sorting. Do not modify the returned array!

    I guess otherwise it might start modifying the wrong bins when aggregating. (Just a guess, I haven't traced through the code.)

    You have:

    var tags = tagsGrp
    .all()
    .sort(function(a,b) { return b.value - a.value})
    .map(function (d) { return d.key });

    Adding .slice(), to copy the array, fixes it:

    var tags = tagsGrp
    .all().slice()
    .sort(function(a,b) { return b.value - a.value})
    .map(function (d) { return d.key });

    correct filtering working fork of your fiddle

    We actually have an open bug where the library does this itself. Ugh! (Easy enough to fix, but a little work to produce a test case.)