Czech elections 2013: double bar chart

<!DOCTYPE html>
    <title>Czech general elections 2013</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

.chart text {
  fill: white;
  font: 11px sans-serif;
  text-anchor: end;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.limit-line {
  stroke: Black;
  width: 3px;
}
.label {
  font: 8px sans-serif;
}
.label2 {
  font: 7px sans-serif;
}

.cssd {
  fill: DarkOrange;
}
.ods {
  fill: Blue;
}
.ano-2011 {
  fill: CornflowerBlue;
}
.kscm {
  fill: DarkRed;
}
.top-09 {
  fill: DarkViolet;
}
.usvit {
  fill: GreenYellow;
}
.kdu-csl {
  fill: Gold;
}
.zeleni {
  fill: Green;
}
.pirati {
  fill: Black;
}
.svobodni {
  fill: DarkGreen;
}
.ostatni {
  fill: Gray;
}
.old {
  fill-opacity: 0.33;
}

/* because of bootstrap*/
svg {
	position: fixed;
    top: 180px;
}

</style>
<body>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Czech general elections 2013 - results</a>
        </div>
      </div>
    </div>
    <div style="position:fixed;top:50px;z-index:1000;">
      <div class="alert alert-info" >Recreation of "Wikipedia-style" charts of elections results (e.g. <em><a href="https://de.wikipedia.org/wiki/Nationalratswahl_in_Österreich_2013">here</a></em>) in D3.<br/>
      Full color: results from 2013<br/>
      Opaque color: results from 2010</div>
    </div>
    
<script>

//based on https://bl.ocks.org/mbostock/raw/3885304/

var data = [
 {name: 'ČSSD', friendly_name: 'cssd', gain2013: .2045, gain2010: .2208},
 {name: 'ANO 2011', friendly_name: 'ano-2011', gain2013: .1865, gain2010: 0},
 {name: 'KSČM', friendly_name: 'kscm', gain2013: .1491, gain2010: .1127},
 {name: 'TOP 09', friendly_name: 'top-09', gain2013: .1199, gain2010: .1670},
 {name: 'ODS', friendly_name: 'ods', gain2013: .0772, gain2010: .2022},
 {name: 'Úsvit', friendly_name: 'usvit', gain2013: .0688, gain2010: 0},
 {name: 'KDU-ČSL', friendly_name: 'kdu-csl', gain2013: .0678, gain2010: .0439},
 {name: 'Zelení', friendly_name: 'zeleni', gain2013: .0319, gain2010: .0246},
 {name: 'Piráti', friendly_name: 'pirati', gain2013: .0266, gain2010: .0080},
 {name: 'Svobodní', friendly_name: 'svobodni', gain2013: .0246, gain2010: .0072},
 {name: 'Ostatní', friendly_name: 'ostatni', gain2013: .0431, gain2010: .2073},
];

var names = [];
for (i = 0; i < data.length; i++) {
  names.push(data[i].name);
}

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .25)
    .domain(names);

var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,0.25]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5, "%");

var svg = d3.select("body").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 + ")");

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("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
      //.text("Hlasy");

svg.selectAll(".e2010")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) {return "bar old " + d.friendly_name})
      .attr("x", function(d) { return x(d.name) - x.rangeBand()/5; })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.gain2010); })
      .attr("height", function(d) { return height - y(d.gain2010); })
      .attr("title",function(d) {title = "2010: " + Math.round(100*d.gain2010) + " %"; return title;});

svg.selectAll(".e2013")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) {return "bar new " + d.friendly_name})
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.gain2013); })
      .attr("height", function(d) { return height - y(d.gain2013); })
      .attr("title",function(d) {title = "2013: " + Math.round(100*d.gain2013) + " %"; return title;});

svg.append("line")
    .attr("x1", 0)
    .attr("y1", function() { return y(0.05) })
    .attr("x2", width)
    .attr("y2", function() { return y(0.05) })
    .attr("class","limit-line");

svg.selectAll(".text")
       .data(data)
       .enter()
       .append("text")
       .text(function(d){return  Math.round(10000*d.gain2013)/100 + "%";})
       .attr("text-anchor", "middle")
	    .attr("x", function(d, i) { return i * (width / data.length) + (width / data.length) / 2; })
	    .attr("y", function(d) { return y(Math.max(d.gain2010,d.gain2013)) - 20; })
	    .attr("class","label");
	    
   svg.selectAll(".text")
       .data(data)
       .enter()
       .append("text")
       .text(function(d){return  "(" + Math.round(10000*d.gain2010)/100 + "%)";})
       .attr("text-anchor", "middle")
	    .attr("x", function(d, i) { return i * (width / data.length) + (width / data.length) / 2; })
	    .attr("y", function(d) { return y(Math.max(d.gain2010,d.gain2013)) - 10; })
	    .attr("class","label2");

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js