Skip to content

Instantly share code, notes, and snippets.

@sugi2000

sugi2000/README.md

Last active July 8, 2016 07:08
Show Gist options
  • Save sugi2000/3040987afccbc9e59c0a152433112597 to your computer and use it in GitHub Desktop.
Save sugi2000/3040987afccbc9e59c0a152433112597 to your computer and use it in GitHub Desktop.
Download ZIP
第23回参議院議員通常選挙 比例代表
Raw
README.md
Raw
index.html
<!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>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 80};
var width = 860;
var height = 550;
var svg = d3.select('body')
.append('svg')
.attrs({
"width": width + margin.left + margin.right,
"height": height + margin.top + margin.bottom,
})
.append('g')
.attr('transform', 'translate('+margin.left+','+margin.top+')');
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 partyData = d3.nest()
.key(function(d){ return d.party; })
.key(function(d){ return d.candidate; })
// .sortKeys(function (a, b) { return d3.descending(a['得票数'], b['得票数']); })
// .rollup(function(d) { return +d[votesKey]; })
.entries(data);
// .map(data);
// 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; });
var candidates = d.values.map(function(v){
return {
party: d.key,
name: v.key,
votes: v.values[0].votes,
y0: y0,
y1: y0 += v.values[0].votes,
};
});
// candidates.sort(function(a,b){ return b.votes - a.votes; });
console.log(candidates);
d.candidates = candidates;
d.winners = [];
d.total = d3.sum(candidates, function(c){return c.votes;});
d.denominator = 1;
});
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;
var winners = party.selectAll('.winners')
.data(function(d) {return d.winners; })
.enter()
.append('circle')
.attrs({
class: 'winners',
cx: function(d, i) { return padding + ((i % 2) + .5) * (size + padding); },
cy: function(d, i) { return padding + (Math.floor(i / 2) + .5) * (size + padding); },
r: 0,
stroke: '#fff',
'stroke-width': 2,
fill: function(d) { return partyColor(d.name); },
});
var timer = setTimeout(function(){
party.selectAll('.winners-order')
.data(function(d) {return d.winners; })
.enter()
.append('text')
.attrs({
class: 'winners-order',
x: function(d, i) { return padding + ((i % 2)+.5) * (size + padding); },
y: function(d, i) { return padding + (Math.floor(i / 2)+.6) * (size + padding); },
'text-anchor': 'middle',
'font-weight': 'bold',
fill: '#fff',
})
.text(function(d,i){return d.order;});
}, 250);
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 removeWinners() {
clearTimeout(pickTimer);
d3.selectAll('.party').data().forEach(function(d){
d.denominator = 1;
});
svg.selectAll('.party').data().forEach(function(d){
d.winners = [];
});
var winners = svg.selectAll('.winners, .winners-order')
.data([]);
winners.exit().remove();
}
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);
}
function transitionCandidates() {
removeWinners();
svg.selectAll('.votes')
.transition()
.duration(1000)
.attrs({
fill: function(d){ return color(d.name); },
});
svg.selectAll('.party-votes')
.transition()
.duration(1000)
.attrs({
width: 0,
});
}
function endall(transition, callback) {
if (!callback) callback = function(){};
if (transition.size() === 0) { callback() }
var n = 0;
transition
.each(function() { ++n; })
.each("end", function() { if (!--n) callback.apply(this, arguments); });
}
d3.select(self.frameElement).style("height", height + margin.top + margin.bottom + "px");
</script>
</body>
</html>
Raw
result.csv
政党 名簿登録者 得票数
自由民主党 政党名 14080143.000
自由民主党 つげ芳文 429002.906
自由民主党 山田としお 338485.641
自由民主党 佐藤まさひさ 326541.343
自由民主党 石井みどり 294079.739
自由民主党 橋本聖子 279953.190
自由民主党 羽生田たかし 249818
自由民主党 佐藤のぶあき 215506.522
自由民主党 赤池まさあき 208319.530
自由民主党 山東昭子 205779.472
自由民主党 えとうせいいち 204404
自由民主党 石田まさひろ 201109
自由民主党 ありむら治子 191342
自由民主党 宮本しゅうじ 178480
自由民主党 丸山和也 153303
自由民主党 北村つねお 142613
自由民主党 わたなべ美樹 104175.628
自由民主党 木村よしお 98979.184
自由民主党 太田ふさえ 77173
自由民主党 わかさ勝 76829
自由民主党 そのだ修光 65840
自由民主党 大江やすひろ 59376
自由民主党 佐々木洋平 56082.962
自由民主党 きむらりゅうじ 47627.116
自由民主党 伊藤ようすけ 37423.866
自由民主党 金子ぜんじろう 34866
自由民主党 塚原光男 28902.911
自由民主党 あぜもとしょうご 28519
自由民主党 佐竹まさあき 27582.194
自由民主党 米坂ともあき 18078
民主党 政党名 4827158.000
民主党 いそざき哲史 271553
民主党 浜野よしふみ 235917.899
民主党 あいはらくみこ 235636
民主党 大島くすお 191167
民主党 神本みえ子 176290
民主党 吉川さおり 167437.432
民主党 石上としお 152121.783
民主党 かわいたかのり 138830.531
民主党 石井一 123355.118
民主党 さだみつ克之 120782
民主党 とどろき利治 103996
民主党 ツルネンマルテイ 82858
民主党 かの道彦 82404
民主党 やなせ進 53940
民主党 円より子 49008.634
民主党 いがらし文彦 29077
民主党 吉田公一 27890.809
民主党 奥村てんぞう 27284.303
民主党 ささき隆博 24329.529
民主党 たるい良和 13178
日本維新の会 政党名 5191563.306
日本維新の会 アントニオ猪木 356605
日本維新の会 中山恭子 306341
日本維新の会 ギマ光男 40484.066
日本維新の会 藤巻健史 33237
日本維新の会 中野正志 32926
日本維新の会 むろい邦彦 32107
日本維新の会 土田ひろかず 28616
日本維新の会 おくむら慎太郎 27954.554
日本維新の会 桜井よう子 27757.216
日本維新の会 石井よしあき 25986.231
日本維新の会 浅田ますみ 22406
日本維新の会 うえの公成 21457
日本維新の会 石原結實 19097
日本維新の会 松村よしやす 18888
日本維新の会 山崎たい 18130.935
日本維新の会 片岡伸子 16329
日本維新の会 川口ひろし 16079.702
日本維新の会 宮崎ケンジ 15464.075
日本維新の会 くりはら博 14274
日本維新の会 せと健一郎 12768
日本維新の会 矢口けんいち 11327
日本維新の会 富山よしのぶ 10186.114
日本維新の会 石川てるひさ 10147
日本維新の会 伊賀やすお 9269.133
日本維新の会 にへいふみたか 7637
日本維新の会 岩本壮一郎 7167
日本維新の会 遠藤のぶひこ 7061
日本維新の会 松本こういち 6122.171
日本維新の会 竹内栄一 4991
日本維新の会 高田きよこ 2921
公明党 政党名 3333142.000
公明党 山本かなえ 996959.690
公明党 平木だいさく 770682
公明党 かわの義博 703637
公明党 山本ひろし 592815.950
公明党 若松かねしげ 577951
公明党 魚住ゆういちろう 540817
公明党 新妻ひでき 26044.410
公明党 川島信雄 7737.940
公明党 鈴木充 4695.331
公明党 清水定幸 2626
公明党 松葉玲 2332.259
公明党 宮地広助 2327
公明党 雨宮秀樹 1831.569
公明党 鷲岡秀明 1682
公明党 深澤淳 1119
公明党 窪田哲也 1051
公明党 四重田雅俊 631
みんなの党 政党名 4221422.000
みんなの党 川田龍平 117389
みんなの党 山口かずゆき 75000
みんなの党 渡辺みちたろう 50253.413
みんなの党 井上よしゆき 47756.805
みんなの党 かわい純一 39425.249
みんなの党 山本こうじ 37718.087
みんなの党 いしい竜馬 35364.782
みんなの党 本田あきこ 32330.469
みんなの党 梅沢しげお 23035
みんなの党 菅原なおとし 21135
みんなの党 きくちふみひろ 12676
みんなの党 平智之 11927
みんなの党 富岡ゆきお 11305
みんなの党 こさいたろう 10527
みんなの党 ふなびきこうこ 7896
生活の党 政党名 723987.000
生活の党 山岡けんじ 56372.620
生活の党 みやけ雪子 38766.890
生活の党 広野ただし 35554
生活の党 藤原よしのぶ 34568.833
生活の党 東祥三 33146
生活の党 はたともこ 21441.234
日本共産党 政党名 4647765.693
日本共産党 小池晃 134325.222
日本共産党 山下よしき 129149
日本共産党 紙智子 68729.911
日本共産党 井上さとし 50874.765
日本共産党 仁比そうへい 39768
日本共産党 山本陽子 36580.595
日本共産党 あさか由香 8429
日本共産党 木村けんじ 6595.040
日本共産党 池内さおり 6387.512
日本共産党 村上信夫 4545.057
日本共産党 辻源巳 4231
日本共産党 大西オサム 4087
日本共産党 こだか洋 3359.573
日本共産党 ニシヒラ守伸 2875
日本共産党 たけだ良介 2395
日本共産党 江上ひろゆき 2144
日本共産党 井沢孝典 1814.089
社会民主党 政党名 938227.000
社会民主党 又市征治 156155
社会民主党 山シロ博治 112641
社会民主党 矢野あつ子 26278
社会民主党 鴨ももよ 21934
みどりの風 政党名 319700.769
みどりの風 谷岡くにこ 51367
みどりの風 山田正彦 44231.110
みどりの風 井戸川かつたか 15444
新党大地 政党名 398848.000
新党大地 鈴木宗男 62902.333
新党大地 松木けんこう 38721
新党大地 内山あきら 6828.266
新党大地 橋本べん 3643.417
新党大地 町川じゅんこ 3313.385
新党大地 はぎはら仁 2934
新党大地 ささ節子 2647.044
新党大地 前川ひかる 1834
新党大地 田宮かいち 1475
緑の党グリーンズジャパン 政党名 242460.295
緑の党グリーンズジャパン 三宅洋平 176970.480
緑の党グリーンズジャパン すぐろ奈緒 9109
緑の党グリーンズジャパン 長谷川ういこ 7431
緑の党グリーンズジャパン 木田せつこ 5219.945
緑の党グリーンズジャパン 大野たくお 4577
緑の党グリーンズジャパン 木村ゆういち 4549.357
緑の党グリーンズジャパン 田口まゆ 3308
緑の党グリーンズジャパン しまざきなおみ 2223
緑の党グリーンズジャパン 尾形けいこ 2014
幸福実現党 政党名 153296.000
幸福実現党 やない筆勝 17010
幸福実現党 トクマ 16797
幸福実現党 いざわ一明 4540.622
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment