DC.js - Connected pie and row chart

by Nivaldo

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="pieChart"> </div>
<div id="rowChart"> </div>

JavaScript

var data = [{
    "city": "PsycINFO",
        "neighborhood": "release",
        "hits": 1000
}, {
    "city": "PsycINFO",
        "neighborhood": "correction",
        "hits": 700
}, {
    "city": "PsycEXTRA",
        "neighborhood": "release",
        "hits": 600
}, {
    "city": "PsycEXTRA",
        "neighborhood": "correction",
        "hits": 200
}, {
    "city": "PsycTESTS",
        "neighborhood": "release",
        "hits": 200
}, {
    "city": "PsycTESTS",
        "neighborhood": "correction",
        "hits": 100
}];
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(3)
    .dimension(cityDimension)
    .group(cityGroup);

rowChart.width(400)
    .height(200)
    .dimension(neighborhoodDimension)
    .group(neighborhoodGroup);

dc.renderAll();