D3 Examples - diagramm

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="style.css">
​
<body>
<div id="sankey"></div>
</body>
​
<script src='../../../../../_common/js/jquery/jquery-1.11.0.min.js'></script>
<script src='../../../../../_common/js/d3/d3.v3.5.13.min.js'></script>
<script type="text/javascript" src="./lib/sankey.js"></script>
<!--<script src="//d3js.org/d3.v3.min.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/d3/d3-plugins/sankey/sankey.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/caged/d3-tip/index.js"></script>-->
​
<script>
​
    var tooltip = d3.select("body")
            .append("div")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden")
            .style("background", "#fff")
            .attr("class", "tooltip")
​
    var tooltipnode = d3.select("body")
            .append("div")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden")
            .style("background", "#fff")
            .attr('class', 'tooltipnode tooltipnode-nodes');
​
    //-----------------------------------------
    // configuration desktop / mobile
​
    var mobile = /(preview\.)?(a|m)\.spiegel\.de/.test(location.hostname);
    //        mobile = true;
​
    var initial_height;
    if (mobile) { initial_height = 550; }
    else { initial_height = 750; }
​
    var margin = {top: 10, right: 0, bottom: 10, left: 0},
            width = window.innerWidth - margin.left - margin.right,
            height = initial_height - margin.top - margin.bottom;
​
​
​
​
​
​
​
    var window_width = parseInt(d3.select("body").style("width"),10);
​
    var window_height = parseInt(d3.select("body").style("height"),10);
​
    function formatAmount(val) {
        return d3.format(",d")(val).replace(',', '.').replace(',', '.');
    }
​
    // append the svg canvas to the page
    var svg = d3.select("#sankey").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("class", "sankey")
            .append("g");
    //            .attr("transform",
    //            "translate(" + margin.left + "," + margin.top + ")");
​
    // Set the sankey diagram properties
    var sankey = d3.sankey()
            .nodeWidth(36)
            .nodePadding(14)
            .size([width, height]);
​
    var path = sankey.link();
