dc.js pie chart is empty

Question

I'm trying to link a pie chart to a map so that when you click a state the pie chart updates with the popular vote for that state.

Currently my piechart is displaying empty.

Csv is formatted like so:

state, party, votes
Alabama,dem,725704
Alabama,rep,1314431
Alabama,lib,44211
Alabama,gre,20276
Alabama,con,9341
Alaska,dem,116454
Alaska,rep,163387
Alaska,lib,18725
Alaska,gre,5735
Alaska,con,3866
Alaska,other,10441

My code:

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

       // set up crossfilter on the data.
        var ndx = crossfilter(data);

    // set up the dimensions
        var stateDim = ndx.dimension(function (d) { return d.state; });
        var party = partyDim.group().reduceSum(function(d) { return d.votes;});
        var votesDim = ndx.dimension(function(d) { return d.votes; });

    // set up the groups/values
        var state = stateDim.group();
        var party = partyDim.group(); 
        var votes = votesDim.group();

    // the 4 different charts - options are set below for each one.
        var pie = dc.pieChart('#chart-pie');
        var usmap = dc.geoChoroplethChart("#usmap");

    //create pie from to show popular vote for each state
        pie
        .width(180)
        .height(180)
        .radius(80)
        .dimension(partyDim)
        .group(votes)
        .renderLabel(true)
        .innerRadius(10)
        .transitionDuration(500)
        .colorAccessor(function (d, i) { return d.value; });

    //display US map                    
        usmap
        .width(900)
        .height(500)
        .dimension(stateDim)
        .group(state)
        .colors(["rgb(20,202,255)","rgb(144,211,035)"])
        .overlayGeoJson(json.features, "name", function (d) { return d.properties.name; })      


        // at the end this needs to be called to actually go through and generate all the graphs on the page.
        dc.renderAll();
    }); 
    });

I'm not sure what i'm doing wrong

Gordon Gordon · Accepted Answer · 2017-03-31T18:39:25

I don't think you want a votesDim - that would group by the number of votes, so you would probably end up with a different bin for each count, since they are likely to be unique.

I'm guessing you probably want to count the number of votes for each party, so:

var partyGroup = partyDim.group().reduceSum(function(d) { return d.votes; });

Remember that a dimension specifies what you want to filter on, and a group is where data gets aggregated and read.

You also need to convert any numbers explicitly before you get started, since d3.csv will read every field as a string. So:

data.forEach(function(r) {
  r.votes = +r.votes;
});
var ndx = crossfilter(data);

Not sure if this helps with your problem. Note that this really has nothing to do with the map; the pie chart should be able to draw itself independent of what the map is doing.

Edit

I bet the problem is those spaces in the column names. You could easily end up with fields named " party" and " votes" that way...

dc.js pie chart is empty

1 Answers

Edit