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