mbaba/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://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 headerRow = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna", "Others"];

			var stacks = d3.layout.stack()(headerRow.map(function(support) {
	        		return data.map(function(d) {
	          			return {x: d.woj, y: +d[support]};
	        				});
	    				}));

			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); });

			var rectGroups = stack.selectAll("g")
			    .data(function(d) { return d; })
			    .enter()
			    .append("g")
		    	.attr("class", "rectGroup");

				rectGroups.append("rect")
				    .attr("x", function(d) { return xScale(d.x); })
				    .attr("y", function(d) { return yScale(d.y0 + d.y); })
				    .attr("width", xScale.rangeBand())
				    .attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); });

				rectGroups.append("text")
				    .attr("x", function(d) { return xScale(d.x); })
				    .attr("y", function(d) { return yScale(d.y0 + d.y); })
				    .attr("dy", "1.25em")
				    .style("text-anchor", "start")
				    .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="http://parlament2015.pkw.gov.pl/">PKW</a>
		</p>
	</div>


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

## main.css
body {
	background-color: #d2d0cc;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}

h1 {
	font-size: 28px;
	font-weight: bold;
	font-variant: small-caps;
	text-align: center;
	line-height: 26px;
	color: dimgrey;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: dimgrey;
	border-bottom: 2px dotted dimgrey;
}

a:hover {
	color: #ffc04c;
	border-bottom: 2px dotted #ffc04c;
}

.source {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: right;
}

.chart-title {
	font-size: 20px;
	font-weight: bold;
	font-variant: small-caps;
	letter-spacing: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	color: dimgrey;
}

.text {
	padding: 1px 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0px;
	background-color: #ededeb;
	text-align: center;
}

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

.y.axis path, .x.axis path {
	opacity: 0;
}

.y.axis line {
	opacity: 1;
}


.axis text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	fill: dimgrey;
}


#wrapper {
	width: 75%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

#content {
	padding: 1%;
	background-color: #ededeb;
	margin: 0 1%;
	text-align: center;
}


g.bar:hover rect {
	fill:grey;
	cursor: crosshair;

}

g.bar text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
}

g.bar:hover text {
	fill: #ff7b00;
	opacity: 1;
}


.rectGroup text {
    opacity: 0;
}

.rectGroup:hover text {
    opacity: 1;
}

