index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="d3.v4.min.js"></script>
<style>
.top {
color: white;
}
</style>
</head>
<body>
<h1 class="text-center top bg-primary">
<strong>CZECH GENERAL ELECTIONS 2017 (in comparison with 2013)</strong><br/>
<small>SNĚMOVNÍ VOLBY 2017 V ČR (a srovnání s 2013)</small><br />
</h1>
<div id="chart"></div>
<div class="alert alert-info m-2 p-2">
Full color: results 2017<br />
Opaque color: results 2013
</div>
<script>
var margin = {top: 10, right: 20, bottom: 20, left: 50},
width = 960 - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(data) {
var
x = d3.scaleLinear()
.range([0, width])
.domain([-0.5, data.length - 0.5]),
y = d3.scaleLinear()
.range([height, 0])
.domain([0, 0.35]);
var xAxis = d3.axisBottom(x)
.tickFormat(function (i) {
return data[i].name;
});
var yAxis = d3.axisLeft(y)
.ticks(5, "%");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis);
var cw = width / data.length / 3 * 2;
svg.selectAll(".e2013")
.data(data)
.enter().append("rect")
.attr("x", function (d, i) { return x(i) - cw / 2 - cw / 5})
.attr("width", cw)
.attr("y", function (d) { return y(d.gain_2013) })
.attr("height", function(d) { return height - y(d.gain_2013)})
.attr("fill", function (d) { return d.color })
.attr("class", "old")
.attr("style", "fill-opacity: 0.25;")
svg.selectAll(".e2017")
.data(data)
.enter().append("rect")
.attr("x", function (d, i) { return x(i) - cw / 2})
.attr("width", cw)
.attr("y", function (d) { return y(d.gain_2017) })
.attr("height", function(d) { return height - y(d.gain_2017)})
.attr("fill", function (d) { return d.color })
svg.selectAll(".text")
.data(data)
.enter().append("text")
.text(function (d) { return Math.round(10000*d.gain_2017)/100 + " %";})
.attr("text-anchor", "middle")
.attr("x", function (d, i) { return x(i)} )
.attr("y", function (d) { return y(Math.max(d.gain_2017, d.gain_2017)) - height / 20 })
.attr("class", "label")
.style("font-weight", "bold")
svg.selectAll(".text")
.data(data)
.enter().append("text")
.text(function (d) { return "(" + Math.round(10000*d.gain_2013)/100 + " %)";})
.attr("text-anchor", "middle")
.attr("x", function (d, i) { return x(i)} )
.attr("y", function (d) { return y(Math.max(d.gain_2017, d.gain_2017)) - height / 50 })
.attr("class", "label-small")
.style("font-size", "0.8em")
svg.append("line")
.attr("x1", 0)
.attr("y1", function() { return y(0.05) })
.attr("x2", width)
.attr("y2", function() { return y(0.05) })
.style("stroke-dasharray", ("5, 5"))
.style("stroke", "red")
.style("width", "3px")
.attr("class","threshold-line")
d3.selectAll('.x.axis path').style('display','none')
d3.selectAll('.tick text').style('font-size', '1.5em')
})
</script>
</body>
</html>
barchart.svg
<svg width="1010" height="500"><g transform="translate(50,10)"><g class="y axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,470.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,470.5)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">0%</text></g><g class="tick" opacity="1" transform="translate(0,403.35714285714283)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">5%</text></g><g class="tick" opacity="1" transform="translate(0,336.21428571428567)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">10%</text></g><g class="tick" opacity="1" transform="translate(0,269.07142857142856)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">15%</text></g><g class="tick" opacity="1" transform="translate(0,201.9285714285714)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">20%</text></g><g class="tick" opacity="1" transform="translate(0,134.78571428571428)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">25%</text></g><g class="tick" opacity="1" transform="translate(0,67.64285714285711)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">30%</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="#000" x2="-6"></line><text fill="#000" x="-9" dy="0.32em" style="font-size: 1.5em;">35%</text></g></g><g class="x axis" transform="translate(0,470)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H940.5V6" style="display: none;"></path><g class="tick" opacity="1" transform="translate(39.666666666666664,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">ANO</text></g><g class="tick" opacity="1" transform="translate(118,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">ODS</text></g><g class="tick" opacity="1" transform="translate(196.33333333333334,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">Piráti</text></g><g class="tick" opacity="1" transform="translate(274.6666666666667,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">SPD/Úsvit</text></g><g class="tick" opacity="1" transform="translate(353,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">KSČM</text></g><g class="tick" opacity="1" transform="translate(431.3333333333333,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">ČSSD</text></g><g class="tick" opacity="1" transform="translate(509.66666666666663,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">KDU-ČSL</text></g><g class="tick" opacity="1" transform="translate(588,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">TOP 09</text></g><g class="tick" opacity="1" transform="translate(666.3333333333334,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">STAN</text></g><g class="tick" opacity="1" transform="translate(744.6666666666666,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">Svobodní</text></g><g class="tick" opacity="1" transform="translate(823,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">Zelení</text></g><g class="tick" opacity="1" transform="translate(901.3333333333334,0)"><line stroke="#000" y2="6"></line><text fill="#000" y="9" dy="0.71em" style="font-size: 1.5em;">Ostatní</text></g></g><rect x="2.611111111111109" width="52.22222222222222" y="219.46582185714283" height="250.53417814285717" fill="#261060" class="old" style="fill-opacity: 0.25;"></rect><rect x="80.94444444444444" width="52.22222222222222" y="366.1987000342857" height="103.80129996571429" fill="#004494" class="old" style="fill-opacity: 0.25;"></rect><rect x="159.27777777777777" width="52.22222222222222" y="434.2217934542857" height="35.77820654571428" fill="#000000" class="old" style="fill-opacity: 0.25;"></rect><rect x="237.61111111111111" width="52.22222222222222" y="377.50224314" height="92.49775685999998" fill="#eb1b26" class="old" style="fill-opacity: 0.25;"></rect><rect x="315.94444444444446" width="52.22222222222222" y="269.7747621857143" height="200.22523781428572" fill="#8c0000" class="old" style="fill-opacity: 0.25;"></rect><rect x="394.27777777777777" width="52.22222222222222" y="195.25946046857138" height="274.7405395314286" fill="#F07D00" class="old" style="fill-opacity: 0.25;"></rect><rect x="472.6111111111111" width="52.22222222222222" y="378.95291183714284" height="91.04708816285716" fill="#e6ac21" class="old" style="fill-opacity: 0.25;"></rect><rect x="550.9444444444445" width="52.22222222222222" y="308.86824237714285" height="161.13175762285715" fill="#723769" class="old" style="fill-opacity: 0.25;"></rect><rect x="629.2777777777778" width="52.22222222222222" y="470" height="0" fill="#5d8c00" class="old" style="fill-opacity: 0.25;"></rect><rect x="707.6111111111111" width="52.22222222222222" y="436.8840094857143" height="33.11599051428573" fill="#009982" class="old" style="fill-opacity: 0.25;"></rect><rect x="785.9444444444445" width="52.22222222222222" y="427.0324859914286" height="42.96751400857141" fill="#06b15d" class="old" style="fill-opacity: 0.25;"></rect><rect x="864.2777777777778" width="52.22222222222222" y="412.9824264457143" height="57.01757355428572" fill="#888888" class="old" style="fill-opacity: 0.25;"></rect><rect x="13.055555555555554" width="52.22222222222222" y="71.94843700285708" height="398.0515629971429" fill="#261060"></rect><rect x="91.38888888888889" width="52.22222222222222" y="317.96955496" height="152.03044504000002" fill="#004494"></rect><rect x="169.72222222222223" width="52.22222222222222" y="325.01586371428573" height="144.98413628571427" fill="#000000"></rect><rect x="248.05555555555557" width="52.22222222222222" y="327.09061748" height="142.90938252" fill="#eb1b26"></rect><rect x="326.3888888888889" width="52.22222222222222" y="365.6918116142857" height="104.30818838571429" fill="#8c0000"></rect><rect x="404.72222222222223" width="52.22222222222222" y="372.25996372" height="97.74003628000003" fill="#F07D00"></rect><rect x="483.05555555555554" width="52.22222222222222" y="392.0824997485714" height="77.91750025142858" fill="#e6ac21"></rect><rect x="561.3888888888889" width="52.22222222222222" y="398.67161425714283" height="71.32838574285717" fill="#723769"></rect><rect x="639.7222222222223" width="52.22222222222222" y="400.4372380114286" height="69.56276198857142" fill="#5d8c00"></rect><rect x="718.0555555555555" width="52.22222222222222" y="448.97676558" height="21.023234419999994" fill="#009982"></rect><rect x="796.3888888888889" width="52.22222222222222" y="450.27537732571426" height="19.72462267428574" fill="#06b15d"></rect><rect x="874.7222222222223" width="52.22222222222222" y="426.72311372857143" height="43.276886271428566" fill="#888888"></rect><text text-anchor="middle" x="39.166666666666664" y="48.44843700285708" class="label" style="font-weight: bold;">29.64 %</text><text text-anchor="middle" x="117.5" y="294.46955496" class="label" style="font-weight: bold;">11.32 %</text><text text-anchor="middle" x="195.83333333333334" y="301.51586371428573" class="label" style="font-weight: bold;">10.8 %</text><text text-anchor="middle" x="274.1666666666667" y="303.59061748" class="label" style="font-weight: bold;">10.64 %</text><text text-anchor="middle" x="352.5" y="342.1918116142857" class="label" style="font-weight: bold;">7.77 %</text><text text-anchor="middle" x="430.8333333333333" y="348.75996372" class="label" style="font-weight: bold;">7.28 %</text><text text-anchor="middle" x="509.16666666666663" y="368.5824997485714" class="label" style="font-weight: bold;">5.8 %</text><text text-anchor="middle" x="587.5" y="375.17161425714283" class="label" style="font-weight: bold;">5.31 %</text><text text-anchor="middle" x="665.8333333333334" y="376.9372380114286" class="label" style="font-weight: bold;">5.18 %</text><text text-anchor="middle" x="744.1666666666666" y="425.47676558" class="label" style="font-weight: bold;">1.57 %</text><text text-anchor="middle" x="822.5" y="426.77537732571426" class="label" style="font-weight: bold;">1.47 %</text><text text-anchor="middle" x="900.8333333333334" y="403.22311372857143" class="label" style="font-weight: bold;">3.22 %</text><text text-anchor="middle" x="39.166666666666664" y="62.54843700285708" class="label-small" style="font-size: 0.8em;">(18.66 %)</text><text text-anchor="middle" x="117.5" y="308.56955496" class="label-small" style="font-size: 0.8em;">(7.73 %)</text><text text-anchor="middle" x="195.83333333333334" y="315.61586371428575" class="label-small" style="font-size: 0.8em;">(2.66 %)</text><text text-anchor="middle" x="274.1666666666667" y="317.69061748" class="label-small" style="font-size: 0.8em;">(6.89 %)</text><text text-anchor="middle" x="352.5" y="356.29181161428573" class="label-small" style="font-size: 0.8em;">(14.91 %)</text><text text-anchor="middle" x="430.8333333333333" y="362.85996372" class="label-small" style="font-size: 0.8em;">(20.46 %)</text><text text-anchor="middle" x="509.16666666666663" y="382.68249974857144" class="label-small" style="font-size: 0.8em;">(6.78 %)</text><text text-anchor="middle" x="587.5" y="389.27161425714286" class="label-small" style="font-size: 0.8em;">(12 %)</text><text text-anchor="middle" x="665.8333333333334" y="391.0372380114286" class="label-small" style="font-size: 0.8em;">(0 %)</text><text text-anchor="middle" x="744.1666666666666" y="439.57676558" class="label-small" style="font-size: 0.8em;">(2.47 %)</text><text text-anchor="middle" x="822.5" y="440.8753773257143" class="label-small" style="font-size: 0.8em;">(3.2 %)</text><text text-anchor="middle" x="900.8333333333334" y="417.32311372857146" class="label-small" style="font-size: 0.8em;">(4.25 %)</text><line x1="0" y1="402.85714285714283" x2="940" y2="402.85714285714283" class="threshold-line" style="stroke-dasharray: 5, 5; stroke: red; width: 3px;"></line></g></svg>
data.csv
name,gain_2017,gain_2013,color
ANO,0.2964213767,0.186568005,#261060
ODS,0.1132141612,0.0772988404,#004494
Piráti,0.10796691,0.0266433453,#000000
SPD/Úsvit,0.1064218806,0.0688813083,#eb1b26
KSČM,0.0776763105,0.1491039005,#8c0000
ČSSD,0.0727851334,0.2045940188,#F07D00
KDU-ČSL,0.0580236704,0.0678010231,#e6ac21
TOP 09,0.053116883,0.1199917344,#723769
STAN,0.0518020568,0,#5d8c00
Svobodní,0.0156556001,0.024660844,#009982
Zelení,0.0146885488,0.0319970849,#06b15d
Ostatní,0.0322274685,0.0424598952,#888888
results.csv
id,name,abbreviation,votes,gain
1,Občanská demokratická strana ,ODS,572948,
2,Řád národa - Vlastenecká unie ,ŘN-VU,8735,
3,CESTA ODPOVĚDNÉ SPOLEČNOSTI ,CESTA,3758,
4,Česká str.sociálně demokrat. ,ČSSD,368347,
5,Volte Pr.Blok www.cibulka.net ,PB,491,
6,Radostné Česko ,RČ,3852,
7,STAROSTOVÉ A NEZÁVISLÍ ,STAN,262157,
8,Komunistická str.Čech a Moravy ,KSČM,393100,
9,Strana zelených ,Zelení,74335,
10,"ROZUMNÍ-stop migraci,diktát.EU ",Rozumní,36528,
11,Společ.proti výst.v Prok.údolí ,SPVPÚ,438,
12,Strana svobodných občanů ,Svobodní,79229,
13,Blok proti islam.-Obran.domova ,BPI-OD,5077,
14,Občanská demokratická aliance ,ODS,8030,
15,Česká pirátská strana ,ČPS,546393,
16,OBČANÉ 2011-SPRAVEDL. PRO LIDI ,O2011,359,
17,Unie H.A.V.E.L. ,HAVEL,436,
18,Česká národní fronta ,ČNF,117,
19,Referendum o Evropské unii ,REU,4276,
20,TOP 09 ,TOP 09,268811,
21,ANO 2011 ,ANO,1500113,
22,Dobrá volba 2016 ,DV2016,3722,
23,SPR-Republ.str.Čsl. M.Sládka ,SPR-RSČ,9857,
24,Křesť.demokr.unie-Čs.str.lid. ,KDU-ČSL,293643,
25,Česká strana národně sociální ,ČSNS,1573,
26,REALISTÉ ,Realisté,35995,
27,SPORTOVCI ,Sportovci,10593,
28,Dělnic.str.sociální spravedl. ,DSSS,10402,
29,Svob.a př.dem.-T.Okamura (SPD) ,SPD,538574,
30,Strana Práv Občanů ,SPO,18556,
31,Národ Sobě ,NS,300,