offene Wahlen: Entwicklung Auszählungsgrad

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Verlauf Auszählungsgrad</title>
</head>
<body>
<div id="container">
<div id="desc">Die Grafik zeigt den Verlauf des Gesamtergebnisses (nur Gemeinden, ohne Wahlkarten) am Wahlabend. Die X-Achse steht für den Auszählungsgrad."
</div>

<div id="chart">
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var percent = d3.formatLocale({"decimal":",", "thousands":".","grouping":[3],"currency":["€", ""]});
var margin = { top: 20, right: 20, bottom: 30, left: 20 };
var width = parseInt(d3.select("#chart").style("width"), 10) - margin.left - margin.right;
var height = window.innerHeight - margin.top - margin.bottom - 40 - parseInt(d3.select("#desc").style("height"), 10);

var color = {"oevp": "#191919", "spoe": "#ca5670", "fpoe": "#638ccc", "gruene": "#72a555", "kpoe": "#9F000F", "neos": "#F52887", "frank": "#E9AB17", "bzoe": "#F87431", "tie": "grey"};
var parties = ["spoe", "oevp", "fpoe", "gruene"];
var labels = {"spoe": "SPÖ", "oevp": "ÖVP", "fpoe": "FPÖ", "gruene": "GRÜNE", "neos": "NEOS", "frank": "FRANK", "kpoe": "KPÖ"};

var offset_x = 80;
var offset_y = 75;
var daten, verlauf;

var scale = {"y": d3.scaleLinear().domain([0, 0.5]).rangeRound([height - margin.top, margin.bottom]), "x": d3.scaleLinear().domain([0, 1]).range([margin.left, width - margin.right])};

var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("id", "svg")
	.append("g")
	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

var line = d3.line().x(function(d) { return scale.x(+d.azg); });

var rsz;
window.onresize = resize; /*function()
	{
	clearTimeout(rsz);
	rsz = setTimeout(resize, 500);
	};*/

var q = d3.queue();
q.defer(d3.tsv, "daten.txt");

q.awaitAll(function(error)
	{
    if (!error) 
		{
		daten = arguments[1][0];
		verlauf = daten.filter(function(d) { return d.time != "ref"; });
		draw();
		}
	});

function draw()
{
svg.append("defs").append("marker")  //pfeil für notes
	.attr("id", "arrow")
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 5)
	.attr("refY", 0)
	.attr("markerWidth", 6)
	.attr("markerHeight", 25)
	.attr("orient", "auto")
	.append("path")
	.attr("d", "M0,-5 L10,0 L0,5")
	.attr("class","arrowHead");

svg.append("text")
	.attr("x", scale.x(1) / 2)
	.attr("y", scale.y(0))
	.attr("dy", "2.5em")
	.attr("class", "captions")
	.text("Auszählungsgrad");
	
svg.append("text")
	.attr("x", scale.x(0))
	.attr("y", scale.y(0))
	.attr("class", "start")
	.attr("id", "left_up")
	.attr("dy", "2.2em")
	.style("text-anchor", "middle")
	.text("Ergebnis");
	
svg.append("text")
	.attr("x", scale.x(0))
	.attr("y", scale.y(0))
	.attr("dy", "3.4em")
	.attr("class", "start")
	.attr("id", "left_down")
	.style("text-anchor", "middle")
	.text("2013");

svg.append("text")
	.attr("x", scale.x(1))
	.attr("y", scale.y(0))
	.attr("class", "start")
	.attr("dy", "2.2em")
	.attr("id", "right_up")
	.style("text-anchor", "middle")
	.text("Ergebnis");
	
svg.append("text")
	.attr("x", scale.x(1))
	.attr("y", scale.y(0))
	.attr("dy", "3.4em")
	.attr("class", "start")
	.attr("id", "right_down")
	.style("text-anchor", "middle")
	.text("2017");
	
var positioning = svg.select(".captions").node().getBBox();
svg.append("line")
	.attr("x1", scale.x(1) / 2 + positioning.width * 0.5 + 10)
	.attr("x2", scale.x(1) / 2 +  positioning.width * 2.5)
	.attr("y1", positioning.y + positioning.height / 2)
	.attr("y2", positioning.y + positioning.height / 2)
	.attr("class", "arrows")
	.attr("id", "arr_left")
	.attr("marker-end", "url(#arrow)")
	.style("stroke", "#000000");

