DC.js - Connected pie and row chart

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<div id="pieChart"> </div>
<div id="rowChart"> </div>

JavaScript

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
}];
var pieChart = dc.pieChart("#pieChart"),
    rowChart = dc.rowChart("#rowChart");
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;
    });

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

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

dc.renderAll();