All examples By author By category About

Marie-Ella

Full window Github gist

diagramm

<!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">

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 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>

Updated missing url https://cdn.rawgit.com/d3/d3-plugins/master/sankey/sankey.js to https://cdn.jsdelivr.net/gh/d3/d3-plugins/sankey/sankey.js

Updated missing url https://cdn.rawgit.com/Caged/d3-tip/master/index.js to https://cdn.jsdelivr.net/gh/caged/d3-tip/index.js

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

https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js

https://cdn.rawgit.com/d3/d3-plugins/master/sankey/sankey.js

https://cdn.rawgit.com/Caged/d3-tip/master/index.js