Untitled

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>D3: SVG pie chart </title>
	<script type="text/javascript" src="../d3.js"></script>
	<style type="text/css">
		/* No style rules here yet */
		#svg {
			background: #f00;
			;
		}

		.text {
			font-family: Arial, Helvetica, sans-serif;
			fill: #fff;
			font-size: 1em;
			text-anchor: middle;
		}

		.zetels {
			font-weight: 900;
		}

		.partij {
			text-transform: uppercase;
			font-weight: 300;
		}

		.NV-A {
			fill: rgb(250, 221, 0);
		}

		.PS,
		.sp-a {

			fill: rgb(255, 0, 20);
		}

		.VlaamsBelang {
			fill: rgb(225, 174, 31);
		}

		.CDV,
		.CDH {
			fill: rgb(255, 128, 0);
		}

		.MR,
		.Open-VLD {
			fill: rgb(29, 78, 182);
		}

		.Ecolo,
		.groen {
			fill: rgb(0, 163, 160)
		}

		.PTB-PVDA {
			fill: rgb(204, 0, 68)
		}

		.DeFi {
			fill: rgb(203, 0, 173);
		}

		;
	</style>
	<div id="my_dataviz"></div>
</head>

<body>
	<script type="text/javascript">
		//Half pie chart

		//Settings
		var width = 600
		var height = 300
		//var margin = 40
		var anglesRange = 0.5 * Math.PI
		//var radius = Math.min(width, 2 * height) / 2
		var radius = Math.min(width, 2 * height) / 2

		var thickness = 20

		//Data
		d3.csv('./federaal.csv', function (data) {
			dataset = data;
			console.log(dataset);
			init();
		});

		function init() {
			// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
			//var radius = Math.min(width, height) / margin

			// append the svg object to the div called 'my_dataviz'
			var svg = d3.select("#my_dataviz")
				.append("svg")
				.attr("width", width)
				.attr("height", height)
				.append("g")
				.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

			//Create dummy data
			// var data = {
			// 	a: 9,
			// 	b: 20
			// }

			// set the color scale
			var color = d3.scaleOrdinal()
				.domain(dataset)
				.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

			// Compute the position of each group on the pie:
			var pie = d3.pie()
				.value(function (d) {
					return d.value.Zetels;
				})
				.startAngle(anglesRange * -1)
				.endAngle(anglesRange)
			var data_ready = pie(d3.entries(dataset))

			// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
			svg
				.selectAll('whatever')
				.data(data_ready)
				.enter()
				.append('path')
				.attr('d', d3.arc()
					.innerRadius(100) // This is the size of the donut hole
					.outerRadius(20)
				)
				.attr("class", function (d) {
					//var partij = d.Partij.replace(/\s/g, '');
					console.log("d console: ", d.data)
					return 'bar ' + d.data.value.Partij;
				})
				.attr("stroke", "white")
				.style("stroke-width", "2px")
				.style("opacity", 0.7)


		}
	</script>
</body>

</html>