Stacked bar chart - elections in Poland

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>Parliamentary elections</title>
</head>

<body>
<div id="wrapper">
	
	<div class="text">
		<h1>Polish Parliamentary Elections<br />2015</h1>
	</div>

<div class="text">
		<p>
		Results of parliamentary elections in Poland by <a href="https://en.wikipedia.org/wiki/Voivodeships_of_Poland">voivodeship</a>.
		</p>
	</div>
	
	<script type="text/javascript">

var margin = {top: 25, right: 140, bottom: 130, left: 50};

var width = 800 - margin.left - margin.right,
    	height = 600 - margin.top - margin.bottom;

d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "content");

var svg = d3.select("#content")
			.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("woj.csv", function(data) {

var xScale = d3.scale.ordinal()
			.domain(stacks[0].map(function(d) { return d.x; }))
			.rangeRoundBands([10, width-10], 0.1);

var yScale = d3.scale.linear()
			.domain([100, 0])
			.range([ 0, height]);
			
			
			var colors = d3.scale.ordinal()
				.domain(headerRow)
				.range(["#e41a1c","#377eb8","#4daf4a","#984ea3","#ffff33","#a65628"]);

var xAxis = d3.svg.axis()
				.scale(xScale)
				.tickSize(0)
				.orient("bottom");

var yAxisLeft = d3.svg.axis()
				.scale(yScale)
				.tickSize(5)
				.tickFormat(function(d) { return d + "%"; })
				.orient("left");

var yAxisRight = d3.svg.axis()
				.scale(yScale)
				.tickSize(5)
				.tickFormat(function(d) { return d + "%"; })
				.orient("right");

var stack = svg.selectAll("g")
		        .data(stacks)
		        .enter()
		        .append("g")
		        .attr("class", "bar")
		        .style("fill", function(d, i) { return colors(i); });

rects.append("text")
					.attr("x", function(d) { return xScale(d.x); })
					.attr("y", function(d) { return yScale(d.y0 + d.y)/2; })
					.attr("dy", ".35em")
					.attr("class", ".bar text")
					.style("text-anchor", "middle")
					.text(function(d) { return d.y + "%"});

svg.append("g")
			  	.attr("class", "y axis")
			  	.attr("transform", "translate(15,0)")
				.call(yAxisLeft);

svg.append("g")
			  	.attr("class", "y axis")
			  	.attr("transform", "translate(" + (width - 15) + ", 0)")
				.call(yAxisRight);

svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + height + ")")
				.call(xAxis)
				.selectAll("text").style("text-anchor", "end")
	            .attr("dx", "-.8em")
	            .attr("dy", ".15em")
	            .attr("transform", function(d) {
	                  return "rotate(-90)" 
	                });

var legend = svg.selectAll(".legend")
					.data(colors.domain().slice(0, -6).reverse())
					.enter().append("g")
					.attr("class", "legend")
					.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });

legend.append("rect")
					.attr("x", width + 40)
					.attr("width", 20)
					.attr("height", 20)
					.style("fill", colors);

legend.append("text")
				  	.attr ("class", "legend_text")
					.attr("x", width + 70)
					.attr("y", 9)
					.attr("dy", ".35em")
					.style("text-anchor", "start")
					.text(function(d) { return d; });

});

</script>

<div class="text">
		<p class="source">
		Data source: <a href="https://parlament2015.pkw.gov.pl/">PKW</a>
		</p>
	</div>

</div>
</body>
</html>

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

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