svg.append("line")
	.attr("x1", scale.x(1) / 2 - positioning.width * 0.5 - 10)
	.attr("x2", scale.x(1) / 2 - positioning.width * 2.5)
	.attr("y1", positioning.y + positioning.height / 2)
	.attr("y2", positioning.y + positioning.height / 2)
	.attr("class", "arrows")
	.attr("id", "arr_right")
	.attr("marker-end", "url(#arrow)")
	.style("stroke", "#000000");
	
svg.append("line")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(1))
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(0))
	.attr("class", "axis")
	.attr("id", "xaxis");

svg.append("line")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(0))
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(1))
	.attr("class", "axis")
	.attr("id", "yaxis");

svg.selectAll(".gridv")
	.data(d3.range(0.25, 1, 0.25))
	.enter()
	.append("line")
	.attr("x1", function(d) { return scale.x(d); })
	.attr("x2", function(d) { return scale.x(d); })
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(1))
	.attr("class", "gridv");

svg.selectAll(".gridh")
	.data(d3.range(0.15, 0.5, 0.15))
	.enter()
	.append("line")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(1))
	.attr("y1", function(d) { return scale.y(d); })
	.attr("y2", function(d) { return scale.y(d); })
	.attr("class", "gridh");
	
svg.selectAll(".labelsv")
	.data(d3.range(0.25, 1, 0.25))
	.enter()
	.append("text")
	.attr("x", function(d) { return scale.x(d); })
	.attr("y", scale.y(0))
	.attr("dy", "1em")
	.attr("class", "labelsv")
	.text(function(d) { return percent.format(",.0%")(d); });

svg.selectAll(".labelsh")
	.data(d3.range(0.15, 0.5, 0.15))
	.enter()
	.append("text")
	.attr("x", scale.x(0))
	.attr("y", function(d) { return scale.y(d); })
	.attr("dx", "-1em")
	.attr("dy", "0.3em")
	.attr("class", "labelsh")
	.text(function(d) { return percent.format(",.0%")(d); });
	
svg.selectAll(".dots")
	.data(parties)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return scale.x(0); })
	.attr("cy", function(d) { return scale.y(+daten[0][d] / +daten[0].gueltig); })
	.attr("r", 10)
	.attr("class", "dots")
	.style("fill", function(d) { return color[d]; });

svg.append("line")
	.attr("class", "current");
	
svg.append("text")
	.attr("y", scale.y(0) - 2)
	.attr("class", "currenttext");

for (var i = 0, len = parties.length; i < len; i++)
	{
	line.y(function(d) { return scale.y(+d[parties[i]] / +d.gueltig); });
	svg.append("path")
		.datum(verlauf)
		.attr("d", line)
		.attr("class", "lines")
		.attr("id", "line_" + parties[i])
		.style("stroke", color[parties[i]]);
		
	svg.append("circle")
		.attr("cx", function(d) { return scale.x(verlauf[verlauf.length - 1].azg); })
		.attr("cy", function(d) { return scale.y(+verlauf[verlauf.length - 1][parties[i]] / +verlauf[verlauf.length - 1].gueltig); })
		.attr("r", 10)
		.attr("class", "endpoints")
		.attr("id", "endpoint_" + parties[i])
		.style("stroke", color[parties[i]])
		.on("mouseover", function()
			{
			svg.select(".current")
				.attr("x1", scale.x(verlauf[verlauf.length - 1].azg))
				.attr("x2", scale.x(verlauf[verlauf.length - 1].azg))
				.attr("y1", scale.y(1))
				.attr("y2", scale.y(0))
				.style("display", "block");
			
			svg.select(".currenttext")
				.attr("x", scale.x(verlauf[verlauf.length - 1].azg))
				.attr("dx", "0.2em")
				.style("display", "block")
				.text(percent.format(",.0%")(verlauf[verlauf.length - 1].azg));
			})
		.on("mouseout", function() { svg.selectAll(".current, .currenttext").style("display", "none"); });
		
	svg.selectAll(".points_" + parties[i])
		.data(verlauf.slice(1, verlauf.length - 1))
		.enter()
		.append("circle")
		.attr("cx", function(d) { return scale.x(d.azg); })
		.attr("cy", function(d) { return scale.y(+d[parties[i]] / +d.gueltig); })
		.attr("r", 5)
		.attr("class", "points_" + parties[i])
		.style("fill", color[parties[i]])
		.on("mouseover", function(d)
			{
			svg.select(".current")
				.attr("x1", scale.x(d.azg))
				.attr("x2", scale.x(d.azg))
				.attr("y1", scale.y(1))
				.attr("y2", scale.y(0))
				.style("display", "block");
				
			svg.select(".currenttext")
				.attr("x", scale.x(d.azg))
				.attr("dx", "0.2em")
				.style("display", "block")
				.text(percent.format(",.0%")(d.azg));
			})
		.on("mouseout", function() { svg.selectAll(".current, .currenttext").style("display", "none"); });
	}
}