​
    d3.csv("data1.csv", function(error, data) {
​
        var currentData = data;
​
        function processData(data) {
            var graph = {"nodes" : [], "links" : []};
​
            data.forEach(function (d) {
                graph.nodes.push({ "name": d.source,
                    "shortname": d.shortname });
                graph.nodes.push({ "name": d.target,
                    "shortname": d.shortname });
                graph.links.push({ "source": d.source,
                    "target": d.target,
                    "value": +d.value });
            });
​
            graph.nodesNew = d3.nest()
                    .key(function (d) { return d.name; })
                    .rollup(function (d) { return d[0].shortname; }) // returns the shortname of the first element of that key
                    .map(graph.nodes);
​
            // return only the distinct / unique nodes
            graph.nodes = d3.keys(d3.nest()
                    .key(function (d) { return d.name; })
                    .map(graph.nodes));
​
​
            // loop through each link replacing the text with its index from node
            graph.links.forEach(function (d, i) {
                graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
                graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
            });
​
            //now loop through each nodes to make nodes an array of objects
            // rather than an array of strings
            graph.nodes.forEach(function (d, i) {
                graph.nodes[i] = { "name": d,
                    "shortname": d };
            });
            return graph;
        }
​
        // tooltip Funktionen
        function mousetooltiplink(d) {
            d3.select(".tooltip")
                    .style("left", function(){
                        var tt_margin_right =  window_width - d3.event.pageX;
                        if (tt_margin_right < 250){ return d3.event.pageX - 210 + "px"; }
                        else { return d3.event.pageX + 10 + "px"; }
                    })
                    .style("top", function(){
                        var tt_margin_top =  window_height - d3.event.pageY;
                        if (tt_margin_top < -350){ return d3.event.pageY - 90 + "px"; }
                        else { return d3.event.pageY + 10 + "px"; }
                    })
        }
​
        function mousetooltip(d) {
            d3.select(".tooltipnode")
                    .style("left", function(){
                        var tt_margin_right =  window_width - d3.event.pageX;
                        if (tt_margin_right < 170){ return d3.event.pageX - 220 + "px"; }
                        else { return d3.event.pageX + 20 + "px"; }
                    })
                    .style("top", function(){
                        var tt_margin_top =  window_height - d3.event.pageY;
                        if (tt_margin_top < -350){ return d3.event.pageY - 280 + "px"; }
                        else { return d3.event.pageY + 40 + "px"; }
                    })
        }
​
        function showtooltip(d) {
            d3.select(".tooltip")
                    .style("visibility", "visible")
                    .html(function() {
                        if (d.source.name == "Nichtwaehler_2015" && d.target.name == "Nichtwaehler_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Nichtwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) gingen diesmal ebenfalls nicht zur Wahl";
                        }
                        if (d.source.name == "Nichtwaehler_2015" && d.target.name == "Verstorbene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Nichtwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind seit der letzten Wahl verstorben";
                        }
                        if (d.source.name == "Nichtwaehler_2015" && d.target.name == "Weggezogene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Nichtwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind weggezogen";
                        }
                        if (d.source.name == "Nichtwaehler_2015" && d.target.name == "Andere_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Nichtwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal <b>eine andere Partei</b>";
                        }
                        if (d.source.name == "Erstwaehler_2015" && d.target.name == "Andere_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Erstwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal <b>eine andere Partei</b>";
                        }
                        if (d.source.name == "Erstwaehler_2015" && d.target.name == "Nichtwaehler_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Erstwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) gingen diesmal nicht zur Wahl";
                        }
                        if (d.source.name == "Erstwaehler_2015" && d.target.name == "Verstorbene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Erstwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind seit der letzten Wahl verstorben";
                        }
                        if (d.source.name == "Erstwaehler_2015" && d.target.name == "Weggezogene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Erstwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind weggezogen";
                        }
                        if (d.source.name == "Zugezogene_2015" && d.target.name == "Andere_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Zugezogene</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal <b>eine andere Partei</b>";
                        }
                        if (d.source.name == "Zugezogene_2015" && d.target.name == "Verstorbene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Zugezogene</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind seit der letzten Wahl verstorben";
                        }
                        if (d.source.name == "Zugezogene_2015" && d.target.name == "Weggezogene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Zugezogene</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind weggezogen";
                        }
                        if (d.source.name == "Zugezogene_2015" && d.target.name == "Nichtwaehler_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Zugezogene</b> (" + Math.round(d.value / d.source.value * 100) + " %) gingen diesmal nicht zur Wahl";
                        }
                        if (d.source.name == "Andere_2015" && d.target.name == "Nichtwaehler_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Wähler anderer Parteien</b> (" + Math.round(d.value / d.source.value * 100) + " %) gingen diesmal nicht zur Wahl";
                        }
                        if (d.source.name == "Nichtwaehler_2015") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Nichtwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                        if (d.target.name == "Nichtwaehler_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) gingen diesmal nicht wählen";
                        }
                        if (d.source.name == "Andere_2015" && d.target.name == "Andere_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Wähler anderer Parteien</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal <b>eine andere Partei</b>";
                        }
                        if (d.source.name == "Andere_2015" && d.target.name == "Weggezogene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Wähler anderer Parteien</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind weggezogen";
                        }
                        if (d.source.name == "Andere_2015" && d.target.name == "Verstorbene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Wähler anderer Parteien</b> (" + Math.round(d.value / d.source.value * 100) + " %) sind seit der letzten Wahl verstorben";
                        }
                        if (d.target.name == "Andere_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal eine andere Partei";
                        }
                        if (d.source.name == "Andere_2015") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>Wähler anderer Parteien</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                        if (d.source.name == "Zugezogene_2015") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Zugezogene</b> (" + Math.round(d.value / d.source.value * 100) + "%) wählten diesmal die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                        if (d.source.name == "Erstwaehler_2015") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> Erstwähler</b> (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                        if (d.target.name == "Verstorbene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) sind seit der letzten Wahl verstorben";
                        }
                        if (d.target.name == "Weggezogene_2017") {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) sind weggezogen";
                        }
                        if (d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") == d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")) {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) wählten wieder die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                        else {
                            return "<b>" + d3.format(",d")(d.value).replace(',', '.').replace(',', '.') + "</b> ehemalige <b>" + d.source.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>-Wähler (" + Math.round(d.value / d.source.value * 100) + " %) wählten diesmal die <b>" + d.target.name.slice(0, -5).replace("ae","ä").replace("ue","ü") + "</b>";
                        }
                    })
        }
​
        function hidetooltip(d) {
            d3.select(".tooltip").style("visibility", "hidden")
        }
​
        // opacity Funktionen
​
        function highlight(d) {
            d3.select(d)
                    .style("stroke-opacity", 1)
        }
​
        function opacity(d) {
            d3.select(d)
                    .style("stroke-opacity", 0.2)
        }
​
        function opacitynodes(d, mouseover_node) {
            var is_source = d3.select(mouseover_node).classed("source");
​
            if (is_source) {
                var selector = d.name.replace("_2015","");
                d3.selectAll('path.' + 'coming_from_' + selector).style("stroke-opacity", 1);
            }
            else{
                var selector = d.name.replace("_2017","");
                d3.selectAll('path.' + 'going_to_' + selector).style("stroke-opacity", 1);
            }
​
            //d3.selectAll('path.' + 'coming_from_' + selector + 'going_to_' + selector).style("stroke-opacity", 1);
        }
        function opacitynodeshide(d, mouseover_node) {
            var is_source = d3.select(mouseover_node).classed("source");
            if (is_source) {
                var selector = d.name.replace("_2015","");
                d3.selectAll('path.' + 'coming_from_' + selector).style("stroke-opacity", 0.2);
            }
            else{
                var selector = d.name.replace("_2017","");
                d3.selectAll('path.' + 'going_to_' + selector).style("stroke-opacity", 0.2);
            }
        }
        // Tooltip für die Nodes (Tabelle)
        function showtooltipnodes(d) {
            d3.select(".tooltipnode")
                    .style("visibility", "visible")
                    .html(function() {
                        var object = d3.entries(d),
                                nodeName = object[0].value,
                                linksTo = object[2].value,
                                linksFrom = object[3].value,
                                html;
​
                        if (nodeName == "Andere_2017") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>Andere Parteien</h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2013:</b></div>'+
                            '<table>';
                            for (i in linksFrom) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksFrom[i].source.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksFrom[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        else if (nodeName == "Nichtwaehler_2017") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielt sich diese Gruppe 2013:</b></div>'+
                            '<table>';
                            for (i in linksFrom) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksFrom[i].source.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksFrom[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        else if (nodeName == "Verstorbene_2017") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>Verstorbene</h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>Wähler dieser Parteien sind seit 2013 verstorben:</b></div>'+
                            '<table>';
                            for (i in linksFrom) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksFrom[i].source.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksFrom[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        else if (nodeName == "Weggezogene_2017") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>Wähler dieser Parteien sind seit 2013 weggezogen:</b></div>'+
                            '<table>';
                            for (i in linksFrom) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksFrom[i].source.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksFrom[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        else if (nodeName == "SPD_2015" || nodeName == "CDU_2015" || nodeName == "FDP_2015" || nodeName == "AfD_2015" || nodeName == "Gruene_2015" || nodeName == "Linke_2015") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2017:</b></div>'+
                            '<table>';
                            for (i in linksTo) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksTo[i].target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksTo[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
​
                        else if (nodeName == "Andere_2015") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>Andere Parteien</h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2017:</b></div>'+
                            '<table>';
                            for (i in linksTo) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksTo[i].target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksTo[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        else if (nodeName == "Erstwaehler_2015") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2017:</b></div>'+
                            '<table>';
                            for (i in linksTo) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksTo[i].target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksTo[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
​
                        else if (nodeName == "Nichtwaehler_2015") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielt sich diese Gruppe 2017:</b></div>'+
                            '<table>';
                            for (i in linksTo) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksTo[i].target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksTo[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
​
                        else if (nodeName == "Zugezogene_2015") {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2017:</b></div>'+
                            '<table>';
                            for (i in linksTo) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksTo[i].target.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksTo[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
​
​
                        else {
                            html =  '<div class="table-wrapper">'+
                            '<div id="tooltip_header" ><table><tr><th>' + '<h1>'+nodeName.slice(0, -5).replace("ae","ä").replace("ue","ü")+ ' </h1></th><th><h3>' +d3.format(",d")(d.value).replace(',', '.').replace(',', '.')+'</h3></th></tr></table>So verhielten sich diese Wähler 2013:</b></div>'+
                            '<table>';
                            for (i in linksFrom) {
                                html += '<tr>'+
                                '<td class="col-left">'+linksFrom[i].source.name.slice(0, -5).replace("ae","ä").replace("ue","ü")+'</td>'+
                                '<td align="right">'+formatAmount(linksFrom[i].value)+'</td>'+
                                '</tr>';
                            };
                        }
                        html += '</table></div>';
                        return html;
                    });
        }
​
​
        renderSankey();
​
​
        function hidetooltipnodes() {
            d3.select(".tooltipnode").style("visibility", "hidden");
            d3.select(".tooltip").style("visibility", "hidden");
        }
​
        function renderSankey() {
            // get width from current window width - funciton is triggered initially and on resize
            width = window.innerWidth - margin.left - margin.right;
​
​
            d3.select('body').selectAll('g').remove();
​
            graph = processData(currentData);
​
            myLinks = graph.links;
            myNodes = graph.nodes;
​
            svg = d3.select('.sankey')
                    .attr("width", width)
                    .attr("height", height)
                    .append("g");
​
            sankey = d3.sankey()
                    .size([width, height])
                    .nodes(myNodes)
                    .links(myLinks)
                    .layout(0);
​
            path = sankey.link();
​
            // Links hinzufügen, Links Klasse für Farbe und opacity zuweisen, hover Funktionen (Tooltip und opacity)
            link = svg.append("g").selectAll(".link")
                    .data(myLinks)
                    .enter().append("path")
                    .attr("class", "link")
                    .attr("class", function(d){
                        var selector_coming = d.source.name.replace("_2015","");
                        var selector_going = d.target.name.replace("_2017","");
                        return(selector_coming + " " + "coming_from_" + selector_coming + " " + "going_to_" + selector_going);
                    })
                    .attr("d", path)
                    .style("stroke-width", function(d) { return Math.max(1, d.dy); })
                    .sort(function(a, b) { return b.dy - a.dy; })
                    .on("click", function(){
                        hidetooltipnodes();
                    });
​
            // deactivating tooltips for links on mobile. not enough screen space
            if (!mobile){
                link.on("mouseover", function(d){
                    if (d.source.name === "CDU_2015") { d3.selectAll("#CDU_2015,#CDU_2017").style("fill", "white"); }
                    showtooltip(d);
                    highlight(this, d);
                })
                        .on("mousemove", function(d){
                            mousetooltiplink(d);})
                        .on("mouseout", function(d){
                            d3.selectAll("text").style("fill", "black");
                            hidetooltip(d);
                            opacity(this, d);
                        });
            }
​
​
​
            // Achsen Labels als Titel eingefügt
            // erste Zahl
            svg.append("text")
                    .attr("x", 0)
                    .attr("y", - (margin.top / 2))
                    .attr("class", "number1")
                    .text("2013");
​
            // zweite Zahl
            svg.append("text")
//                    .attr("x", (width / 1.05))
                    .attr("x", width)
                    .attr("y", 0- (margin.top / 2))
                    .attr("class", "number2")
                    .text("2017");
​
            // Nodes hinzufügen
            node = svg.append("g").selectAll(".node")
                    .data(myNodes)
                    .enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) {
                        return "translate(" + d.x + "," + d.y + ")"; });
​
            // Rechtecke für Nodes einfügen, Farbzuweisung nach Klasse
            node.append("rect")
                    .attr("height", function(d) { return d.dy; })
                    .attr("width", sankey.nodeWidth())
                    .attr("class", function(d) {
                        if (d.sourceLinks.length > 0) {
                            var type = "source";
                            var party = d.name.replace("_2015","");
                        }
                        else {
                            var type = "target";
                            var party = d.name.replace("_2017","");
                        }
                        return(type + " " + party)
                    })
                    .on('mouseover', function(d){
                        if (d.name === "CDU_2017" || d.name === "CDU_2015") { d3.selectAll("#CDU_2015,#CDU_2017").style("fill", "white"); }
                        opacitynodes(d, this);
                        showtooltipnodes(d);
                    })
                    .on("mousemove", function(d){
                        mousetooltip(d);
                    })
                    .on('mouseout', function(d){
                        d3.selectAll("text").style("fill", "black");
                        opacitynodeshide(d, this);
                        hidetooltipnodes();
                    });
​
            if (true) {
                node.append("text")
                        .attr("x", -6)
                        .attr("y", function(d) { return d.dy / 2; })
                        .attr("dy", ".35em")
                        .attr("text-anchor", "end")
                        .attr("transform", null)
                        .attr("id", function(d){ return d.name; })
                        .text(function(d) { return d.name.slice(0, -5).replace("ae","ä").replace("ue","ü"); })
                        .filter(function(d) { return d.x < width / 2; })
                        .attr("x", 6 + sankey.nodeWidth())
                        .attr("text-anchor", "start");
            } else {
                node.append("text")
                        .attr("x", 6 + sankey.nodeWidth())
                        .attr("y", function(d) { return d.dy / 2; })
                        .attr("dy", ".35em")
                        .attr("text-anchor", "start")
                        .attr("transform", null)
                        .text(function(d) { return d.name.slice(0, -5).replace("ae","ä").replace("ue","ü"); })
                        .filter(function(d) { return d.x < width / 2; })
                        .attr("x", -6)
                        .attr("text-anchor", "end");
            }
        }
​
        d3.select(window).on('resize', function(){
            window_width = parseInt(d3.select("body").style("width"),10);
            window_height = parseInt(d3.select("body").style("height"),10);
            renderSankey();
        });
​
    });
</script>
    