scotthmurray/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 rects = stack.selectAll("rect")
		        .data(function(d) { return d; })
		        .enter()
		        .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); });

			   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="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;
}

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

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

}

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

.legend_text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	fill: dimgrey;
	text-align: left;
}


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


.click {
	padding: 5px 10px;
    border: 1px solid dimgrey;
    background: #FFF;
    margin: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .2s;
    outline: 0;
}


.click:hover {
	background: #ffc04c;
}

.click.active {
    background: #ffc04c;
    border-color: #ff7b00;
}

## 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 rects = stack.selectAll("rect")
	.data(function(d) { return d; })
	.enter()
	.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); });

	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="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;
	}

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

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

	}

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

	.legend_text {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	fill: dimgrey;
	text-align: left;
	}


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


	.click {
	padding: 5px 10px;
	border: 1px solid dimgrey;
	background: #FFF;
	margin: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: background .2s;
	outline: 0;
	}


	.click:hover {
	background: #ffc04c;
	}

	.click.active {
	background: #ffc04c;
	border-color: #ff7b00;
	}
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