DC.js - Connected pie and row chart

by Gordon Woodhull

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css">
        <title>Allocation Template</title>
  
    <body>           
            
      <div class="row">
        <div class="col-sm-3 well">

          <h4>Counterparty</h4>
          <div id="menuselect" style="float:none;"></div>
        </div>
        <div class="col-sm-3 well">
          <h4>Date</h4>
          <div id="menuselect2" style="width:300px; float:none;"></div>
        </div>
        <div class="col-sm-6 well" style="height:400px;">
          <div class="col-sm-12"></div>
          <h4>Counterparty Distribution</h4>
          <div id="volume-chart"></div>
        </div>
      </div>         

      <div class="row">
        <div class="col-sm-12 well">
          <h4>Counterparty Distribution</h4>
          <div id="dc-cpty-chart"></div>
        </div>
      </div>
      
      <pre>
date,cpty,na,ma,ac,hs,ss,LeafID,ead,ead_CEM
15.01.2017,Southwestern Energy,NS::SWN,CSA::SWN,IR,CHF,1,T::6290,6141.596552,570971.2303
19.07.2016,Southwestern Energy,NS::SWN,CSA::SWN,IR,CHF,1,T::6290,6141.596552,570971.2303
17.10.2016,Southwestern Energy,NS::SWN,CSA::SWN,IR,CHF,1,T::6290,6141.596552,570971.2303
19.07.2016,Southwestern Energy,not-net,_,_,_,_,T::7994,31858.95692,0
17.10.2016,Southwestern Energy,not-net,_,_,_,_,T::7994,31858.95692,0
19.07.2016,Illumina Inc,NS::ILMN,CSA::ILMN,IR,USD,2,T::10000,38540.64338,12483.826
17.10.2016,Illumina Inc,NS::ILMN,CSA::ILMN,IR,USD,1,T::10000,38540.64338,12483.826
15.01.2017,Illumina Inc,NS::ILMN,CSA::ILMN,IR,USD,1,T::10000,38540.64338,12483.826
14.07.2017,Illumina Inc,NS::ILMN,CSA::ILMN,IR,USD,1,T::10000,38540.64338,12483.826
15.04.2017,Illumina...

CSS

body 
            {
             margin-top:10px;
             margin-left:20px;
             margin-right:0px;

            }

        
        #dc-cpty-chart svg g .axis.x .tick {
            display: none; 
        }
        
        pre {display:none;}

JavaScript

var saccr = d3.csv.parse( d3.select("pre").text() );
    var parser = d3.time.format("%d.%m.%Y");
    //var formatter=d3.time.format("%d.%m.%Y");
    saccr.forEach(function(d) {
      d.date   = parser.parse(d.date);
      d.ead = +d.ead;
    });


    var cptyChart = dc.barChart("#dc-cpty-chart");
    var lineChart = dc.lineChart("#volume-chart");        

    var ndx = crossfilter(saccr);

    var dimdate = ndx.dimension(function(d) { return d.date;});
    var dimline = ndx.dimension(function(d) { return d.date;});
    var minDate = dimdate.bottom(1)[0].date;
    var maxDate = dimdate.top(1)[0].date;
    var dimcpty = ndx.dimension(function(d) { return d.cpty;});
    var dimcptyC = ndx.dimension(function(d) { return d.cpty;});

    var groupdate = dimdate.group().reduceSum(function(d){return d.ead/1000000;});
    var groupline = dimline.group().reduceSum(function(d){return d.ead/1000000;});
    var groupcpty = dimcpty.group().reduceSum(function(d){return d.ead/1000000;});
    var spendhisto=dimcptyC.group().reduceSum(function(d){return d.ead/1000000;});
    var groupcptyC = remove_empty_bins(spendhisto);

    //                //a dropdown widget
    selectField=dc.selectMenu('#menuselect')
      .dimension(dimcpty)
      .group(groupcpty);

    selectField2=dc.selectMenu('#menuselect2')
      .dimension(dimdate)
      .group(groupdate);

    var oldHandler = selectField2.filterHandler();
    selectField2.filterHandler(function(dimension, filters) {
    	var parseFilters = filters.map(function(d) { return new Date(d);})
      oldHandler(dimension, parseFilters);
      return filters;
    });

    //a line chart
    lineChart
      .height(350)
      .width(500)
      .margins({top:10, right:50, bottom: 30, left: 50})
      .dimension(dimline)
      .group(groupline)
      .renderArea(true)
      .transitionDuration(500)
      .x(d3.time.scale().domain([minDate,maxDate]))
      .elasticY(true)
      .renderHorizontalGridLines(true);


    var barTip2=[];...