dc.js - Selecting Columns in csv to Render Chart

Question

So assume that I have a .csv that is formatted like this:

agegroup    state    gender    score1    bin1     score2    bin2
 18-25        TX       F        .15        1       .20       3 
 18-25        FL       F        .34        4       .11       7
  65+         CA       M        .72        3       .33       9
 46-54        TX       M        .90        6       .08       1
 46-54        TX       F        .15        1       .11       7

Right now, I can create two bar charts for the columns, bin1 and bin2. I also have a display that will sum up score1 and score2.

However, as I add more scores and bins, I don't want to create more and more bar charts and displays for each column added. So if the new csv looks like this:

agegroup    state    gender    score1    bin1     score2    bin2   score3    bin3    score4    bin4
 18-25        TX       F        .15        1       .20       3      .51       2       .23       6
 18-25        FL       F        .34        4       .11       7      .79       1       .64       4
  65+         CA       M        .72        3       .33       9      .84       7       .55       3
 46-54        TX       M        .90        6       .08       1      .15       2       .47       5
 46-54        TX       F        .15        1       .11       7      .76       8       .09       8

Is there any way I can create a drop-down or something that will tell dc.js which columns (in this case, bin1 through bin4) to create the charts off of and have the display reactive display the correct sums?

Answer 1

You can update the group on the chart and render it.

var groups = {
  bin1: dim.group().reduceSum(function(d) {
    return d.bin1;
  }),
  bin2: dim.group().reduceSum(function(d) {
    return d.bin2;
  })
};

var chart = dc.barChart("#chart")
  .width(400)
  .height(200)
  .x(d3.scale.linear().domain([1, 4]))
  .dimension(dim)
  .group(groups.bin1);

chart.render();

function changeBin (binNum) {
  chart.group(groups[binNum]);
  chart.render();
}

And working example using two buttons:

var data = [{
  x: 1,
  bin1: 90,
  bin2: 10

}, {
  x: 2,
  bin1: 20,
  bin2: 20

}, {
  x: 3,
  bin1: 50,
  bin2: 30

}, {
  x: 4,
  bin1: 100,
  bin2: 40

}];
var cf = crossfilter(data);

var dim = cf.dimension(function(d) {
  return d.x;
});

var groups = {
  bin1: dim.group().reduceSum(function(d) {
    return d.bin1;
  }),
  bin2: dim.group().reduceSum(function(d) {
    return d.bin2;
  })
};

var chart = dc.barChart("#chart")
  .width(400)
  .height(200)
  .x(d3.scale.linear().domain([1, 4]))
  .dimension(dim)
  .group(groups.bin1);

chart.render();

function changeBin (binNum) {
  chart.group(groups[binNum]);
  chart.render();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>

<div id="chart"></div>
<button onclick="changeBin('bin1');">Bin 1</button>
<button onclick="changeBin('bin2');">Bin 2</button>