对列求和并在数字图表中显示百分比

Question

我想对 elecVotes 列求和，然后除以已单击的州的 elecVote，这样我就可以显示该州的选举人票百分比价值并将其显示在 dc.numberDisplay.

这是我的数据结构：

//已更新

ElecVotes.csv:

state,elecVotes, Alabama,9 Alaska,3 Arkansas,6 Arizona,11 Florida,29 Georgia,16 Iowa,6 Idaho,4 Indiana,11 Kansas,6 Kentucky,8

data.csv:

state,party,votes,winner,elecVote Alabama,Democratic,725704,1,9 Alabama,Republican,1314431,1,9 Alabama,Libertarian,44211,1,9 Alabama,Green,20276,1,9 Alabama,Other,0,1,9 Alabama,Constitution Party,9341,1,9 Alaska,Democratic,116454,1,3 Alaska,Republican,163387,1,3 Alaska,Libertarian,18725,1,3 Alaska,Green,5735,1,3 Alaska,Constitution Party,3866,1,3 Alaska,Other,10441,1,3

代码：

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

        data.forEach(function(r) {
        r.votes = +r.votes;
        r.elecVote = +r.elecVote;
        });       

        var elecVotes = d3.csv.parse("elecVotes")
        var elecVotesMap = d3.map()

        elecVotes.forEach(function(r){
            elecVotesMap.set(r.state, +r.elecVotes)
        });

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

    // set up the dimensions
        var stateDim = ndx.dimension(function(d) { return d.state; });
        var stateDim2 = ndx.dimension(function(d) { return d.state; });
        var stateDim3 = ndx.dimension(function(d) { return d.state; });
        var partyDim = ndx.dimension(function(d) { return d.party; });
        var winnerDim = ndx.dimension(function(d) { return d.winner; });
        var elecVotesDim = ndx.dimension(function(d) { return d.elecVote;});

        var stateDim4 = ndx.dimension(function(d) { return d.state; }),
        group = stateDim4.group().reduceSum(function(d) {return d.elecVote 
        }),
        count = group.top(51);
        count[0].key;
        count[0].value;

    // set up the groups/values
        var state = stateDim.group();
        var party = partyDim.group().reduceSum(function(d) { return d.votes;});
        var party2 = partyDim.group().reduceSum(function(d) { return d.votes;});
        var winner = stateDim2.group().reduceSum(function(d) { return d.winner; });
        var elecVotes = stateDim3.group().reduceSum(function(d) { return d.elecVote; });
        var group = stateDim4.group().reduceSum(function(d) { return d.votes; } )

    // the 4 different charts - options are set below for each one.
        var pie = dc.pieChart('#chart-pie');
        var usmap = dc.geoChoroplethChart("#usmap");
        var selectMenu = dc.selectMenu('#select-container');
        var percentElec = dc.numberDisplay("#percentage-elec-vote");

        var colorScale = d3.scale.ordinal().domain(["Democratic","Republican","Libertarian","Green","Constitution Party","Other"])  //set colour based on party
        .range(["#4682B4","#B22222","#DAA520","#228B22","#80f2ee","#D3D3D3"]);

        var stateColor = d3.scale.ordinal().domain(["1","2",""]).range(["#B22222","#4682B4","#B2B7B2"]);    //set colour based on which party won

        selectMenu
        .dimension(stateDim3)
        .group(state)
        .onClick = function() {};

        selectMenu.title(function (d){
            return d.key;
        })

    //create pie from to show popular vote for each state
        pie
        .width(300)
        .height(180)
        .radius(80)
        .dimension(stateDim2)
        .group(party)
        .legend(dc.legend())
        .colors(colorScale)
        .innerRadius(10)
        .transitionDuration(500)
        .filter = function() {};

    //number chart to show percentage of electoral vote for each state
        percentElec
        .group(group)
        .formatNumber(d3.format("d"))          
        .valueAccessor(function(d){ return elecVotesMap.get(d.key); })

    //display US map                    
        usmap
        .width(900)
        .height(500)
        .dimension(stateDim)
        .group(winner)
        .colors(stateColor)
        .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();

    }); 
    });            

};

Answer 1

所以，为了进一步扩展上面的评论，这里有一个 fiddle，它几乎展示了我将如何处理这个问题：https://jsfiddle.net/esjewett/u9dq33v2/1/

这只是从页面内嵌加载数据。

var elecVotes = d3.csv.parse(document.getElementById("ElecVotes.csv").innerHTML)
var data = d3.csv.parse(document.getElementById("data.csv").innerHTML)

设置您的图表。在此示例中，我使用了 rowChart 和 numberDisplay，以便您了解需要如何处理 dimension/group 过滤设计。

var percentElec = dc.numberDisplay("#percentage-elec-vote");
var states = dc.rowChart("#state-votes")

设置您要根据州查找选举人票的地图。

var elecVotesMap = d3.map()

elecVotes.forEach(function(r){
  elecVotesMap.set(r.state, +r.elecVotes)
});

设置您的交叉过滤器和维度。请注意，我们正在设置 2 组相同的维度和组。组不尊重其自身维度的过滤器，因此如果您在两个图表中使用相同的维度（或基于相同维度的组），它将不会过滤。

var cf = crossfilter(data)
var dim1 = cf.dimension(function(d) { return d.state; })
var grp1 = dim1.group().reduceSum(function(d) { return +d.votes })

var dim2 = cf.dimension(function(d) { return d.state; })
var grp2 = dim2.group().reduceSum(function(d) { return +d.votes })

设置状态投票行图表。您可以单击此按钮以限制为仅阿拉巴马州或阿拉斯加。

states
  .dimension(dim1)
  .group(grp1)

设置数字显示。请注意，numberDisplay 将显示任何 grp2.top(1) returns。因此，如果您在 rowChart 中 select 多个州，它将显示得票最多的州（或您将 grp2.order() 设置为的任何州）。如果你想把所有的东西都加起来，用一个对象包装你的组，用一个 top 方法来 return 你想显示的东西，然后把包装器传递给 numberDisplay.

在numberDisplay.valueAccessor中，您可以访问组的键和值。使用键（州名）查找该州的选举人票。这就是将要显示的内容。

percentElec
  .group(grp2)
  .formatNumber(d3.format("d"))          
  .valueAccessor(function(d){ return elecVotesMap.get(d.key); })

dc.renderAll()

对列求和并在数字图表中显示百分比

Summing a column and displaying percentage in a number chart

crossfilter

dc.js