Germany Invalid First Votes 2017

.block

license: mit

2017_german_election_overall.csv

README.md

Built with blockbuilder.org

election.js

var width = 960,
    height = 500,
    centered;

var projection = d3.geoMercator()
    .scale(2200)
    .center([10, 51.5])
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

// Set svg width & height
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var g = svg.append('g');

var effectLayer = g.append('g')
    .classed('effect-layer', true);

var mapLayer = g.append('g')
    .classed('map-layer', true);

function combineDataWithMap(features,data) {
    // for each WKR_NR add a new attribute data with the
    // corresponding data
    let afd = 0;
    for (let fidx in features) {
        features[fidx].data = data[features[fidx].properties.WKR_NR];
        if (features[fidx].data.party == "AFD") {
            afd += 1;
        }
    }
    console.log('afd', afd);
    return features;
}

let colorValid = d3.scaleLinear().range(["#fff","#000"]);

let perc_func = d => {
    return d.data.invalid_first_votes/d.data.total_votes;
};

// Load map data
d3.json('wahlkreise_sm.geojson', function(error, mapData) {
    var features = mapData.features;
    
    d3.csv("2017_german_election_overall.csv", type, data => {
        console.log(data);
        // get the top party per area id
        // let reducedData = reduceToTopPartyByAreaId(data);
        let reducedData = {};
        for (let d of data) {
            reducedData[d.area_id] = d;
        }

        features = combineDataWithMap(features, reducedData);
    
        console.log("features");
        console.log(features);
        
        let perc = features.map(d => {
            return perc_func(d);
        });
        console.log("perc", Math.max.apply(Math, perc));
        colorValid.domain([0,Math.max.apply(Math, perc)]);
        console.log("Domain: ",colorValid.domain());
        console.log(colorValid(0));
        console.log(colorValid(0.01));

        // Draw each province as a path
        mapLayer.selectAll('path')
        .data(features)
        .enter().append('path')
        .attr('d', path)
        .attr('vector-effect', 'non-scaling-stroke')
        .style('fill', d => {return colorValid(perc_func(d));})
        .on('mouseover', mouseover)
        .on('mouseout', mouseout)
        .on('click', clicked);

    });
});

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

let color = {
    "CDU": "#000000",
    "SPD": "#EB001F",
    "AFD": "#00ADEF",
    // "CSU": "#0188ca",
    "CSU": "#000000",
    "FDP": "#FFED00",
    "NPD": "#8B4726",
    "DIE.LINKE": "#8C3473",
    "BÜNDNIS.90.DIE.GRÜNEN": "#58AB27"
};

function type(d) {
    d.id = +d.id;
    d.area_id = +d.area_id;
    d.votes_first_vote = +d.votes_first_vote;
    d.votes_second_vote = +d.votes_second_vote;
    d.valid_first_votes = +d.valid_first_votes;
    d.invalid_first_votes = +d.invalid_first_votes;
    d.valid_second_votes = +d.valid_second_votes;
    d.invalid_second_votes = +d.invalid_second_votes;
    let shortForm = {
        "Christlich.Demokratische.Union.Deutschlands": "CDU",
        "Sozialdemokratische.Partei.Deutschlands": "SPD",
        "Alternative.für.Deutschland": "AFD",
        "Christlich.Soziale.Union.in.Bayern.e.V.": "CSU",
        "Freie.Demokratische.Partei": "FDP",
        "Nationaldemokratische.Partei.Deutschlands": "NPD"
    };
    
    if (d.party in shortForm) {
        d.party = shortForm[d.party];
    }
    return d;
}

function reduceToTopPartyByAreaId(data) {
    let byAreaId = {};
    for(let d of data) {
        if (!(d.area_id in byAreaId)) {
            byAreaId[d.area_id] = d;
            byAreaId[d.area_id].total_votes = 0;
        } else {
            if (d.votes_second_vote > byAreaId[d.area_id].votes_second_vote) {
                let total_votes = byAreaId[d.area_id].total_votes;
                byAreaId[d.area_id] = d;
                byAreaId[d.area_id].total_votes = total_votes;
            }
        }
        byAreaId[d.area_id].total_votes += d.votes_second_vote;
    }    
    return byAreaId;
}

// Get province name
function nameFn(d){
    return d && d.properties ? d.properties.NOMBRE_DPT : null;
}

// Get province name length
function nameLength(d){
    var n = nameFn(d);
    return n ? n.length : 0;
}

// Get province color
function fillFn(d){
    return colorValid(perc_func(d));
    console.log(d);
    /*if (!(d.data.party in color)) {
        return "#fff";
    } */
    let rgb = hexToRgb(color[d.data.party]);
    let perc = d.data.invalid_second_votes/(d.data.valid_second_votes+d.data.invalid_second_votes);
    return "rgba(0,0,0,"+perc+")";
    return "rgba("+rgb.r+","+rgb.g+","+rgb.b+","+perc+")";
}

// When clicked, zoom in
function clicked(d) {
    
}

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("background-color", "#eee")
.style("padding", "5px")
.style("border-radius", "10px")

function mouseover(d){
    // Highlight hovered province
    d3.select(this).style('fill', 'orange');

    // Draw effects
    tooltip.style("visibility", "visible");
    tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px")
        .text("WKR: "+d.properties.WKR_NR);
    
}

function mouseout(d){
    // Reset province color
    mapLayer.selectAll('path')
    .style('fill', function(d){return centered && d===centered ? '#D5708B' : fillFn(d);});

    // Remove effect text
    effectLayer.selectAll('text').transition()
    .style('opacity', 0)
    .remove();

    tooltip.style("visibility", "hidden");
    // Clear province name
    // bigText.text('');
}

index.html

<html>
<head>
    <title>Germany Invalid First Votes 2017</title>   
    <meta charset="utf-8" />
</head>
<body>
    <div id="chart"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="election.js"></script>
</body>
</html>

wahlkreise_sm.geojson