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

所以，为了扩展上面的评论，这里有一个小提琴，几乎可以说明我将如何处理这个问题：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，这样您就可以看到如何进行维度/组设计以进行过滤。

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

设置Crossfilter和尺寸。请注意，我们正在设置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 })

设置状态投票rowChart。你可以点击它来限制只有阿拉巴马州或阿拉斯加州。

states
  .dimension(dim1)
  .group(grp1)

设置numberDisplay。请注意，numberDisplay将显示grp2.top(1)返回的内容。因此，如果您在rowChart中选择多个状态，它将显示投票最多的状态（或者您将grp2.order()设置为的任何状态）。如果你想要总结一切，请用一个带有top方法的对象包装你的组，该方法将返回你想要显示的内容，并将包装器传递给numberDisplay。

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

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

dc.renderAll()

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

1 个答案: