<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="d3.v4.min.js"></script>
/* NOTE: style is inlined to allow export of the svg
<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 />
<div class="alert alert-info m-2 p-2">
Full color: results 2017<br />
Opaque color: results 2013
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)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(data) {
.domain([-0.5, data.length - 0.5]),
var xAxis = d3.axisBottom(x)
.tickFormat(function (i) {
var yAxis = d3.axisLeft(y)
// .attr("transform", "translate(" + (margin.right) + ", 0)")
.attr("transform", "translate(0," + (height) + ")")
var cw = width / data.length / 3 * 2;
.attr("x", function (d, i) { return x(i) - cw / 2 - cw / 5})
.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("style", "fill-opacity: 0.25;")
.attr("x", function (d, i) { return x(i) - cw / 2})
.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
.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 })
.style("font-weight", "bold")
// previous elections values
.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")
.attr("y1", function() { return y(0.05) })
.attr("y2", function() { return y(0.05) })
.style("stroke-dasharray", ("5, 5"))
.attr("class","threshold-line")
d3.selectAll('.x.axis path').style('display','none')
d3.selectAll('.tick text').style('font-size', '1.5em')