CZ: Elections 2017

<!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>

// 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>