Crossfilter dimension from JSON array

Question

I am a Crossfilter newbie and trying to figure out how to create specific group and dimension for a given group. To be specific, here is simplified JSON I am playing with:

[
    {"name": "New York","count": 354,"terms": [{"name": "N/A","hits": 200 }, {"name": "Brooklyn","hits": 225},{"name": "Queens","hits": 1}},
    {"name": "San Francisco","hits": 120,"terms": [{"name": "Chinatown","hits": 268},{"name": "Downtown","hits": 22}},
    {"name": "Seattle","hits": 34,"terms": [{"name": "N/A","hits": 2},{"name": "Freemont","hits": 25}}
]

I already have a pie chart in which each piece represents the cities. Now what I want to do is when I click on a specific pie (say "New York"), I want to have a row chart that shows the terms array value for New York as a dimension. I am not sure if I am using the right terminology here, but I want to essentially use pie chart as the summary view and row chart as drill-down to show terms for each city.

How do I do that with Crossfilter? I am actually using dc.js, but I still have to create the dimensions and groups for Crossfilter before dc.js renders it for me.

Answer 1

First I would reorganize your data a bit - something like this might work well for you:

var data = [{
"city": "New York",
    "neighborhood": "N/A",
    "hits": 200
}, {
"city": "New York",
    "neighborhood": "Brooklyn",
    "hits": 225
}, {
"city": "New York",
    "neighborhood": "Queens",
    "hits": 1
}, {
"city": "San Francisco",
    "neighborhood": "Chinatown",
    "hits": 268
}, {
"city": "San Francisco",
    "neighborhood": "Downtown",
    "hits": 22
}, {
"city": "Seattle",
    "neighborhood": "N/A",
    "hits": 2
}, {
"city": "Seattle",
    "neighborhood": "Freemont",
    "hits": 25
}];

Here is a relevant stackoverflow question for why I flattened the data: Does Crossfilter require a flat data structure?

From there you can create dimensions and groups for city and neighborhood:

var ndx = crossfilter(data),
cityDimension = ndx.dimension(function (d) {
    return d.city;
}),
cityGroup = cityDimension.group().reduceSum(function (d) {
    return d.hits;
}),
neighborhoodDimension = ndx.dimension(function (d) {
    return d.neighborhood;
}),
neighborhoodGroup = neighborhoodDimension.group().reduceSum(function (d) {
    return d.hits;
});

Now when you create your charts they will be connected to each other's selections:

pieChart.width(200)
.height(200)
.slicesCap(4)
.dimension(cityDimension)
.group(cityGroup);

rowChart.width(500)
.height(500)
.dimension(neighborhoodDimension)
.group(neighborhoodGroup);

dc.renderAll();

Here is a jsfiddle for this example: http://jsfiddle.net/djmartin_umich/Xbd4X/

DC.js does not yet support default removal of rows with 0 value, which you might want in this case.

You might want to refer to this thread if you desire this behaviour: https://groups.google.com/forum/#!topic/dc-js-user-group/WKofifAkThg