Gendertrouble

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Gendertrouble</title>
	<script src="https://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>
		//https://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("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 https://de-bug.de/mag/9652.html</p>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js