Geek Answers Handbook

Loading multiple CSVs into DC.js, adding a value and combining the results into a single data table

I have four CSVs with the same header information, each of which represents a quarterly result for a year.

So for one result, I can load it and display it in a dataTable, just using

d3.csv("data/first-quarter"), function(dataQ1){
    dataQ1.forEach(function(d){
        d.callTypes = d['Call Types'];
        d.callDesc  = d['Call Description'];
        d.callVol = d['Call Volume'];
        d.quarter   = 'Q1'; 
    });

    var facts = crossfilter(dataQ1);
    var timeDimension = facts.dimension(function(d){
       return d.quarter;
    });

    dataTable
      ... //data table attributes

    dc.renderAll();
});

However, complications arise when I try to extract from several sources and add results.

One of my approaches was to put all the path names in an array and iterate through forEach with a flag to show when it was the last iteration to display the table. But this failed with the error "Too many recursions."

And next was the nest as such

d3.csv(filesPathNames[0], function(dataQ1){
  d3.csv(filesPathNames[1], function(dataQ2){
    d3.csv(filesPathNames[2], function(dataQ3){
      d3.csv(filesPathNames[3], function(dataQ4){

, , - , CSV . , : , dataQ1, dataQ2, dataQ3 dataQ4.

Q1, Q2, Q3 Q4 ?

+4
1

, . , :

1) :

<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
var q = queue()
    .defer(d3.csv, "data/first-quarter")
    .defer(d3.csv, "data/second-quarter");

2) :

q.await(function(error, q1data, q2data) {

3) :

    var ndx = crossfilter();
    ndx.add(q1data.map(function(d) {
        return { callTypes: d['Call Types'], 
                 callDesc: d['Call Description'],
                 callVol: d['Call Volume'],
                 quarter: 'Q1'};
    }));
    ndx.add(q2data.map(function(d) {
        return { callTypes: d['Call Types'], 
                 callDesc: d['Call Description'],
                 callVol: d['Call Volume'],
                 quarter: 'Q2'};
    }));

4) , :

var timeDimension = ndx.dimension(function(d){
   return d.quarter;
});

dataTable
  ... //data table attributes

dc.renderAll();

dc.js: https://github.com/dc-js/dc.js/blob/master/web/examples/composite.html

+7

More articles:


All Articles