Tutorial Ergebnis-Landkarte

<!DOCTYPE html>
<head>
<title>Ergebnis-Landkarte</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.js"></script>
</head>
<body>

var kandidaten = ["Griss", "Hofer", "Hundstorfer", "Khol", "Lugner", "Van der Bellen"];
var farben = {"Griss":"#8E88A7", "Hofer":"#2657A8", "Hundstorfer":"#C83D44", 
"Khol":"#191919", "Lugner":"#E7B500", "Van der Bellen":"#89A04F"};

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	
var projection = d3.geoMercator();
var gemeinden = d3.geoPath().projection(projection);
projection.scale(1).translate([0, 0]);

d3.json("gemeinden.json", function(grenzen)
	{
	var map = topojson.feature(grenzen, grenzen.objects.gemeinden);
		
	var b = gemeinden.bounds(map);	
	var box = d3.geoBounds(map);	
	var s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
	projection.scale(s).center([(box[0][0]+box[1][0])/2,(box[0][1]+box[1][1])/2]).translate([width / 2, height / 2]);
	
	d3.csv("gemeindeergebnisse.csv", function(ergebnisse)
		{
		var siegerliste = {};
		for (var i = 0; i < ergebnisse.length; i++)
			{
			for (var x in ergebnisse[i])
				{
				if (x != "GKZ" && x != "Gebietsname") ergebnisse[i][x] = +ergebnisse[i][x];
				}
      
			var stimmen_sieger = 0;
			var sieger = "";
			
			for (var k = 0; k < kandidaten.length; k++)
				{
				if (ergebnisse[i][kandidaten[k]] > stimmen_sieger)
					{
					sieger = kandidaten[k];
					stimmen_sieger = ergebnisse[i][kandidaten[k]];
					}
				}
    
			siegerliste[ergebnisse[i].GKZ] = sieger;
			}
	
		svg.selectAll("path")
			.data(map.features)
			.enter()
			.append("path")
			.attr("d", gemeinden)
			.style("stroke", "black")
			.style("fill", function(d) { return farben[siegerliste["G" + d.properties.iso]]; });
		});
	});

</script>

</body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.js