Search code examples
dc.jscrossfilter

Creating multiple column dimension from csv


I'm trying to make a pie chart using multiple columns from a csv file, I can produce a pie chart but it only use the last value d.gre. What am I doing wrong?

Code is below

d3.csv("elecVotes.csv", function (data) {

var ndx = crossfilter(data);
var partysDim = ndx.dimension(function(d) { return +d.rep, +d.dem, +d.lib, +d.ind, +d.gre;})
var partys = partysDim.group();

var pie = dc.pieChart('#chart-pie');

pie
    .width(180)
    .height(180)
    .radius(80)
    .dimension(partysDim)
    .group(partys)
    .renderLabel(true)
    .innerRadius(10)
    .transitionDuration(500)
    .colorAccessor(function (d, i) { return d.value; });

    dc.renderAll();
});

electVotes.csv

state, rep,dem,lib,ind,gre Alabama,1314431,725704,44211,20276,9341 New York,5655,54444,65666,2355,12225 Texas,4355,543234,12321,12331,45644


Solution

  • Gordon's suggestion should work, but I would also urge you to consider getting the data into a more appropriate format up front. It will make your life easier in a lot of ways and when using a lot of different tools. Specifically, you would need to transform your file to having only three columns: State, Party, and Votes. If you are maintaining this data in Excel, do it there. Or you can run this on the file you load:

    var newData = []
    data.forEach(function(d) {
      newData.push({state: d.state, party: 'rep', votes: d.rep})
      newData.push({state: d.state, party: 'dem', votes: d.dem})
      newData.push({state: d.state, party: 'lib', votes: d.lib})
      newData.push({state: d.state, party: 'ind', votes: d.ind})
      newData.push({state: d.state, party: 'gre', votes: d.gre})
    })
    data = newData
    

    Then your Crossfilter dimension and group creation will look like this:

    var ndx = crossfilter(data);
    var partysDim = ndx.dimension(function(d) { return d.party;})
    var partys = partysDim.group().reduceSum(function(d) { return d.votes;});
    

    Again, this is another way of handling the same problem. I think there are big payoffs from organizing your data the right way up front so I usually recommend doing that work and then keeping the Crossfilter/dc.js code nice and simple.