Source: linechart.js

// Basis: https://bl.ocks.org/mbostock/3884955
/**
 * Renders the line chart between two rankings
 * @param id id of the element in which to render the line chart
 * @param left data of the ranking to the left side
 * @param right data of the ranking to the right side
 * @param hovered id of hovered element
 * @param clicked id of clicked element
 * @param maxrows max rows of rankings on both sides
 * @param changeRank flag if filters should influence ranking order
 */
function linechart(id, left, right, hovered, clicked, maxrows, changeRank) {

    console.log("linechart");
    console.log(id);
    console.log(left);
    console.log(right);

    var split = id.split("_");
    var year1 = split[1];
    var begegnung1 = split[2];
    var year2 = split[3];
    var begegnung2 = split[4];

    var svg = d3.select(id),
        margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = svg.attr("width") - margin.left - margin.right,
        height = svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%Y%m%d");

    var x = d3.scaleLinear().range([0, width]),
        y = d3.scaleLinear().range([0, height]),
        z = d3.scaleOrdinal(d3.schemeCategory10);

    var line = d3.line()
        .curve(d3.curveBasis)
        .x(function (d) {
            return x(d.side);
        })
        .y(function (d) {
            return y(d.temperature);
        });

    var data = [];
    data.columns = ["side"];

    var leftsidetmp = {};
    left.map(function (d) {
        var name = d.nameId; //.replace(/[^a-zA-Z]/g, "");
        if(changeRank) {
            if(d.rank !== null) {
                leftsidetmp[name] = parseInt(d.rank);
            }
        } else {
            if(d.rankTrue !== null) {
                leftsidetmp[name] = parseInt(d.rankTrue);
            }
        }
    });
    leftsidetmp['side'] = 0;

    var rightside = {};
    right.map(function (d) {
        var name = d.nameId; //.replace(/[^a-zA-Z]/g, "");
        if(changeRank) {
            if (d.rank !== null && name in leftsidetmp) {
                rightside[name] = parseInt(d.rank);
                data.columns.push(name);
            }
        } else {
            if (d.rankTrue !== null && name in leftsidetmp) {
                rightside[name] = parseInt(d.rankTrue);
                data.columns.push(name);
            }
        }
    });

    var leftside = {};
    for (var name in leftsidetmp) {
        if (name in rightside) {
            leftside[name] = leftsidetmp[name];
        }
    }


    data[0] = leftside;
    data[1] = rightside;

    data[0].side = 0;
    data[1].side = 1;

    var cities = data.columns.slice(1).map(function (id) {
        return {
            id: id,
            values: data.map(function (d) {
                return {side: d.side, temperature: d[id]};
            }),
            rows: maxrows,
            year1: year1,
            begegnung1: begegnung1,
            year2: year2,
            begegnung2: begegnung2
        };
    });

    x.domain(d3.extent(data, function (d) {
        return d.side;
    }));

    y.domain([
        d3.min(cities, function (c) {
            return 0.5;
        }),
        d3.max(cities, function (c) {
            //console.log("c:");
            //console.log(c);
            return (c.rows + 0.5);
        })
    ]);
    /*
    //OLD:
    y.domain([
      d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
      d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
    ]);
    */

    z.domain(cities.map(function (c) {
        return c.id;
    }));

    /*
    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .text("Temperature, ºF");
      */

    var city = g.selectAll(".city")
        .data(cities)
        .enter().append("g")
        .attr("class", "city");

    city.append("path")
        .attr("class", function (d) {
            return d.id == null?"":d.id.replace(/[^a-zA-Z]/g, "")+" line";
        })
        .attr("d", function (d) {
            return line(d.values);
        })
        .style("stroke-width", function (d) {
            return 6;
        })
        .style("stroke", function (d) {
            if (d.id == hovered)
                return "yellow";
            else if (d.id == clicked)
                return "#666";
            else
                return "#CCC";
        })
        .on("mouseover", function (d) {
            if(d.year1 !== d.year2) {
                console.log("log");
                loadFighters(d.id, d.year1, d.year2);
            }
            $("." + d.id.replace(/[^a-zA-Z]/g, "")).addClass("hovered");
        })
        .on("mouseout",  function (d) {
            if(d.year1 !== d.year2) {
                hideToolTipBoxfighters();
            }
            $("." + d.id.replace(/[^a-zA-Z]/g, "")).removeClass("hovered");
        });

    /*
city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { console.log(d); return z(d.id); });
    */


    city.append("text")
        .datum(function (d) {
            return {id: d.id, value: d.values[d.values.length - 1]};
        })
        .attr("transform", function (d) {
            return "translate(" + x(d.value.side) + "," + y(d.value.temperature) + ")";
        })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "10px sans-serif")
        .text(function (d) {
            return d.id;
        });

}

function handleMouseOut() {

}