dcjs how can i handle objects with different amount of properties?

Indeed, using undefined fields for your dimension or group keys can crash crossfilter because it does not validate its data. NaN, null, and undefined do not have well-defined sorting operations.

It’s strange to see the value folded into another bin, but I suspect it’s the same undefined behavior, rather than something you can depend on.

If you have fields which may be undefined, you should always default them, even if you don’t want the value:

  middleNameDimension        = j.dimension(d => d.middleName || 'foo'),

I think you do want to filter your data, but not in the crossfilter sense where those rows are removed and do not influence other charts. Instead, it should just be removed from the group without affecting anything else.

You can use a “fake group” for this, and there is one in the FAQ which is suited perfectly for your problem:

function remove_bins(source_group) { // (source_group, bins...}
    var bins = Array.prototype.slice.call(arguments, 1);
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return bins.indexOf(d.key) === -1;
            });
        }
    };
}

Apply it like this:

.group(remove_bins(middleNameGroup, 'foo'))

Fork of your fiddle.

Be careful with this, because a pie chart implicitly adds up to 100%, and in this case it only adds up to 66%. This may be confusing for users, depending how it is used.