汇总列并在数字图中显示百分比 [英] Summing a column and displaying percentage in a number chart

问题描述

我想对列 elecVotes 求和，然后将其除以某个州的 elecVote 单击该按钮，以便我可以显示该州有价值的选举投票的百分比，并将其显示在 dc.numberDisplay 中。

I would like to sum the column elecVotes and then divide it by the elecVote of a state that has been clicked on so that I can show the percentage of the electoral vote that state is worth and display it in a dc.numberDisplay.

这是我的数据结构：

//已更新

ElecVotes.csv：

ElecVotes.csv:

州，elevVotes，
阿拉巴马州，9
阿拉斯加，3
阿肯色州，6
亚利桑那州，11
佛罗里达州，29
佐治亚州，16
爱荷华州，6
爱达荷州，4
印第安纳州，11
堪萨斯州，6
肯塔基州，8

data.csv：

州，政党，投票，获胜者，电子投票
阿拉巴马州，民主人士，725704,1,9
阿拉巴马州，共和党人，1314431,1,9
阿拉巴马州，自由主义者，44211,1， 9
阿拉巴马州，绿色，20276,1,9
阿拉巴马州，其他，0,1,9
阿拉巴马州，制宪党，9341,1,9
阿拉斯加，民主，116454 ，1,3
阿拉斯加，共和党163387,1,3
阿拉斯加，自由主义者，18725,1,3
阿拉ska，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();

    }); 
    });            

};

推荐答案

所以，在上面的评论中，这是一个小提琴，几乎说明了我将如何处理此问题： https://jsfiddle.net/esjewett / u9dq33v2 / 1 /

So, to expand on the comments above a bit, here is a fiddle that pretty much shows how I would approach this: https://jsfiddle.net/esjewett/u9dq33v2/1/

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

This just loads the data from inline in the page.

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

设置图表。在此示例中，我将使用rowChart以及numberDisplay，以便您可以了解如何进行维/组设计进行过滤。

Set up your charts. In this example I am using a rowChart as well as the numberDisplay so that you can see how you need to approach dimension/group design for filtering.

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

映射您要根据州进行选民投票的地方。

Set up the Map that you're going to do the lookup of your electoral votes based on the state.

var elecVotesMap = d3.map()

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

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

Set up your Crossfilter and dimension. Note that we are setting up 2 sets of identical dimensions and groups. Groups do not respect filters on their own dimension, so if you use the same dimension (or groups based on the same dimension) in both charts, it will not filter.

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 })

设置状态投票rowChart。您可以单击此选项以仅将其限制在阿拉巴马州或阿拉斯加。

Set up the state votes rowChart. You can click on this to restrict to just Alabama or Alaska.

states
  .dimension(dim1)
  .group(grp1)

设置数字显示。请注意，numberDisplay将显示任何 grp2.top（1）返回的内容。因此，如果您在rowChart中选择多个状态，它将显示投票最多的状态（或您将 grp2.order（）设置为的任何状态）。如果要汇总所有内容，请使用 top 方法将对象包装到对象中，该方法将返回要显示的内容，并将包装器传递给numberDisplay。

Set up the numberDisplay. Note that the numberDisplay will display whatever grp2.top(1) returns. So if you select more than one state in the rowChart, it will display the state with the most votes (or whatever you have set your grp2.order() as). If you want to total everything up, wrap your group with an object with a top method that will return what you want to show, and pass the wrapper to the numberDisplay.

在 numberDisplay.valueAccessor 中，您可以访问组的键和值。使用键（州名）查找该州的选举人票。

In numberDisplay.valueAccessor, you have access to both the key and the value of the group. Use the key (the name of the state) to look up the electoral votes for that state. That's what will display.

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

dc.renderAll()

这篇关于汇总列并在数字图中显示百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！