## woj.csv

          
            woj
            PiS
            PO
            PSL
            Kukiz
            Nowoczesna
            Others

            
              Dolnośląskie
              32.63
              29.26
              3.14
              9.03
              8.69
              17.25

            
              Kujawsko-pomorskie
              31.86
              27.74
              6.4
              8.04
              6.91
              19.05

            
              Lubelskie
              47.76
              14.83
              9.24
              9.79
              4.22
              14.16

            
              Lubuskie
              28.27
              28.21
              5.12
              8.75
              9.99
              19.66

            
              Łódzkie
              38.35
              23.15
              5.93
              8.65
              6.7
              17.22

            
              Małopolskie
              48.18
              19.43
              4.19
              8.14
              6.58
              13.48

            
              Mazowieckie
              38.3
              22.61
              4.84
              7.89
              9.53
              16.83

            
              Opolskie
              27.77
              26.23
              3.68
              12.57
              7.14
              22.61

            
              Podkarpackie
              55.09
              13.37
              5.69
              9.23
              4.09
              12.53

            
              Podlaskie
              45.38
              16.74
              8.07
              9.07
              5.37
              15.37

            
              Pomorskie
              30.45
              34.06
              3.13
              7.6
              8.67
              16.09

            
              Śląskie
              34.82
              25.56
              2.52
              10.69
              8.06
              18.35

            
              Świętokrzyskie
              42.81
              17.25
              9.51
              9.41
              4.98
              16.04

            
              Warmińsko-mazurskie
              30.91
              28.38
              7.69
              8.66
              6.39
              17.97

            
              Wielkopolskie
              29.61
              28.45
              6.62
              7.77
              9.32
              18.23

            
              Zachodniopomorskie
              28.91
              31.25
              3.97
              8.78
              8.44
              18.65
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://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 headerRow = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna", "Others"];

	var stacks = d3.layout.stack()(headerRow.map(function(support) {
	return data.map(function(d) {
	return {x: d.woj, y: +d[support]};
	});
	}));

	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); });

	var rectGroups = stack.selectAll("g")
	.data(function(d) { return d; })
	.enter()
	.append("g")
	.attr("class", "rectGroup");

	rectGroups.append("rect")
	.attr("x", function(d) { return xScale(d.x); })
	.attr("y", function(d) { return yScale(d.y0 + d.y); })
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); });

	rectGroups.append("text")
	.attr("x", function(d) { return xScale(d.x); })
	.attr("y", function(d) { return yScale(d.y0 + d.y); })
	.attr("dy", "1.25em")
	.style("text-anchor", "start")
	.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="http://parlament2015.pkw.gov.pl/">PKW</a>
	</p>
	</div>


	</div>
	</body>
	</html>
	body {
	background-color: #d2d0cc;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	}

	h1 {
	font-size: 28px;
	font-weight: bold;
	font-variant: small-caps;
	text-align: center;
	line-height: 26px;
	color: dimgrey;
	}

	a {
	text-decoration: none;
	}

	a:link, a:visited {
	color: dimgrey;
	border-bottom: 2px dotted dimgrey;
	}

	a:hover {
	color: #ffc04c;
	border-bottom: 2px dotted #ffc04c;
	}

	.source {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: right;
	}

	.chart-title {
	font-size: 20px;
	font-weight: bold;
	font-variant: small-caps;
	letter-spacing: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	color: dimgrey;
	}

	.text {
	padding: 1px 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0px;
	background-color: #ededeb;
	text-align: center;
	}

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

	.y.axis path, .x.axis path {
	opacity: 0;
	}

	.y.axis line {
	opacity: 1;
	}


	.axis text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	fill: dimgrey;
	}


	#wrapper {
	width: 75%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	}

	#content {
	padding: 1%;
	background-color: #ededeb;
	margin: 0 1%;
	text-align: center;
	}



	g.bar:hover rect {
	fill:grey;
	cursor: crosshair;

	}

	g.bar text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	}

	g.bar:hover text {
	fill: #ff7b00;
	opacity: 1;
	}


	.rectGroup text {
	opacity: 0;
	}

	.rectGroup:hover text {
	opacity: 1;
	}
woj	PiS	PO	PSL	Kukiz	Nowoczesna	Others
Dolnośląskie	32.63	29.26	3.14	9.03	8.69	17.25
Kujawsko-pomorskie	31.86	27.74	6.4	8.04	6.91	19.05
Lubelskie	47.76	14.83	9.24	9.79	4.22	14.16
Lubuskie	28.27	28.21	5.12	8.75	9.99	19.66
Łódzkie	38.35	23.15	5.93	8.65	6.7	17.22
Małopolskie	48.18	19.43	4.19	8.14	6.58	13.48
Mazowieckie	38.3	22.61	4.84	7.89	9.53	16.83
Opolskie	27.77	26.23	3.68	12.57	7.14	22.61
Podkarpackie	55.09	13.37	5.69	9.23	4.09	12.53
Podlaskie	45.38	16.74	8.07	9.07	5.37	15.37
Pomorskie	30.45	34.06	3.13	7.6	8.67	16.09
Śląskie	34.82	25.56	2.52	10.69	8.06	18.35
Świętokrzyskie	42.81	17.25	9.51	9.41	4.98	16.04
Warmińsko-mazurskie	30.91	28.38	7.69	8.66	6.39	17.97
Wielkopolskie	29.61	28.45	6.62	7.77	9.32	18.23
Zachodniopomorskie	28.91	31.25	3.97	8.78	8.44	18.65