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 · Accepted Answer · 2017-03-31T23:46:33.657

2

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...

edited Mar 31 '17 at 23:46

answered Mar 31 '17 at 18:39

Gordon

19,811
4
36
74

I tried inputting the above code and nothing changed. The only way im getting output is by setting the group to state and this just shows every state in the pie chart. This is causing me some confusion so let me just clarify what I would like to populate the pie with, I'm wanting the pie chart to populate with each party's amount of votes for that particular state when clicked on. So would this be achieved by setting the dimension to state and then grouping by votes? – Mark Harrison Mar 31 '17 at 23:37
Yep, that's what I thought you meant to do. But that's "reducing" or "summing" by votes. It's still grouping by party since by default the group key is the same as the dimension key. – Gordon Mar 31 '17 at 23:44
I noticed something else, see note above. – Gordon Mar 31 '17 at 23:47
YES! It works now! Thanks a lot the support on here is awesome :) – Mark Harrison Mar 31 '17 at 23:50
@MarkHarrison could you shed some light here https://stackoverflow.com/questions/45896119/geo-choropleth-map-and-pie-chart-crossfiltering-using-dc-js? – Steve Doson Aug 26 '17 at 14:06
@Gordon could you too please have a look at the link above? – Steve Doson Aug 26 '17 at 14:28

dc.js pie chart is empty

1 Answers1

Edit