第23回参議院議員通常選挙比例代表

#第23回参議院議員通常選挙(2013) 比例代表結果

非拘束名簿式比例代表制（改選定数48）の結果です。

データソース -総務省第23回参議院議員通常選挙結果調

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 11px sans-serif;
  font-weight: bold;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.y.axis text {
  font-weight: normal;
}

.x.axis path, .x.axis line {
  display: none;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<body>
  <form>
    <label><input type="radio" name="mode" value="parties">党派別得票数</label>
    <label><input type="radio" name="mode" value="candidates" checked>名簿登載者別得票数</label>
    <label><input type="radio" name="mode" value="winners">当選人数</label>
  </form>

var x = d3.scaleBand()
            .rangeRound([0, width])
            .padding(.1);
    var y = d3.scaleLinear()
            .rangeRound([height, 0]);
    var color = d3.scaleOrdinal(d3.schemeCategory20.reverse());
    var partyColor = d3.scaleOrdinal(d3.schemeCategory10);
    var quotient = function(d) { return d.total / d.denominator; };
    var xAxis = d3.axisBottom(x);
    var yAxis = d3.axisLeft(y);

var partyKey = '政党';
    var candidateKey = '名簿登録者';
    var votesKey = '得票数';

var partyVotes;
    var winners;
    var pickTimer;

d3.csv('result.csv', function(error, data){
      if (error) { throw error; }

data.forEach(function(d){
        d.party = d[partyKey];
        d.candidate = d[candidateKey];
        d.votes = +d[votesKey];
      });

// var domain = d3.keys(data[0]).filter(function(d){return d !== partyKey});

partyData.forEach(function(d){
        var y0 = 0;

d.values.sort(function(a,b){ return b.values[0].votes - a.values[0].votes; });

partyData.sort(function(a,b){ return b.total - a.total; });
      partyData.forEach(function(d){
        if (d.key.length > 6) {
          d.key = d.key.substr(0, 3);
        }
      });
      x.domain(partyData.map(function(d) { return d.key; }));
      y.domain([0, d3.max(partyData.map(function(d){return d.total;}))]);

console.log(data);
      console.log(partyData);
      // console.log(d3.entries(partyData));

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("x", "-2em")
          .attr("y", y(y.ticks(10).pop()))
          .attr("dy", "-2em")
          .attr("text-anchor", "end")
          .attr("fill", "#000")
          .text(votesKey);

var g = svg.selectAll('.party')
        .data(partyData)
        .enter()
        .append('g')
        .attrs({
          class: function(d){ return 'party ' + d.key; },
          transform: function(d,i) { return 'translate('+ x(d.key) +', 0)' },
        });

g.selectAll('.votes')
        .data(function(d){ return d.candidates; })
        .enter()
        .append('rect')
        .attrs({
          class: 'votes',
          x: 0,
          y: function(d){ return y(d.y1); },
          width: x.bandwidth(),
          height: function(d){ return y(d.y0) - y(d.y1); },
          fill: function(d){ return color(d.name); },
          opacity: 1,
        });

partyVotes = g.selectAll('.party-votes')
        .data(function(d){ return [{
          name: d.key,
          total: d.total,
          denominator: d.denominator,
        }]; })
        .enter()
        .append('rect')
        .attrs({
          class: 'party-votes',
          x: 0,
          y: function(d){ return y(quotient(d)); },
          width: 0,
          height: function(d){ return y(0) - y(quotient(d)); },
          fill: function(d){ return partyColor(d.name); },
        });
    });

function getFirstPartyVotes() {
      var maxVotes = 0;
      var firstParty;
      partyVotes.nodes().forEach(function(d){
        var party = d3.select(d);
        if (quotient(party.data()[0]) > maxVotes) {
          firstParty = party;
          maxVotes = quotient(party.data()[0]);
        }
      });
      // console.log(firstParty, maxVotes);

return firstParty;
    }

function pickWinner() {
      var numWinner = d3.selectAll('.winners').nodes().length;
      if (numWinner >= 48) {
        return;
      }
      // var q = d3.queue();

var firstPartyVotes = getFirstPartyVotes();
      var party = d3.select(firstPartyVotes.node().parentNode);
      var data = party.data()[0];

data.winners.push({
        name: data.key,
        votes: quotient(data),
        order: numWinner+1,
      });

var padding = 4;
      var size = x.bandwidth() / 2 - padding * 2;

data.denominator++;

partyVotes
        .data(function(d){ return [{
          name: d.key,
          total: d.total,
          denominator: d.denominator,
        }]; })
        .transition()
        .duration(250)
        .attrs({
          y: function(d){ return y(quotient(d)); },
          height: function(d){ return y(0) - y(quotient(d)); },
        });

winners
        .transition()
        .duration(250)
        .attrs({
          r: size / 2,
        });

pickTimer = setTimeout(function(){
            pickWinner();
        }, 400);
    }

d3.selectAll("input").on("change", change);
    function change() {
      removeWinners();
      switch(this.value) {
        case 'parties':
          transitionParties();
          break;
        case 'candidates':
          transitionCandidates();
          break;
        case 'winners':
          transitionParties();
          setTimeout(function(){
              pickWinner();
          }, 1000);
          break;
      }
    }

function transitionParties(callback) {
      svg.selectAll('.votes')
        .transition()
        .duration(1000)
        .attrs({
          fill: function(d){ return d3.hsl(partyColor(d.party)).brighter(); },
          // fill: '#f0f0f0',
        });

// svg.selectAll('.party-votes')
      partyVotes
        .data(function(d){ return [{
          name: d.key,
          total: d.total,
          denominator: d.denominator,
        }]; })
        .transition()
        .duration(1000)
        .attrs({
          width: x.bandwidth(),
          y: function(d){ return y(quotient(d)); },
          height: function(d){ return y(0) - y(quotient(d)); },
        });
        // .call(endall, callback);
    }

d3.select(self.frameElement).style("height", height + margin.top + margin.bottom + "px");

</script>
</body>
</html>

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js