D3 Examples - Tutorial Ergebnis-Landkarte

xxxxxxxxxx
 
<!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>
​
<script>
var width = window.innerWidth * 0.95;
var height = window.innerHeight * 0.95;
​
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>
    