Results of last parliamentary 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 w = 800;
		var h = 600;
		var padding = [20, 30, 20, 175];

var widthScale = d3.scale.linear()
			.range([ 0, w - padding[1] - padding[3] ])
			.domain([0, 60]);

var heightScale = d3.scale.ordinal()
			.rangeRoundBands([ padding[0], h - padding[2] ], 0.15);

var xAxis = d3.svg.axis()
			.scale(widthScale)
			.tickFormat(function(d) { return d + "%"; })
			.orient("bottom");

var yAxis = d3.svg.axis()
			.scale(heightScale)
			.orient("left");

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

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

var svg = d3.select("#content")
			.append("svg")
			.attr("width", w)
			.attr("height", h);

var parties = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna"],
			currentParty = parties[0],
			transitionDuration = 1000,
			textTransitionDuration = 1500;

function setChart() {
			d3.csv("woj.csv", function(data) {
				
				data.sort(function(a, b) {
							return d3.ascending(+a.kod, +b.kod);
						})

heightScale.domain(data.map(function(d) { return d.woj; } ));

var groups = svg.selectAll("g")
						.data(data)
						.enter()
						.append("g")
						.attr("class", "bar");

var rects = groups.append("rect")

rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.woj);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand());

groups.append("text")

updateBarChart(currentParty);

updateText(currentParty);

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis)
					.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);
			});
		}

function setButtons() {
			var btn = d3.select("#buttons")
					.append("div");
			
				btn.selectAll("div")
					.data(parties)
					.enter()
					.append("button")
					.attr("type", "button")
					.attr("class", function(d){
						var className="click";

if (d === currentParty) {
							className += " active";
						}
						return className;
					})
					.text(function(d){ return d; })
					.on("click", function(d) {
						d3.select(".click.active").classed("active", false);
						d3.select(this).classed("active", true);
						updateBarChart(d);
						updateText(d);
					})
		}

function updateBarChart(currentParty) {
			svg.selectAll("rect")
				.transition()
				.duration(transitionDuration)
				.attr("width", function(d) {
					return widthScale(d[currentParty]);
				});
		}

setChart();

setButtons();

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