function resize()
{
width = parseInt(d3.select("#chart").style("width"), 10) - margin.left - margin.right;
height = window.innerHeight - margin.top - margin.bottom - 40 - parseInt(d3.select("#desc").style("height"), 10);

scale.y.rangeRound([height - margin.top, margin.bottom]);
scale.x.range([margin.left, width - margin.right]);

d3.select("#svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.select("g")
	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

svg.select(".captions")
	.attr("x", scale.x(1) / 2)
	.attr("y", scale.y(0));
	
svg.select("#left_up")
	.attr("x", scale.x(0))
	.attr("y", scale.y(0));
	
svg.select("#left_down")
	.attr("x", scale.x(0))
	.attr("y", scale.y(0));

svg.select("#right_up")
	.attr("x", scale.x(1))
	.attr("y", scale.y(0));
	
svg.select("#right_down")
	.attr("x", scale.x(1))
	.attr("y", scale.y(0));
	
var positioning = svg.select(".captions").node().getBBox();
svg.select("#arr_right")
	.attr("x1", scale.x(1) / 2 + positioning.width * 0.5 + 10)
	.attr("x2", scale.x(1) / 2 +  positioning.width * 2.5)
	.attr("y1", positioning.y + positioning.height / 2)
	.attr("y2", positioning.y + positioning.height / 2);

svg.select("#arr_left")
	.attr("x1", scale.x(1) / 2 - positioning.width * 0.5 - 10)
	.attr("x2", scale.x(1) / 2 - positioning.width * 2.5)
	.attr("y1", positioning.y + positioning.height / 2)
	.attr("y2", positioning.y + positioning.height / 2);

svg.select("#xaxis")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(1))
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(0));

svg.select("#yaxis")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(0))
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(1));

svg.selectAll(".gridv")
	.attr("x1", function(d) { return scale.x(d); })
	.attr("x2", function(d) { return scale.x(d); })
	.attr("y1", scale.y(0))
	.attr("y2", scale.y(1));

svg.selectAll(".gridh")
	.attr("x1", scale.x(0))
	.attr("x2", scale.x(1))
	.attr("y1", function(d) { return scale.y(d); })
	.attr("y2", function(d) { return scale.y(d); });
	
svg.selectAll(".labelsv")
	.attr("x", function(d) { return scale.x(d); })
	.attr("y", scale.y(0));

svg.selectAll(".labelsh")
	.attr("x", scale.x(0))
	.attr("y", function(d) { return scale.y(d); });
	
svg.selectAll(".dots")
	.attr("cx", function(d) { return scale.x(0); })
	.attr("cy", function(d) { return scale.y(+daten[0][d] / +daten[0].gueltig); });

svg.select(".currenttext")
	.attr("y", scale.y(0) - 2);

for (var i = 0, len = parties.length; i < len; i++)
	{
	line.y(function(d) { return scale.y(+d[parties[i]] / +d.gueltig); });
	svg.select("#line_" + parties[i])
		.attr("d", line);
		
	svg.select("#endpoint_" + parties[i])
		.attr("cx", function(d) { return scale.x(verlauf[verlauf.length - 1].azg); })
		.attr("cy", function(d) { return scale.y(+verlauf[verlauf.length - 1][parties[i]] / +verlauf[verlauf.length - 1].gueltig); });
		
	svg.selectAll(".points_" + parties[i])
		.attr("cx", function(d) { return scale.x(d.azg); })
		.attr("cy", function(d) { return scale.y(+d[parties[i]] / +d.gueltig); })
	}
}
</script>
</body>
</html>

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