mxfh/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Gendertrouble</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
		circle.rillenfeld {fill: #16161D;}
		circle.label {fill: none; stroke: #A04D32; stroke-width: 1;}
		svg text {fill: white; font-family: sans-serif; font-weight: normal;}
		rect.bg, circle.hole {fill: #A04D32;}
		circle.hole {stroke: #A04D32;}
	</style>
</head>
<body>
	<script>
		//http://stackoverflow.com/a/901144/678708
		function getParameterByName(name) {
			name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
			var regexS = "[\\?&]" + name + "=([^&#/]*)";
			var regex = new RegExp(regexS);
			var results = regex.exec(parent.window.location.href);
			if(results == null) {
				return "";
			} else {
				return decodeURIComponent(results[1].replace(/\+/g, " "));
			}
		}

		function isNumber(n) {
			return !isNaN(parseFloat(n)) && isFinite(n);
		}

		var mann = getParameterByName("mann");
		var frau = getParameterByName("frau");
		var mixed = getParameterByName("mixed");
		console.log(mann,frau,mixed);
		var dataset = [
			["mann", 82],
			["gemischt", 9],
			["frau", 9]
		];

		if(isNumber(mann) && isNumber(mixed) && isNumber(frau)) {
				dataset[0][1] = mann;
				dataset[1][1] = mixed;
				dataset[2][1] = frau;
		}

		function getRadiusFromArea(a) {return Math.sqrt(a/Math.PI)}

		var width = 500;
		var ratio = 2;
		var height = width / ratio;
		var padding = 0.05;
		var widthBox = width - (2 * (width * padding));
		var heightBox = width - (2 * (width * padding));
		var values = dataset.map(function(value,index) { return value[1]; });
		var max = Math.max.apply(Math, values);
		var widthEl = widthBox / dataset.length;
		var rUnit = (widthEl / 2 * (1 - padding))/getRadiusFromArea(max);

		d3.select("body").append("svg")
			.attr("width", width)
			.attr("height", height);

		d3.select("svg").append("rect")
			.attr("width", width)
			.attr("height", height)
			.classed("bg", true);

		d3.select("svg").append("text")
		.text("KÜNSTLER AUF DEUTSCHEN LABELS")
		.attr("text-anchor", "middle")
		.attr("x", width / 2)
		.attr("y", height * 0.15);

		d3.select("svg")
			.append("g")
			.classed("kreise", true);

		var kreise = d3.select("g").selectAll(".kreise").data(dataset).enter();

		kreise.append("circle")
			.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
			.attr("cy", height / 2)
			.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit;})
			.classed("rillenfeld", true);

		kreise.append("circle")
			.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
			.attr("cy", height / 2)
			.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit/3;})
			.classed("label", true);

		kreise.append("circle")
			.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
			.attr("cy", height / 2)
			.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit/300 * 7;})
			.classed("hole", true);

		kreise.append("text")
			.text(function (d) { return d[1] + "% " + d[0];})
			.attr("text-anchor", "middle")
			.attr("x", function (d,i) { return i * widthEl + widthEl / 2 + padding * width;})
			.attr("y", height * 0.9);
	</script>
	<p>fixing radius vs. area in graphics in http://de-bug.de/mag/9652.html</p>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Gendertrouble</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	circle.rillenfeld {fill: #16161D;}
	circle.label {fill: none; stroke: #A04D32; stroke-width: 1;}
	svg text {fill: white; font-family: sans-serif; font-weight: normal;}
	rect.bg, circle.hole {fill: #A04D32;}
	circle.hole {stroke: #A04D32;}
	</style>
	</head>
	<body>
	<script>
	//http://stackoverflow.com/a/901144/678708
	function getParameterByName(name) {
	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&]" + name + "=([^&#/]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(parent.window.location.href);
	if(results == null) {
	return "";
	} else {
	return decodeURIComponent(results[1].replace(/\+/g, " "));
	}
	}

	function isNumber(n) {
	return !isNaN(parseFloat(n)) && isFinite(n);
	}

	var mann = getParameterByName("mann");
	var frau = getParameterByName("frau");
	var mixed = getParameterByName("mixed");
	console.log(mann,frau,mixed);
	var dataset = [
	["mann", 82],
	["gemischt", 9],
	["frau", 9]
	];

	if(isNumber(mann) && isNumber(mixed) && isNumber(frau)) {
	dataset[0][1] = mann;
	dataset[1][1] = mixed;
	dataset[2][1] = frau;
	}

	function getRadiusFromArea(a) {return Math.sqrt(a/Math.PI)}

	var width = 500;
	var ratio = 2;
	var height = width / ratio;
	var padding = 0.05;
	var widthBox = width - (2 * (width * padding));
	var heightBox = width - (2 * (width * padding));
	var values = dataset.map(function(value,index) { return value[1]; });
	var max = Math.max.apply(Math, values);
	var widthEl = widthBox / dataset.length;
	var rUnit = (widthEl / 2 * (1 - padding))/getRadiusFromArea(max);

	d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.select("svg").append("rect")
	.attr("width", width)
	.attr("height", height)
	.classed("bg", true);

	d3.select("svg").append("text")
	.text("KÜNSTLER AUF DEUTSCHEN LABELS")
	.attr("text-anchor", "middle")
	.attr("x", width / 2)
	.attr("y", height * 0.15);

	d3.select("svg")
	.append("g")
	.classed("kreise", true);

	var kreise = d3.select("g").selectAll(".kreise").data(dataset).enter();

	kreise.append("circle")
	.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
	.attr("cy", height / 2)
	.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit;})
	.classed("rillenfeld", true);

	kreise.append("circle")
	.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
	.attr("cy", height / 2)
	.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit/3;})
	.classed("label", true);

	kreise.append("circle")
	.attr("cx", function (d,i) {return (i * widthEl) + (widthEl / 2) + (padding * width);})
	.attr("cy", height / 2)
	.attr("r", function (d) {return getRadiusFromArea(d[1]) * rUnit/300 * 7;})
	.classed("hole", true);

	kreise.append("text")
	.text(function (d) { return d[1] + "% " + d[0];})
	.attr("text-anchor", "middle")
	.attr("x", function (d,i) { return i * widthEl + widthEl / 2 + padding * width;})
	.attr("y", height * 0.9);
	</script>
	<p>fixing radius vs. area in graphics in http://de-bug.de/mag/9652.html</p>
	</body>
	</html>