block by michalskop 4eb514fdef84ed84d735c67bb629216c

CZ: Elections 2017

Full Screen

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>
        /* NOTE: style is inlined to allow export of the svg
        /*.x.axis path {
            display: none;
        }
        .tick text {
            font-size: 1.5em;
        }
        .old {
            fill-opacity: 0.25;
        }
        .label {
            font-weight: bold;
        }
        .label-small {
            font-size: 0.8em;
        }
        .threshold-line {
            stroke: red;
            width: 3px;
        }*/
        .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>
    // chart dimensions
    var margin = {top: 10, right: 20, bottom: 20, left: 50},
		width = 960 - margin.right,
		height = 500 - margin.top - margin.bottom;

    // Create the SVG container and set the origin.
    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 + ")");



    // chart
    d3.csv("data.csv", function(data) {

        // axes
        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")
            //  .attr("transform", "translate(" + (margin.right) + ", 0)")
             .call(yAxis);

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

        var cw = width / data.length / 3 * 2;

        // previous elections
        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;")

        // current elections
        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 })

        // current elections value
        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")

        // previous elections values
        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")

        // theshold line
        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")

        // inlining styles
        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,