@rws-framework/client 2.13.1 → 2.13.3

package/.emerge-vis-output/fast-foundation/html/resources/js/emerge_git.js

@@ -1,1414 +1,1414 @@
-let changeCouplingMapForDateRange = {}
-
-function clickDateRangePickerCancel() {
-    console.log("reset date range picker")
-    if (includeGitMetrics) {
-        initDateRangeUI()
-        dateRangePickerFrom = commit_first_date
-        dateRangePickerTo = commit_last_date
-        initGitMetricsForDateRange()
-        showToastDateRangeUpdate()
-    }
-}
-
-function initGitMetricsForDateRange() {
-    gitMetricsIndexFrom = commit_dates.indexOf( dateRangePickerFrom );
-    gitMetricsIndexTo = commit_dates.lastIndexOf( dateRangePickerTo );
-    // console.log("found first index: " + gitMetricsIndexFrom + " for `from` " + dateRangePickerFrom)
-    // console.log("found last index: " + gitMetricsIndexTo + " for `to` " + dateRangePickerTo)
-    changeCouplingMapForDateRange = calculateCouplingForDateRange()
-    // console.log(changeCouplingMapForDateRange)
-    // console.log(changeCouplingMapForDateRange)
-    addGitMetricToFileNodes()
-}
-
-function nodeNamesHaveChangeCoupling(sourceName, targetName) {
-    for (const [key, value] of Object.entries(changeCouplingMapForDateRange)) {
-        if (sourceName.includes( key ) ) {
-            for (const k of changeCouplingMapForDateRange[key]) {
-                if (targetName.includes(k)) {
-                    return true
-                }
-            }
-        }
-    }
-
-    return false
-}
-
-function calculateCouplingForDateRange() {
-    let totalChangeCouplingDict = {}
-    
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        let couplingLinks = commit_metrics[i].links
-        
-        if (couplingLinks.length > 0) {
-            for (nextChangeCouplingDict of couplingLinks) {
-                
-                // source -> target
-                if ( !(nextChangeCouplingDict.source in totalChangeCouplingDict) ) {
-                    totalChangeCouplingDict[nextChangeCouplingDict.source] = new Set();
-                    totalChangeCouplingDict[nextChangeCouplingDict.source].add(nextChangeCouplingDict.target)
-                } else {
-                    totalChangeCouplingDict[nextChangeCouplingDict.source].add(nextChangeCouplingDict.target)
-                }
-                
-                // target -> source
-                if ( !(nextChangeCouplingDict.target in totalChangeCouplingDict) ) {
-                    totalChangeCouplingDict[nextChangeCouplingDict.target] = new Set();
-                    totalChangeCouplingDict[nextChangeCouplingDict.target].add(nextChangeCouplingDict.source)
-                } else {
-                    totalChangeCouplingDict[nextChangeCouplingDict.target].add(nextChangeCouplingDict.source)
-                } 
-            }
-        }
-    }
-    return totalChangeCouplingDict
-}
-
-function calculateFileChurnForDateRange() {
-    let totalFileChurnDict = {}
-    
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        let nextChurnDict = commit_metrics[i].churn
-        totalFileChurnDict = mergeDicts(totalFileChurnDict, nextChurnDict)
-    }
-    
-    return totalFileChurnDict
-}
-
-function calculateSlocForDateRange() {
-    let totalSlocDict = {}
-    
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        let nextSlocDict = commit_metrics[i].sloc
-        totalSlocDict = mergeDictsToMostCurrentValues(totalSlocDict, nextSlocDict)
-    }
-    
-    return totalSlocDict
-}
-
-function calculateWhiteSpaceComplexityForDateRange() {
-    let totalWhiteSpaceComplexityDict = {}
-    
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        let nextWhiteSpaceComplexityDict = commit_metrics[i].ws_complexity
-        totalWhiteSpaceComplexityDict = mergeDictsToMostCurrentValues(totalWhiteSpaceComplexityDict, nextWhiteSpaceComplexityDict)
-    }
-    
-    return totalWhiteSpaceComplexityDict
-}
-
-function calculateAuthorsForDateRange() {
-    let totalFileAuthorsDict = {}
-    
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        let nextFileAuthorsDict = commit_metrics[i].files_author_map
-        totalFileAuthorsDict = mergeDicts(totalFileAuthorsDict, nextFileAuthorsDict)
-    }
-    return totalFileAuthorsDict
-}
-
-function addGitMetricToFileNodes() {
-    if (currentGraphType.includes('file_result_dependency_graph')) {
-        let fileChurnMap = calculateFileChurnForDateRange()
-        let whiteSpaceComplexityMap = calculateWhiteSpaceComplexityForDateRange()
-        let slocMap = calculateSlocForDateRange()
-        let authorsMap = calculateAuthorsForDateRange()
-
-        // console.log(authorsMap)
-        // console.log(whiteSpaceComplexityMap)
-        // console.log("fileResultPrefix: " + fileResultPrefix)
-        
-        currentGraph.nodes.forEach(function(node, i) {
-            
-            // housekeeping git code churn
-            delete node['metric_git_code_churn']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_code_churn']
-            }
-            
-            // housekeeping git ws complexity
-            delete node['metric_git_ws_complexity']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_ws_complexity']
-            }
-            
-            // housekeeping git number of file authors
-            delete node['metric_git_number_authors']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_number_authors']
-            }
-            delete node['metric_git_main_contrib']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_main_contrib']
-            }
-            
-            // housekeeping file contributors
-            delete node['metric_git_contributors']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_contributors']
-            }
-            
-            // housekeeping git sloc
-            delete node['metric_git_sloc']
-            if (node.hasOwnProperty('metrics')) {
-                delete node.metrics['metric_git_sloc']
-            }
-            
-            if (!node.hasOwnProperty('metrics')) {
-                node.metrics = {}
-            }
-            
-            let nodeFileName = node.id.split("/").pop();
-
-            let nodeSearchPath = ""
-            if (fileResultPrefix === "") { 
-                nodeSearchPath = node.id
-            } else {
-                nodeSearchPath = fileResultPrefix + "/" + node.id
-            }
-            
-            // add git code churn
-            for (const [key, value] of Object.entries(fileChurnMap)) {
-                if (nodeSearchPath.includes(key)) {
-                    node['metric_git_code_churn'] = value
-                    node.metrics['metric_git_code_churn'] = value
-                }
-            }
-            
-            // add git whitespace complexity
-            for (const [key, value] of Object.entries(whiteSpaceComplexityMap)) {
-                if (nodeSearchPath.includes(key)) {
-                    node['metric_git_ws_complexity'] = value
-                    node.metrics['metric_git_ws_complexity'] = value
-                }
-            }
-            
-            // add git sloc
-            for (const [key, value] of Object.entries(slocMap)) {
-                if (nodeSearchPath.includes(key)) {
-                    node['metric_git_sloc'] = value
-                    node.metrics['metric_git_sloc'] = value
-                }
-            }
-            
-            // add git number authors
-            for (const [key, value] of Object.entries(authorsMap)) {
-                if (nodeSearchPath.includes(key)) {
-                    node['metric_git_contributors'] = value
-                    node.metrics['metric_git_contributors'] = value
-                }
-            }
-            
-            // add all git contributors to file
-            for (const [key, value] of Object.entries(authorsMap)) {
-                if (nodeSearchPath.includes(key)) {
-                    node['metric_git_contributors'] = Object.keys(value)
-                    node.metrics['metric_git_contributors'] = Object.keys(value)
-                    node['metric_git_number_authors'] = Object.keys(value).length
-                    node.metrics['metric_git_number_authors'] = Object.keys(value).length
-                }
-            }
-            
-        });
-    }
-}
-
-function mainContributor(obj={}, asc=true) { 
-    let biggestChurn = 0
-    let authorBiggestChurn = ''
-    
-    for (let key in obj) {
-        if (obj[key] > biggestChurn) {
-            biggestChurn = obj[key]
-            authorBiggestChurn = key
-        }
-    }
-    
-    return authorBiggestChurn
-}
-
-// daterangepicker for git date range
-function initDateRangeUI() {
-    $('input[name="daterange"]').daterangepicker({
-        "startDate": commit_first_date,
-        "endDate": commit_last_date,
-        "minDate": commit_first_date,
-        "maxDate": commit_last_date,
-        
-        // ranges: {
-        //     'Last 3 days': [moment().subtract(2, 'days'), moment()],
-        //     'Last 10 days': [moment().subtract(9, 'days'), moment()],
-        //     'Last 30 days': [moment().subtract(29, 'days'), moment()],
-        //     'Last 60 days': [moment().subtract(59, 'days'), moment()],
-        //     'This month': [moment().startOf('month'), moment().endOf('month')],
-        //     'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
-        // },
-        
-        isInvalidDate: function(date) {
-            if ( commit_dates.includes(date.format('DD/MM/YYYY')) ) {
-                return false
-            } else {
-                return true
-            }
-        },
-        
-        "locale": {
-            "format": "DD/MM/YYYY",
-            "separator": " - ",
-            "applyLabel": "Apply",
-            "cancelLabel": "Cancel",
-            "fromLabel": "From",
-            "toLabel": "To",
-            "customRangeLabel": "Custom",
-            "weekLabel": "W",
-            "daysOfWeek": [
-                "Su",
-                "Mo",
-                "Tu",
-                "We",
-                "Th",
-                "Fr",
-                "Sa"
-            ],
-            "monthNames": [
-                "January",
-                "February",
-                "March",
-                "April",
-                "May",
-                "June",
-                "July",
-                "August",
-                "September",
-                "October",
-                "November",
-                "December"
-            ],
-            "firstDay": 1
-        },
-        
-        opens: 'left'
-    }, function(start, end, label) {
-        console.log("A new date selection was made: " + start.format('DD/MM/YYYY') + ' to ' + end.format('DD/MM/YYYY'));
-        dateRangePickerFrom = start.format('DD/MM/YYYY')
-        dateRangePickerTo = end.format('DD/MM/YYYY')
-        
-        // console.log(dateRangePickerFrom)
-        // console.log(dateRangePickerTo)
-        
-        initGitMetricsForDateRange()
-        showToastDateRangeUpdate()
-    })
-}
-
-function showToastDateRangeUpdate() {
-    const toastLiveExample = document.getElementById('toastDateRangeUpdated')
-    const toast = new bootstrap.Toast(toastLiveExample)    
-    toast.show()
-}
-
-// Copyright 2021 Observable, Inc.
-// Released under the ISC license.
-// https://observablehq.com/@d3/multi-line-chart
-function LineChart(data, {
-    x = ([x]) => x, // given d in data, returns the (temporal) x-value
-    y = ([, y]) => y, // given d in data, returns the (quantitative) y-value
-    z = () => 1, // given d in data, returns the (categorical) z-value
-    title, // given d in data, returns the title text
-    defined, // for gaps in data
-    curve = d3.curveLinear, // method of interpolation between points
-    marginTop = 20, // top margin, in pixels
-    marginRight = 30, // right margin, in pixels
-    marginBottom = 30, // bottom margin, in pixels
-    marginLeft = 40, // left margin, in pixels
-    width = 640, // outer width, in pixels
-    height = 400, // outer height, in pixels
-    xType = d3.scaleUtc, // type of x-scale
-    xDomain, // [xmin, xmax]
-    xRange = [marginLeft, width - marginRight], // [left, right]
-    yType = d3.scaleLinear, // type of y-scale
-    yDomain, // [ymin, ymax]
-    yRange = [height - marginBottom, marginTop], // [bottom, top]
-    yFormat, // a format specifier string for the y-axis
-    yLabel, // a label for the y-axis
-    zDomain, // array of z-values
-    color = "currentColor", // stroke color of line, as a constant or a function of *z*
-    strokeLinecap, // stroke line cap of line
-    strokeLinejoin, // stroke line join of line
-    strokeWidth = 1.0, // stroke width of line
-    strokeOpacity, // stroke opacity of line
-    mixBlendMode = "multiply", // blend mode of lines
-    voronoi, // show a Voronoi overlay? (for debugging)
-    id
-} = {}) {
-    // Compute values.
-    
-    let textColor = "#FFF"
-    if (!darkMode) { textColor = "#333333"}
-    
-    const X = d3.map(data, x);
-    const Y = d3.map(data, y);
-    const Z = d3.map(data, z);
-    const O = d3.map(data, d => d);
-    if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i])  ;
-    const D = d3.map(data, defined);
-    
-    // Compute default domains, and unique the z-domain.
-    if (xDomain === undefined) xDomain = d3.extent(X);
-    if (yDomain === undefined) yDomain = [0, d3.max(Y, d => typeof d === "string" ? +d : d)];
-    if (zDomain === undefined) zDomain = Z;
-    zDomain = new d3.InternSet(zDomain);
-    
-    // Omit any data not present in the z-domain.
-    const I = d3.range(X.length).filter(i => zDomain.has(Z[i]));
-    
-    // Construct scales and axes.
-    const xScale = xType(xDomain, xRange);
-    const yScale = yType(yDomain, yRange);
-    const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
-    const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat);
-    
-    // Compute titles.
-    const T = title === undefined ? Z : title === null ? null : d3.map(data, title);
-    
-    // Construct a line generator.
-    const line = d3.line()
-    .defined(i => D[i])
-    .curve(curve)
-    .x(i => xScale(X[i]))
-    .y(i => yScale(Y[i]));
-    
-    const svg = d3.create("svg")
-    .attr("id", id)
-    .attr("width", width)
-    .attr("height", height)
-    .attr("viewBox", [0, 0, width, height])
-    .attr("style", "max-width: 100%; height: auto; height: intrinsic;")
-    .style("-webkit-tap-highlight-color", "transparent")
-    .on("pointerenter", pointerentered)
-    .on("pointermove", pointermoved)
-    .on("pointerleave", pointerleft)
-    .on("touchstart", event => event.preventDefault());
-    
-    // An optional Voronoi display (for fun).
-    if (voronoi) svg.append("path")
-    .attr("fill", "none")
-    .attr("stroke", "#ccc")
-    .attr("d", d3.Delaunay
-    .from(I, i => xScale(X[i]), i => yScale(Y[i]))
-    .voronoi([0, 0, width, height])
-    .render());
-    
-    svg.append("g")
-    .attr("transform", `translate(0,${height - marginBottom})`)
-    .call(xAxis);
-    
-    svg.append("g")
-    .attr("transform", `translate(${marginLeft},0)`)
-    .call(yAxis)
-    .call(g => g.select(".domain").remove())
-    .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone()
-    .attr("x2", width - marginLeft - marginRight)
-    .attr("stroke-opacity", 0.1))
-    .call(g => g.append("text")
-    .attr("x", -marginLeft)
-    .attr("y", 10)
-    .attr("fill", "currentColor")
-    .attr("text-anchor", "start")
-    .text(yLabel));
-    
-    const path = svg.append("g")
-    .attr("fill", "none")
-    .attr("stroke", typeof color === "string" ? color : null)
-    .attr("stroke-linecap", strokeLinecap)
-    .attr("stroke-linejoin", strokeLinejoin)
-    .attr("stroke-width", strokeWidth)
-    .attr("stroke-opacity", strokeOpacity)
-    .selectAll("path")
-    .data(d3.group(I, i => Z[i]))
-    .join("path")
-    //.style("mix-blend-mode", mixBlendMode)
-    .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null)
-    .attr("d", ([, I]) => line(I));
-    
-    const dot = svg.append("g")
-    .attr("display", "none")
-    .attr("fill", "red");
-    
-    dot.append("circle")
-    .attr("r", 2.5);
-    
-    dot.append("text")
-    .attr("font-family", "sans-serif")
-    .attr("font-size", 10)
-    .attr("text-anchor", "middle")
-    .attr("fill", textColor) 
-    .attr("y", -8);
-    
-    function pointermoved(event) {
-        let strokeColor = "#323232"
-        if (!darkMode) { strokeColor = "#828282"}
-        
-        const [xm, ym] = d3.pointer(event);
-        const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point
-        path.style("stroke", ([z]) => Z[i] === z ? null : strokeColor).filter(([z]) => Z[i] === z).raise();
-        dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`);
-        if (T) dot.select("text").text(T[i]);
-        svg.property("value", O[i]).dispatch("input", {bubbles: true});
-    }
-    
-    function pointerentered() {
-        path.style("mix-blend-mode", null).style("stroke", "lightyellow");
-        dot.attr("display", null);
-    }
-    
-    function pointerleft() {
-        //path.style("mix-blend-mode", mixBlendMode).style("stroke", null);
-        path.style("stroke", "lightsteelblue")
-        dot.attr("display", "none");
-        svg.node().value = null;
-        svg.dispatch("input", {bubbles: true});
-    }
-    
-    return Object.assign(svg.node(), {value: null});
-}
-
-function generateTimeSeriesChart() {
-    
-    let timeSeriesComplexityTotal = {}
-    let timeSeriesSlocTotal = {}
-    let timeSeriesChurnTotal = {}
-    let timeSeriesComplexity = []
-    let timeSeriesSloc = []
-    let timeSeriesChurn = []
-        
-    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-        
-        // prepare complexity data for chart
-        for (const [key, value] of Object.entries(commit_metrics[i].ws_complexity)) {
-            
-            let filter = true
-            if (Object.keys(selectedNodesMap).length > 0) {
-                for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
-                    if (selectedNode.includes(key.toLowerCase())) {
-                        filter = false
-                    }
-                }
-            } else {
-                filter = false
-            }
-            
-            if (filter == true) {
-                continue
-            }
-            
-            for (const [file, complexity] of Object.entries(timeSeriesComplexityTotal)) {
-                if (file !== key) {
-                    timeSeriesComplexity.push(
-                        {
-                            'filepath' : file,
-                            'wscomplexity' : complexity,
-                            'date': commit_metrics[i].exact_date.replace(/_/g, "-")
-                        }
-                        )
-                    }
-                }
-                
-                timeSeriesComplexityTotal[key] = value
-                
-                let timeSeriesComplexityEntry = {
-                    'filepath' : key,
-                    'wscomplexity' : value,
-                    'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
-                }
-                timeSeriesComplexity.push(timeSeriesComplexityEntry)
-            }
-            
-            // prepare sloc data for chart
-            for (const [key, value] of Object.entries(commit_metrics[i].sloc)) {
-                
-                let filter = true
-                if (Object.keys(selectedNodesMap).length > 0) {
-                    for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
-                        if (selectedNode.includes(key.toLowerCase())) {
-                            filter = false
-                        }
-                    }
-                } else {
-                    filter = false
-                }
-                
-                if (filter == true) {
-                    continue
-                }
-                
-                for (const [file, sloc] of Object.entries(timeSeriesSlocTotal)) {
-                    if (file !== key) {
-                        timeSeriesSloc.push(
-                            {
-                                'filepath' : file,
-                                'sloc' : sloc,
-                                'date': commit_metrics[i].exact_date.replace(/_/g, "-")
-                            }
-                            )
-                        }
-                    }
-                    
-                    timeSeriesSlocTotal[key] = value
-                    
-                    let timeSeriesSlocEntry = {
-                        'filepath' : key,
-                        'sloc' : value,
-                        'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
-                    }
-                    timeSeriesSloc.push(timeSeriesSlocEntry)
-                }
-                
-                
-                // prepare churn data for chart
-                for (const [key, value] of Object.entries(commit_metrics[i].churn)) {
-                    let filter = true
-                    if (Object.keys(selectedNodesMap).length > 0) {
-                        for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
-                            if (selectedNode.includes(key.toLowerCase())) {
-                                filter = false
-                            }
-                        }
-                    } else {
-                        filter = false
-                    }
-                    
-                    if (filter == true) {
-                        continue
-                    }
-                    
-                    for (const [file, churn] of Object.entries(timeSeriesChurnTotal)) {
-                        if (file !== key) {
-                            timeSeriesChurn.push(
-                                {
-                                    'filepath' : file,
-                                    'churn' : churn,
-                                    'date': commit_metrics[i].exact_date.replace(/_/g, "-")
-                                }
-                                )
-                            }
-                        }
-                        
-                        timeSeriesChurnTotal[key] = value
-                        
-                        let timeSeriesChurnEntry = {
-                            'filepath' : key,
-                            'churn' : value,
-                            'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
-                        }
-                        timeSeriesChurn.push(timeSeriesChurnEntry)
-                    }
-                }
-                
-                let complexityChart = LineChart(timeSeriesComplexity, {
-                    x: d => Date.parse(d.date),
-                    y: d => d.wscomplexity,
-                    z: d => d.filepath,
-                    yLabel: "Whitespace Complexity",
-                    width: 1000,
-                    height: 300,
-                    color: "lightsteelblue",
-                    voronoi: false,
-                    id: "timeSeriesComplexityChart"
-                })
-                
-                let slocChart = LineChart(timeSeriesSloc, {
-                    x: d => Date.parse(d.date),
-                    y: d => d.sloc,
-                    z: d => d.filepath,
-                    yLabel: "SLOC",
-                    width: 1000,
-                    height: 300,
-                    color: "lightsteelblue",
-                    voronoi: false,
-                    id: "timeSeriesSlocChart"
-                })
-                
-                let churnChart = LineChart(timeSeriesChurn, {
-                    x: d => Date.parse(d.date),
-                    y: d => d.churn,
-                    z: d => d.filepath,
-                    yLabel: "Code churn",
-                    width: 1000,
-                    height: 300,
-                    color: "lightsteelblue",
-                    voronoi: false,
-                    id: "timeSeriesChurnChart"
-                })
-                
-                document.getElementById("my_dataviz").appendChild(complexityChart);
-                document.getElementById("time_series_sloc").appendChild(slocChart);
-                document.getElementById("my_dataviz2").appendChild(churnChart);
-            }
-            
-function generateChangeCouplingChart() {
-
-        let flows = []
-        let locations = []
-        let locationId = 0
-
-        let locationColorMap = {}
-
-        for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
-
-        // prepare change coupling data for chart
-        if (commit_metrics[i].links.length > 0) {
-            
-            for (link of commit_metrics[i].links) {
-                
-                const matchingSourceKey = link.source
-                const matchingTargetKey = link.target
- 
-                let filter = true
-                if (Object.keys(selectedNodesMap).length > 0) {
-                    for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
-                        if ( selectedNode.includes(matchingSourceKey.toLowerCase()) || selectedNode.includes(matchingTargetKey.toLowerCase()) ) {
-                            filter = false
-                        }
-                    }
-                } else {
-                    filter = false
-                }
-
-                if (filter == true) {
-                    continue
-                }
-
-                if ( !(locations.find(e => e.name === matchingSourceKey)) ) {
-                    
-                    if ( !(matchingSourceKey in locationColorMap) ) {
-                        let randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
-                        locationColorMap[matchingSourceKey] = randomColor
-                    }
-                    
-                    let location = {
-                        'id': locationId,
-                        'name': matchingSourceKey,
-                        'color': locationColorMap[matchingSourceKey]
-                    }
-                    locations.push(location)
-                    
-                    let flow = {
-                        'from' : locationId,
-                        'to' : locationId,
-                        'quantity': 0
-                        
-                    }
-                    flows.push(flow)
-                    locationId += 1
-                }
-                
-                if ( !(locations.find(e => e.name === matchingTargetKey)) ) {
-                    
-                    if ( !(matchingTargetKey in locationColorMap) ) {
-                        
-                        // find the corresponding node color
-                        for (const [key, value] of Object.entries(nodeColorMap)) {
-                            if (key.includes(matchingTargetKey)) {
-                                locationColorMap[matchingTargetKey] = value
-                            }
-                        }
-
-                        // if (matchingTargetKey in nodeColorMap) {
-                        //     locationColorMap[matchingTargetKey] = nodeColorMap[matchingTargetKey]
-                        // } else {
-                        //     console.log("should not happen")
-                        //     locationColorMap[matchingTargetKey] = '#FFFFFF' // "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
-                        // }
-                    }
-                    
-                    let location = {
-                        'id': locationId,
-                        'name': matchingTargetKey,
-                        'color': locationColorMap[matchingTargetKey]
-                    }
-                    
-                    locations.push(location)
-                    let flow = {
-                        'from' : locationId,
-                        'to' : locationId,
-                        'quantity': 0
-                        
-                    }
-                    flows.push(flow)
-                    locationId += 1
-                }
-                
-                const iSource = locations.findIndex(e => e.name === matchingSourceKey);
-                const iTarget = locations.findIndex(e => e.name === matchingTargetKey);
-                
-                if (iSource > -1 && iTarget > -1) {
-                    let flow = {
-                        'from' : locations[iSource].id,
-                        'to' : locations[iTarget].id,
-                        'quantity': 15
-                    }
-                    flows.push(flow)
-                }                            
-                
-            }
-            
-        }
-    
-    }
-
-    for (let n = 0; n < locationId; n++) {
-        for (let m = 0; m < locationId; m++) {
-            if ( !(flows.find(e => e.from === n && e.to === m )) ) {
-                let flow = {
-                    'from' : n,
-                    'to' : m,
-                    'quantity': 0
-                }
-                flows.push(flow)
-            }
-        }
-    }
-
-    // Borrowed from this great blog entry:
-    // https://blog.noser.com/d3-js-chord-diagramm-teil-2-benutzerdefinierte-sortierung-und-kurvenformen/
-
-    var matrix = [];
-
-    //Map list of data to matrix
-    flows.forEach(function (flow) {
-        
-        //Initialize sub-array if not yet exists
-        if (!matrix[flow.to]) {
-            matrix[flow.to] = [];
-        }
-        
-        matrix[flow.to][flow.from] = flow.quantity;
-    });
-
-/*//////////////////////////////////////////////////////////
-/////////////// Initiate Chord Diagram /////////////////////
-//////////////////////////////////////////////////////////*/
-let size = 900;
-let dr = 40; //radial translation for group names
-let dx = 20; //horizontal translation for group names
-let margin = { top: 0, right: 50, bottom: 50, left: 50 };
-let chordWidth = (size + 200) - margin.left - margin.right;
-let chordHeight = size - margin.top - margin.bottom;
-let innerRadius = Math.min(chordWidth, chordHeight) * .39;
-let outerRadius = innerRadius * 1.08;
-
-let root = d3.select("#change_coupling_chord_diagram");
-
-//Generate tooltip already, but keep it invisible for now.
-var toolTip = root.append("div")
-.classed("tooltip", true)
-.style("opacity", 0)
-.style("position", "absolute")
-.style("text-align", "center")
-.style("padding", "6px")
-.style("font", "10px sans-serif")
-.style("color", "black")
-.style("background", "silver")
-.style("border", "1px solid gray")
-.style("border-radius", "8px")
-.style("pointer-events", "none");
-
-var focusedChordGroupIndex = null;
-
-/*Initiate the SVG*/
-//D3.js v3!
-var svg = root.append("svg:svg")
-.attr("width", chordWidth + margin.left + margin.right)
-.attr("height", chordHeight + margin.top + margin.bottom)
-.attr("id", "svg_change_coupling_chord_diagram");
-
-var container = svg.append("g")
-.attr("transform", "translate(" + 
-(margin.left + chordWidth / 2) + "," + 
-(margin.top + chordHeight / 2) + ")");
-
-var chord = customChordLayout()
-.padding(0.04)
-.sortSubgroups(d3.descending) /*sort the chords inside an arc from high to low*/
-.sortChords(d3.ascending) /*which chord should be shown on top when chords cross. Now the largest chord is at the top*/
-.matrix(matrix);
-
-/*//////////////////////////////////////////////////////////
-////////////////// Draw outer Arcs /////////////////////////
-//////////////////////////////////////////////////////////*/
-var arc = d3.arc()
-.innerRadius(innerRadius)
-.outerRadius(outerRadius);
-
-var g = container.selectAll("g.group")
-.data(chord.groups)
-.enter()
-.append("svg:g")
-.attr("class", function (d) { return "group group-" + locations[d.index].id; });
-
-g.append("svg:path")
-.attr("d", arc)
-.style("fill", function (d) { 
-    return locations[d.index].color; 
-})
-.style("stroke", function (d) { 
-    return d3.rgb(locations[d.index].color).brighter(); 
-})
-.on("click", function (event, d) { highlightChords(d.index) }) // .on("click", function (d) { highlightChords(d.index) })
-.on("mouseover", function(event, i) { 
-    showArcToolTip(event, i);
-})
-.on("mouseout", function(d) { hideToolTip() });
-
-/*//////////////////////////////////////////////////////////
-//////////////// Initiate inner chords /////////////////////
-//////////////////////////////////////////////////////////*/
-var chords = container.selectAll("path.chord")
-.data(chord.chords)
-.enter()
-.append("svg:path")
-.attr("class", function (d) {
-    return "chord chord-source-" + d.source.index + " chord-target-" + d.target.index;
-})
-.attr("d", customChordPathGenerator().radius(innerRadius))
-//Change the fill to reference the unique gradient ID
-//of the source-target combination
-.style("fill", function (d) {
-    return "url(#chordGradient-" + d.source.index + "-" + d.target.index + ")";
-})
-.style("stroke", function (d) {
-    return "url(#chordGradient-" + d.source.index + "-" + d.target.index + ")";
-})
-.style("fill-opacity", "0.7")
-.on("mouseover", function(event, i) { 
-    if (focusedChordGroupIndex === null || 
-        i.source.index === focusedChordGroupIndex || 
-        i.target.index === focusedChordGroupIndex) {
-            if (focusedChordGroupIndex === null) {
-                d3.selectAll(".chord")
-                .style("fill-opacity", 0.2)
-                .style("stroke-opacity", 0.2);
-                d3.select(this).style("fill-opacity", 1);
-            }
-            else {
-                d3.selectAll(".chord.chord-source-" + focusedChordGroupIndex + ", " + 
-                ".chord.chord-target-" + focusedChordGroupIndex)
-                .style("fill-opacity", 0.2)
-                .style("stroke-opacity", 0.2);
-                d3.select(this).style("fill-opacity", 1);
-            }
-            
-            showChordToolTip(event, i);
-        }
-    })
-    .on("mouseout", function(d) { 
-        if (focusedChordGroupIndex === null) {
-            d3.selectAll(".chord")
-            .style("fill-opacity", 0.7)
-            .style("stroke-opacity", 1);
-        }
-        else {
-            d3.selectAll(".chord.chord-source-" + focusedChordGroupIndex + ", " +
-            ".chord.chord-target-" + focusedChordGroupIndex)
-            .style("fill-opacity", 0.7)
-            .style("stroke-opacity", 1);
-        }
-        
-        hideToolTip();
-    });
-    
-    //Cf https://www.visualcinnamon.com/2016/06/orientation-gradient-d3-chord-diagram
-    //Create a gradient definition for each chord
-    var grads = svg.append("defs").selectAll("linearGradient")
-    .data(chord.chords)
-    .enter().append("linearGradient")
-    //Create a unique gradient id per chord: e.g. "chordGradient-0-4"
-    .attr("id", function (d) {
-        return "chordGradient-" + d.source.index + "-" + d.target.index;
-    })
-    //Instead of the object bounding box, use the entire SVG for setting locations
-    //in pixel locations instead of percentages (which is more typical)
-    .attr("gradientUnits", "userSpaceOnUse")
-    //The full mathematical formula to find the x and y locations
-    .attr("x1", function (d, i) {
-        return innerRadius * Math.cos((d.source.endAngle - d.source.startAngle) / 2 +
-        d.source.startAngle - Math.PI / 2);
-    })
-    .attr("y1", function (d, i) {
-        return innerRadius * Math.sin((d.source.endAngle - d.source.startAngle) / 2 +
-        d.source.startAngle - Math.PI / 2);
-    })
-    .attr("x2", function (d, i) {
-        return innerRadius * Math.cos((d.target.endAngle - d.target.startAngle) / 2 +
-        d.target.startAngle - Math.PI / 2);
-    })
-    .attr("y2", function (d, i) {
-        return innerRadius * Math.sin((d.target.endAngle - d.target.startAngle) / 2 +
-        d.target.startAngle - Math.PI / 2);
-    });
-    
-    //Set the starting color (at 0%)
-    grads.append("stop")
-    .attr("offset", "0%")
-    .attr("stop-color", function (d) { return locations[d.source.index].color; });
-    
-    //Set the ending color (at 100%)
-    grads.append("stop")
-    .attr("offset", "100%")
-    .attr("stop-color", function (d) { return locations[d.target.index].color; });
-    
-    
-    /*//////////////////////////////////////////////////////////
-    ////////////////// Initiate Ticks //////////////////////////
-    //////////////////////////////////////////////////////////*/
-    var ticks = g.append("svg:g")
-    .selectAll("g.ticks")
-    .data(groupTicks)
-    .enter().append("svg:g")
-    .attr("transform", function (d) {
-        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
-        + "translate(" + outerRadius + 40 + ",0)";
-    });
-    
-    /*Append the tick around the arcs*/
-    ticks.append("svg:line")
-    .attr("x1", 1)
-    .attr("y1", 0)
-    .attr("x2", 6)
-    .attr("y2", 0)
-    .attr("class", "ticks")
-    .style("stroke", "#FFF")
-    .style("stroke-width", "1.5px");
-    
-    let labelColor = "#FFF"
-    if (!darkMode) { labelColor = "#333333"}
-    
-    /*Add the labels for the ticks*/
-    ticks.append("svg:text")
-    .attr("class", "tickLabels")
-    .attr("x", 12)
-    .attr("dy", ".35em")
-    .style("font-size", "10px")
-    .style("font-family", "sans-serif")
-    .attr("fill", labelColor)
-    .attr("transform", function (d) { 
-        return d.angle > Math.PI ? "rotate(180)translate(-25)" : null; 
-    })
-    .style("text-anchor", function (d) { 
-        return d.angle > Math.PI ? "end" : null; 
-    })
-    //.text(function (d) { return d.label; });
-    
-    /*//////////////////////////////////////////////////////////
-    ////////////////// Initiate Names //////////////////////////
-    //////////////////////////////////////////////////////////*/
-    g.append("svg:text")
-    .each(function (d) { d.angle = (d.startAngle + d.endAngle) / 2; })
-    .attr("dy", ".35em")
-    .attr("class", "titles")
-    .style("font-size", "10px")
-    .style("font-family", "sans-serif")
-    .attr("fill", labelColor)
-    .attr("text-anchor", function (d) { 
-        return d.angle > Math.PI ? "end" : null; 
-    })
-    .attr("transform", function (d) {
-        var r = outerRadius + dr;
-        var angle = d.angle + ((3 *Math.PI) / 2);
-        var x = r * Math.cos(angle);
-        var y = r * Math.sin(angle);
-        
-        if (d.angle > Math.PI) {
-            x -= dx;
-        }
-        else {
-            x += dx;
-        }
-        
-        return "translate(" + x + ", " + y + ")";
-    })
-    .text(function (d, i) {
-        if (locations[i].name.includes("/")) {
-            return locations[i].name.substring(locations[i].name.lastIndexOf('/') + 1)
-        } else {
-            return locations[i].name
-        }        
-    });
-    
-    /*Lines from labels to arcs*/
-    /*part in radial direction*/
-    this.g.append("line")
-    .attr("x1", function (d) { 
-        return outerRadius * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .attr("y1", function (d) { 
-        return outerRadius * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .attr("x2", function (d) { 
-        return (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .attr("y2", function (d) { 
-        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .style("stroke", "#FFF")
-    .style("stroke-width", "0.5px");
-    
-    /*horizontal part*/
-    this.g.append("line")
-    .attr("x1", function (d) { 
-        return (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .attr("y1", function (d) { 
-        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .attr("x2", function (d) {
-        var x = (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2));
-        if (d.angle > Math.PI) {
-            x -= dx - 5;
-        }
-        else {
-            x += dx - 5;
-        }
-        return x;
-    })
-    .attr("y2", function (d) { 
-        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
-    })
-    .style("stroke", "#FFF")
-    .style("stroke-width", "0.5px");
-    
-    /*//////////////////////////////////////////////////////////
-    ////////////////// Extra Functions /////////////////////////
-    //////////////////////////////////////////////////////////*/
-    
-    /*Returns an array of tick angles and labels, given a group*/
-    function groupTicks(d) {
-        var anglePerPerson = (d.endAngle - d.startAngle) / d.value;
-        return d3.range(0, d.value, 100).map(function (v, i) {
-            return {
-                angle: v * anglePerPerson + d.startAngle,
-                label: i % 5 ? null : v //Each 5th tick has a label
-            };
-        });
-    };
-    
-    //Hides all chords except the chords connecting to the subgroup / 
-    //location of the given index.
-    function highlightChords(index) {
-        //If this subgroup is already highlighted, toggle all chords back on.
-        if (focusedChordGroupIndex === index) {
-            showAllChords();
-            return;
-        }
-        
-        hideAllChords();
-        
-        //Show only the ones with source or target == index
-        d3.selectAll(".chord-source-" + index + ", .chord-target-" + index)
-        .transition().duration(500)
-        .style("fill-opacity", "0.7")
-        .style("stroke-opacity", "1");
-        
-        focusedChordGroupIndex = index;
-    };
-    
-    function showAllChords() {
-        svg.selectAll("path.chord")
-        .transition().duration(500)
-        .style("fill-opacity", "0.7")
-        .style("stroke-opacity", "1");
-        
-        focusedChordGroupIndex = null;
-    };
-    
-    function hideAllChords() {
-        svg.selectAll("path.chord")
-        .transition().duration(500)
-        .style("fill-opacity", "0")
-        .style("stroke-opacity", "0");
-    };
-    
-    function showChordToolTip(event, chord) {
-        var prompt = "";
-        
-        // if (chord.source.index !== chord.target.index) {
-        //     prompt += chord.source.value + " Kunden gingen von " + 
-        //     locations[chord.target.index].name + " nach " + 
-        //     locations[chord.source.index].name + ".";
-        //     prompt += "<br>";
-        //     prompt += chord.target.value + " Kunden gingen von " + 
-        //     locations[chord.source.index].name + " nach " + 
-        //     locations[chord.target.index].name + ".";
-        // }
-        // else {
-        //     prompt += chord.source.value + " Kunden blieben in " + 
-        //     locations[chord.source.index].name + ".";
-        // }
-        
-        prompt += locations[chord.target.index].name + "<br>" + "... changed together with ... " + "<br>" + locations[chord.source.index].name + ".";
-        
-        const[x, y] = d3.pointer(event);    
-        
-        toolTip
-        .style("opacity", 1)
-        .style("font-size", "10px")
-        .html(prompt)
-        .style("left", x - toolTip.node().getBoundingClientRect().width / 32  + "px") // .style("left", d3.event.pageX - toolTip.node().getBoundingClientRect().width / 2 + "px")
-        .style("top", y + 300 + "px"); // .style("top", (d3.event.pageY - 50) + "px");
-    };
-    
-    function showArcToolTip(event, arc) {
-        const[x, y] = d3.pointer(event);
-        // console.log(locations)
-        // console.log(arc)
-        
-        var prompt = locations[arc.index].name + "."; //Math.round(arc.value) 
-        
-        toolTip
-        .style("opacity", 1)
-        .html(prompt)
-        .style("left", x + toolTip.node().getBoundingClientRect().width  + "px")
-        .style("top", y + 300 + "px");
-    };
-    
-    function hideToolTip() {
-        toolTip.style("opacity", 0);
-    };
-    
-    ////////////////////////////////////////////////////////////
-    //////////// Custom Chord Layout Function //////////////////
-    /////// Places the Chords in the visually best order ///////
-    ///////////////// to reduce overlap ////////////////////////
-    ////////////////////////////////////////////////////////////
-    //////// Slightly adjusted by Nadieh Bremer ////////////////
-    //////////////// VisualCinnamon.com ////////////////////////
-    ////////////////////////////////////////////////////////////
-    ////// Original from the d3.layout.chord() function ////////
-    ///////////////// from the d3.js library ///////////////////
-    //////////////// Created by Mike Bostock ///////////////////
-    ////////////////////////////////////////////////////////////
-    function customChordLayout() {
-        var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π;
-        var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
-        function relayout() {
-            var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
-            var numSeq;
-            chords = [];
-            groups = [];
-            k = 0, i = -1;
-            
-            while (++i < n) {
-                x = 0, j = -1, numSeq = [];
-                while (++j < n) {
-                    x += matrix[i][j];
-                }
-                groupSums.push(x);
-                //////////////////////////////////////
-                ////////////// New part //////////////
-                //////////////////////////////////////
-                for (var m = 0; m < n; m++) {
-                    numSeq[m] = (n + (i - 1) - m) % n;
-                }
-                subgroupIndex.push(numSeq);
-                //////////////////////////////////////
-                //////////  End new part /////////////
-                //////////////////////////////////////
-                k += x;
-            }//while
-            
-            k = (τ - padding * n) / k;
-            x = 0, i = -1;
-            while (++i < n) {
-                x0 = x, j = -1;
-                while (++j < n) {
-                    var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
-                    subgroups[di + "-" + dj] = {
-                        index: di,
-                        subindex: dj,
-                        startAngle: a0,
-                        endAngle: a1,
-                        value: v
-                    };
-                }//while
-                
-                groups[di] = {
-                    index: di,
-                    startAngle: x0,
-                    endAngle: x,
-                    value: (x - x0) / k
-                };
-                x += padding;
-            }//while
-            
-            i = -1;
-            while (++i < n) {
-                j = i - 1;
-                while (++j < n) {
-                    var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
-                    if (source.value || target.value) {
-                        chords.push(source.value < target.value ? {
-                            source: target,
-                            target: source
-                        } : {
-                            source: source,
-                            target: target
-                        });
-                    }//if
-                }//while
-            }//while
-            if (sortChords) resort();
-        }//function relayout
-        
-        function resort() {
-            chords.sort(function (a, b) {
-                return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
-            });
-        }
-        chord.matrix = function (x) {
-            if (!arguments.length) return matrix;
-            n = (matrix = x) && matrix.length;
-            chords = groups = null;
-            return chord;
-        };
-        chord.padding = function (x) {
-            if (!arguments.length) return padding;
-            padding = x;
-            chords = groups = null;
-            return chord;
-        };
-        chord.sortGroups = function (x) {
-            if (!arguments.length) return sortGroups;
-            sortGroups = x;
-            chords = groups = null;
-            return chord;
-        };
-        chord.sortSubgroups = function (x) {
-            if (!arguments.length) return sortSubgroups;
-            sortSubgroups = x;
-            chords = null;
-            return chord;
-        };
-        chord.sortChords = function (x) {
-            if (!arguments.length) return sortChords;
-            sortChords = x;
-            if (chords) resort();
-            return chord;
-        };
-        chord.chords = function () {
-            if (!chords) relayout();
-            return chords;
-        };
-        chord.groups = function () {
-            if (!groups) relayout();
-            return groups;
-        };
-        return chord;
-    };
-    
-    ////////////////////////////////////////////////////////////
-    //////////// Custom Chord Path Generator ///////////////////
-    ///////// Uses cubic bezier curves with quadratic //////////
-    /////// spread of control points to minimise overlap ///////
-    ////////////////// of adjacent chords. /////////////////////
-    ////////////////////////////////////////////////////////////
-    /////// Original from the d3.svg.chord() function //////////
-    ///////////////// from the d3.js library ///////////////////
-    //////////////// Created by Mike Bostock ///////////////////
-    ////////////////////////////////////////////////////////////
-    function customChordPathGenerator() {
-        var source = function(d) { return d.source; };
-        var target = function(d) { return d.target; };
-        var radius = function(d) { return d.radius; };
-        var startAngle = function(d) { return d.startAngle; };
-        var endAngle = function(d) { return d.endAngle; };
-        
-        function chord(d, i) {
-            var s = subgroup(this, source, d, i),
-            t = subgroup(this, target, d, i);
-            
-            var path = "M" + s.p0
-            + arc(s.r, s.p1, s.a1 - s.a0) + (equals(s, t)
-            ? curve(s.r, s.p1, s.a1, s.r, s.p0, s.a0)
-            : curve(s.r, s.p1, s.a1, t.r, t.p0, t.a0)
-            + arc(t.r, t.p1, t.a1 - t.a0)
-            + curve(t.r, t.p1, t.a1, s.r, s.p0, s.a0))
-            + "Z";
-            
-            return path;
-        }
-        
-        function subgroup(self, f, d, i) {
-            var subgroup = f.call(self, d, i),
-            r = radius.call(self, subgroup, i),
-            a0 = startAngle.call(self, subgroup, i) - (Math.PI / 2),
-            a1 = endAngle.call(self, subgroup, i) - (Math.PI / 2);
-            
-            return {
-                r: r,
-                a0: a0,
-                a1: a1,
-                p0: [r * Math.cos(a0), r * Math.sin(a0)],
-                p1: [r * Math.cos(a1), r * Math.sin(a1)]
-            };
-        }
-        
-        function equals(a, b) {
-            return a.a0 == b.a0 && a.a1 == b.a1;
-        }
-        
-        function arc(r, p, a) {
-            return "A" + r + "," + r + " 0 " + +(a > Math.PI) + ",1 " + p;
-        }
-        
-        function curve(r0, p0, a0, r1, p1, a1) {
-            var deltaAngle = Math.abs(mod((a1 - a0 + Math.PI), (2 * Math.PI)) - Math.PI);
-            var radialControlPointScale = Math.pow((Math.PI - deltaAngle) / Math.PI, 2) * 0.9;
-            var controlPoint1 = [p0[0] * radialControlPointScale, p0[1] * radialControlPointScale];
-            var controlPoint2 = [p1[0] * radialControlPointScale, p1[1] * radialControlPointScale];
-            var cubicBezierSvg = "C " + controlPoint1[0] + " " + controlPoint1[1] + ", " + 
-            controlPoint2[0] + " " + controlPoint2[1] + ", " + 
-            p1[0] + " " + p1[1];
-            return cubicBezierSvg;
-        }
-        
-        function mod(a, n) {
-            return (a % n + n) % n;
-        }
-        
-        chord.radius = function(v) {
-            if (!arguments.length) return radius;
-            radius = typeof v === "function" ? v : function() { return v; };
-            return chord;
-        };
-        
-        chord.source = function(v) {
-            if (!arguments.length) return source;
-            source = typeof v === "function" ? v : function() { return v; };
-            return chord;
-        };
-        
-        chord.target = function(v) {
-            if (!arguments.length) return target;
-            target = typeof v === "function" ? v : function() { return v; };
-            return chord;
-        };
-        
-        chord.startAngle = function(v) {
-            if (!arguments.length) return startAngle;
-            startAngle = typeof v === "function" ? v : function() { return v; };
-            return chord;
-        };
-        
-        chord.endAngle = function(v) {
-            if (!arguments.length) return endAngle;
-            endAngle = typeof v === "function" ? v : function() { return v; };
-            return chord;
-        };
-        
-        return chord;
-    }
-    
+let changeCouplingMapForDateRange = {}
+
+function clickDateRangePickerCancel() {
+    console.log("reset date range picker")
+    if (includeGitMetrics) {
+        initDateRangeUI()
+        dateRangePickerFrom = commit_first_date
+        dateRangePickerTo = commit_last_date
+        initGitMetricsForDateRange()
+        showToastDateRangeUpdate()
+    }
+}
+
+function initGitMetricsForDateRange() {
+    gitMetricsIndexFrom = commit_dates.indexOf( dateRangePickerFrom );
+    gitMetricsIndexTo = commit_dates.lastIndexOf( dateRangePickerTo );
+    // console.log("found first index: " + gitMetricsIndexFrom + " for `from` " + dateRangePickerFrom)
+    // console.log("found last index: " + gitMetricsIndexTo + " for `to` " + dateRangePickerTo)
+    changeCouplingMapForDateRange = calculateCouplingForDateRange()
+    // console.log(changeCouplingMapForDateRange)
+    // console.log(changeCouplingMapForDateRange)
+    addGitMetricToFileNodes()
+}
+
+function nodeNamesHaveChangeCoupling(sourceName, targetName) {
+    for (const [key, value] of Object.entries(changeCouplingMapForDateRange)) {
+        if (sourceName.includes( key ) ) {
+            for (const k of changeCouplingMapForDateRange[key]) {
+                if (targetName.includes(k)) {
+                    return true
+                }
+            }
+        }
+    }
+
+    return false
+}
+
+function calculateCouplingForDateRange() {
+    let totalChangeCouplingDict = {}
+    
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        let couplingLinks = commit_metrics[i].links
+        
+        if (couplingLinks.length > 0) {
+            for (nextChangeCouplingDict of couplingLinks) {
+                
+                // source -> target
+                if ( !(nextChangeCouplingDict.source in totalChangeCouplingDict) ) {
+                    totalChangeCouplingDict[nextChangeCouplingDict.source] = new Set();
+                    totalChangeCouplingDict[nextChangeCouplingDict.source].add(nextChangeCouplingDict.target)
+                } else {
+                    totalChangeCouplingDict[nextChangeCouplingDict.source].add(nextChangeCouplingDict.target)
+                }
+                
+                // target -> source
+                if ( !(nextChangeCouplingDict.target in totalChangeCouplingDict) ) {
+                    totalChangeCouplingDict[nextChangeCouplingDict.target] = new Set();
+                    totalChangeCouplingDict[nextChangeCouplingDict.target].add(nextChangeCouplingDict.source)
+                } else {
+                    totalChangeCouplingDict[nextChangeCouplingDict.target].add(nextChangeCouplingDict.source)
+                } 
+            }
+        }
+    }
+    return totalChangeCouplingDict
+}
+
+function calculateFileChurnForDateRange() {
+    let totalFileChurnDict = {}
+    
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        let nextChurnDict = commit_metrics[i].churn
+        totalFileChurnDict = mergeDicts(totalFileChurnDict, nextChurnDict)
+    }
+    
+    return totalFileChurnDict
+}
+
+function calculateSlocForDateRange() {
+    let totalSlocDict = {}
+    
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        let nextSlocDict = commit_metrics[i].sloc
+        totalSlocDict = mergeDictsToMostCurrentValues(totalSlocDict, nextSlocDict)
+    }
+    
+    return totalSlocDict
+}
+
+function calculateWhiteSpaceComplexityForDateRange() {
+    let totalWhiteSpaceComplexityDict = {}
+    
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        let nextWhiteSpaceComplexityDict = commit_metrics[i].ws_complexity
+        totalWhiteSpaceComplexityDict = mergeDictsToMostCurrentValues(totalWhiteSpaceComplexityDict, nextWhiteSpaceComplexityDict)
+    }
+    
+    return totalWhiteSpaceComplexityDict
+}
+
+function calculateAuthorsForDateRange() {
+    let totalFileAuthorsDict = {}
+    
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        let nextFileAuthorsDict = commit_metrics[i].files_author_map
+        totalFileAuthorsDict = mergeDicts(totalFileAuthorsDict, nextFileAuthorsDict)
+    }
+    return totalFileAuthorsDict
+}
+
+function addGitMetricToFileNodes() {
+    if (currentGraphType.includes('file_result_dependency_graph')) {
+        let fileChurnMap = calculateFileChurnForDateRange()
+        let whiteSpaceComplexityMap = calculateWhiteSpaceComplexityForDateRange()
+        let slocMap = calculateSlocForDateRange()
+        let authorsMap = calculateAuthorsForDateRange()
+
+        // console.log(authorsMap)
+        // console.log(whiteSpaceComplexityMap)
+        // console.log("fileResultPrefix: " + fileResultPrefix)
+        
+        currentGraph.nodes.forEach(function(node, i) {
+            
+            // housekeeping git code churn
+            delete node['metric_git_code_churn']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_code_churn']
+            }
+            
+            // housekeeping git ws complexity
+            delete node['metric_git_ws_complexity']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_ws_complexity']
+            }
+            
+            // housekeeping git number of file authors
+            delete node['metric_git_number_authors']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_number_authors']
+            }
+            delete node['metric_git_main_contrib']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_main_contrib']
+            }
+            
+            // housekeeping file contributors
+            delete node['metric_git_contributors']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_contributors']
+            }
+            
+            // housekeeping git sloc
+            delete node['metric_git_sloc']
+            if (node.hasOwnProperty('metrics')) {
+                delete node.metrics['metric_git_sloc']
+            }
+            
+            if (!node.hasOwnProperty('metrics')) {
+                node.metrics = {}
+            }
+            
+            let nodeFileName = node.id.split("/").pop();
+
+            let nodeSearchPath = ""
+            if (fileResultPrefix === "") { 
+                nodeSearchPath = node.id
+            } else {
+                nodeSearchPath = fileResultPrefix + "/" + node.id
+            }
+            
+            // add git code churn
+            for (const [key, value] of Object.entries(fileChurnMap)) {
+                if (nodeSearchPath.includes(key)) {
+                    node['metric_git_code_churn'] = value
+                    node.metrics['metric_git_code_churn'] = value
+                }
+            }
+            
+            // add git whitespace complexity
+            for (const [key, value] of Object.entries(whiteSpaceComplexityMap)) {
+                if (nodeSearchPath.includes(key)) {
+                    node['metric_git_ws_complexity'] = value
+                    node.metrics['metric_git_ws_complexity'] = value
+                }
+            }
+            
+            // add git sloc
+            for (const [key, value] of Object.entries(slocMap)) {
+                if (nodeSearchPath.includes(key)) {
+                    node['metric_git_sloc'] = value
+                    node.metrics['metric_git_sloc'] = value
+                }
+            }
+            
+            // add git number authors
+            for (const [key, value] of Object.entries(authorsMap)) {
+                if (nodeSearchPath.includes(key)) {
+                    node['metric_git_contributors'] = value
+                    node.metrics['metric_git_contributors'] = value
+                }
+            }
+            
+            // add all git contributors to file
+            for (const [key, value] of Object.entries(authorsMap)) {
+                if (nodeSearchPath.includes(key)) {
+                    node['metric_git_contributors'] = Object.keys(value)
+                    node.metrics['metric_git_contributors'] = Object.keys(value)
+                    node['metric_git_number_authors'] = Object.keys(value).length
+                    node.metrics['metric_git_number_authors'] = Object.keys(value).length
+                }
+            }
+            
+        });
+    }
+}
+
+function mainContributor(obj={}, asc=true) { 
+    let biggestChurn = 0
+    let authorBiggestChurn = ''
+    
+    for (let key in obj) {
+        if (obj[key] > biggestChurn) {
+            biggestChurn = obj[key]
+            authorBiggestChurn = key
+        }
+    }
+    
+    return authorBiggestChurn
+}
+
+// daterangepicker for git date range
+function initDateRangeUI() {
+    $('input[name="daterange"]').daterangepicker({
+        "startDate": commit_first_date,
+        "endDate": commit_last_date,
+        "minDate": commit_first_date,
+        "maxDate": commit_last_date,
+        
+        // ranges: {
+        //     'Last 3 days': [moment().subtract(2, 'days'), moment()],
+        //     'Last 10 days': [moment().subtract(9, 'days'), moment()],
+        //     'Last 30 days': [moment().subtract(29, 'days'), moment()],
+        //     'Last 60 days': [moment().subtract(59, 'days'), moment()],
+        //     'This month': [moment().startOf('month'), moment().endOf('month')],
+        //     'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        // },
+        
+        isInvalidDate: function(date) {
+            if ( commit_dates.includes(date.format('DD/MM/YYYY')) ) {
+                return false
+            } else {
+                return true
+            }
+        },
+        
+        "locale": {
+            "format": "DD/MM/YYYY",
+            "separator": " - ",
+            "applyLabel": "Apply",
+            "cancelLabel": "Cancel",
+            "fromLabel": "From",
+            "toLabel": "To",
+            "customRangeLabel": "Custom",
+            "weekLabel": "W",
+            "daysOfWeek": [
+                "Su",
+                "Mo",
+                "Tu",
+                "We",
+                "Th",
+                "Fr",
+                "Sa"
+            ],
+            "monthNames": [
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "June",
+                "July",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December"
+            ],
+            "firstDay": 1
+        },
+        
+        opens: 'left'
+    }, function(start, end, label) {
+        console.log("A new date selection was made: " + start.format('DD/MM/YYYY') + ' to ' + end.format('DD/MM/YYYY'));
+        dateRangePickerFrom = start.format('DD/MM/YYYY')
+        dateRangePickerTo = end.format('DD/MM/YYYY')
+        
+        // console.log(dateRangePickerFrom)
+        // console.log(dateRangePickerTo)
+        
+        initGitMetricsForDateRange()
+        showToastDateRangeUpdate()
+    })
+}
+
+function showToastDateRangeUpdate() {
+    const toastLiveExample = document.getElementById('toastDateRangeUpdated')
+    const toast = new bootstrap.Toast(toastLiveExample)    
+    toast.show()
+}
+
+// Copyright 2021 Observable, Inc.
+// Released under the ISC license.
+// https://observablehq.com/@d3/multi-line-chart
+function LineChart(data, {
+    x = ([x]) => x, // given d in data, returns the (temporal) x-value
+    y = ([, y]) => y, // given d in data, returns the (quantitative) y-value
+    z = () => 1, // given d in data, returns the (categorical) z-value
+    title, // given d in data, returns the title text
+    defined, // for gaps in data
+    curve = d3.curveLinear, // method of interpolation between points
+    marginTop = 20, // top margin, in pixels
+    marginRight = 30, // right margin, in pixels
+    marginBottom = 30, // bottom margin, in pixels
+    marginLeft = 40, // left margin, in pixels
+    width = 640, // outer width, in pixels
+    height = 400, // outer height, in pixels
+    xType = d3.scaleUtc, // type of x-scale
+    xDomain, // [xmin, xmax]
+    xRange = [marginLeft, width - marginRight], // [left, right]
+    yType = d3.scaleLinear, // type of y-scale
+    yDomain, // [ymin, ymax]
+    yRange = [height - marginBottom, marginTop], // [bottom, top]
+    yFormat, // a format specifier string for the y-axis
+    yLabel, // a label for the y-axis
+    zDomain, // array of z-values
+    color = "currentColor", // stroke color of line, as a constant or a function of *z*
+    strokeLinecap, // stroke line cap of line
+    strokeLinejoin, // stroke line join of line
+    strokeWidth = 1.0, // stroke width of line
+    strokeOpacity, // stroke opacity of line
+    mixBlendMode = "multiply", // blend mode of lines
+    voronoi, // show a Voronoi overlay? (for debugging)
+    id
+} = {}) {
+    // Compute values.
+    
+    let textColor = "#FFF"
+    if (!darkMode) { textColor = "#333333"}
+    
+    const X = d3.map(data, x);
+    const Y = d3.map(data, y);
+    const Z = d3.map(data, z);
+    const O = d3.map(data, d => d);
+    if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i])  ;
+    const D = d3.map(data, defined);
+    
+    // Compute default domains, and unique the z-domain.
+    if (xDomain === undefined) xDomain = d3.extent(X);
+    if (yDomain === undefined) yDomain = [0, d3.max(Y, d => typeof d === "string" ? +d : d)];
+    if (zDomain === undefined) zDomain = Z;
+    zDomain = new d3.InternSet(zDomain);
+    
+    // Omit any data not present in the z-domain.
+    const I = d3.range(X.length).filter(i => zDomain.has(Z[i]));
+    
+    // Construct scales and axes.
+    const xScale = xType(xDomain, xRange);
+    const yScale = yType(yDomain, yRange);
+    const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
+    const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat);
+    
+    // Compute titles.
+    const T = title === undefined ? Z : title === null ? null : d3.map(data, title);
+    
+    // Construct a line generator.
+    const line = d3.line()
+    .defined(i => D[i])
+    .curve(curve)
+    .x(i => xScale(X[i]))
+    .y(i => yScale(Y[i]));
+    
+    const svg = d3.create("svg")
+    .attr("id", id)
+    .attr("width", width)
+    .attr("height", height)
+    .attr("viewBox", [0, 0, width, height])
+    .attr("style", "max-width: 100%; height: auto; height: intrinsic;")
+    .style("-webkit-tap-highlight-color", "transparent")
+    .on("pointerenter", pointerentered)
+    .on("pointermove", pointermoved)
+    .on("pointerleave", pointerleft)
+    .on("touchstart", event => event.preventDefault());
+    
+    // An optional Voronoi display (for fun).
+    if (voronoi) svg.append("path")
+    .attr("fill", "none")
+    .attr("stroke", "#ccc")
+    .attr("d", d3.Delaunay
+    .from(I, i => xScale(X[i]), i => yScale(Y[i]))
+    .voronoi([0, 0, width, height])
+    .render());
+    
+    svg.append("g")
+    .attr("transform", `translate(0,${height - marginBottom})`)
+    .call(xAxis);
+    
+    svg.append("g")
+    .attr("transform", `translate(${marginLeft},0)`)
+    .call(yAxis)
+    .call(g => g.select(".domain").remove())
+    .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone()
+    .attr("x2", width - marginLeft - marginRight)
+    .attr("stroke-opacity", 0.1))
+    .call(g => g.append("text")
+    .attr("x", -marginLeft)
+    .attr("y", 10)
+    .attr("fill", "currentColor")
+    .attr("text-anchor", "start")
+    .text(yLabel));
+    
+    const path = svg.append("g")
+    .attr("fill", "none")
+    .attr("stroke", typeof color === "string" ? color : null)
+    .attr("stroke-linecap", strokeLinecap)
+    .attr("stroke-linejoin", strokeLinejoin)
+    .attr("stroke-width", strokeWidth)
+    .attr("stroke-opacity", strokeOpacity)
+    .selectAll("path")
+    .data(d3.group(I, i => Z[i]))
+    .join("path")
+    //.style("mix-blend-mode", mixBlendMode)
+    .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null)
+    .attr("d", ([, I]) => line(I));
+    
+    const dot = svg.append("g")
+    .attr("display", "none")
+    .attr("fill", "red");
+    
+    dot.append("circle")
+    .attr("r", 2.5);
+    
+    dot.append("text")
+    .attr("font-family", "sans-serif")
+    .attr("font-size", 10)
+    .attr("text-anchor", "middle")
+    .attr("fill", textColor) 
+    .attr("y", -8);
+    
+    function pointermoved(event) {
+        let strokeColor = "#323232"
+        if (!darkMode) { strokeColor = "#828282"}
+        
+        const [xm, ym] = d3.pointer(event);
+        const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point
+        path.style("stroke", ([z]) => Z[i] === z ? null : strokeColor).filter(([z]) => Z[i] === z).raise();
+        dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`);
+        if (T) dot.select("text").text(T[i]);
+        svg.property("value", O[i]).dispatch("input", {bubbles: true});
+    }
+    
+    function pointerentered() {
+        path.style("mix-blend-mode", null).style("stroke", "lightyellow");
+        dot.attr("display", null);
+    }
+    
+    function pointerleft() {
+        //path.style("mix-blend-mode", mixBlendMode).style("stroke", null);
+        path.style("stroke", "lightsteelblue")
+        dot.attr("display", "none");
+        svg.node().value = null;
+        svg.dispatch("input", {bubbles: true});
+    }
+    
+    return Object.assign(svg.node(), {value: null});
+}
+
+function generateTimeSeriesChart() {
+    
+    let timeSeriesComplexityTotal = {}
+    let timeSeriesSlocTotal = {}
+    let timeSeriesChurnTotal = {}
+    let timeSeriesComplexity = []
+    let timeSeriesSloc = []
+    let timeSeriesChurn = []
+        
+    for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+        
+        // prepare complexity data for chart
+        for (const [key, value] of Object.entries(commit_metrics[i].ws_complexity)) {
+            
+            let filter = true
+            if (Object.keys(selectedNodesMap).length > 0) {
+                for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
+                    if (selectedNode.includes(key.toLowerCase())) {
+                        filter = false
+                    }
+                }
+            } else {
+                filter = false
+            }
+            
+            if (filter == true) {
+                continue
+            }
+            
+            for (const [file, complexity] of Object.entries(timeSeriesComplexityTotal)) {
+                if (file !== key) {
+                    timeSeriesComplexity.push(
+                        {
+                            'filepath' : file,
+                            'wscomplexity' : complexity,
+                            'date': commit_metrics[i].exact_date.replace(/_/g, "-")
+                        }
+                        )
+                    }
+                }
+                
+                timeSeriesComplexityTotal[key] = value
+                
+                let timeSeriesComplexityEntry = {
+                    'filepath' : key,
+                    'wscomplexity' : value,
+                    'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
+                }
+                timeSeriesComplexity.push(timeSeriesComplexityEntry)
+            }
+            
+            // prepare sloc data for chart
+            for (const [key, value] of Object.entries(commit_metrics[i].sloc)) {
+                
+                let filter = true
+                if (Object.keys(selectedNodesMap).length > 0) {
+                    for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
+                        if (selectedNode.includes(key.toLowerCase())) {
+                            filter = false
+                        }
+                    }
+                } else {
+                    filter = false
+                }
+                
+                if (filter == true) {
+                    continue
+                }
+                
+                for (const [file, sloc] of Object.entries(timeSeriesSlocTotal)) {
+                    if (file !== key) {
+                        timeSeriesSloc.push(
+                            {
+                                'filepath' : file,
+                                'sloc' : sloc,
+                                'date': commit_metrics[i].exact_date.replace(/_/g, "-")
+                            }
+                            )
+                        }
+                    }
+                    
+                    timeSeriesSlocTotal[key] = value
+                    
+                    let timeSeriesSlocEntry = {
+                        'filepath' : key,
+                        'sloc' : value,
+                        'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
+                    }
+                    timeSeriesSloc.push(timeSeriesSlocEntry)
+                }
+                
+                
+                // prepare churn data for chart
+                for (const [key, value] of Object.entries(commit_metrics[i].churn)) {
+                    let filter = true
+                    if (Object.keys(selectedNodesMap).length > 0) {
+                        for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
+                            if (selectedNode.includes(key.toLowerCase())) {
+                                filter = false
+                            }
+                        }
+                    } else {
+                        filter = false
+                    }
+                    
+                    if (filter == true) {
+                        continue
+                    }
+                    
+                    for (const [file, churn] of Object.entries(timeSeriesChurnTotal)) {
+                        if (file !== key) {
+                            timeSeriesChurn.push(
+                                {
+                                    'filepath' : file,
+                                    'churn' : churn,
+                                    'date': commit_metrics[i].exact_date.replace(/_/g, "-")
+                                }
+                                )
+                            }
+                        }
+                        
+                        timeSeriesChurnTotal[key] = value
+                        
+                        let timeSeriesChurnEntry = {
+                            'filepath' : key,
+                            'churn' : value,
+                            'date': commit_metrics[i].exact_date.replace(/_/g, "-") // TODO ...
+                        }
+                        timeSeriesChurn.push(timeSeriesChurnEntry)
+                    }
+                }
+                
+                let complexityChart = LineChart(timeSeriesComplexity, {
+                    x: d => Date.parse(d.date),
+                    y: d => d.wscomplexity,
+                    z: d => d.filepath,
+                    yLabel: "Whitespace Complexity",
+                    width: 1000,
+                    height: 300,
+                    color: "lightsteelblue",
+                    voronoi: false,
+                    id: "timeSeriesComplexityChart"
+                })
+                
+                let slocChart = LineChart(timeSeriesSloc, {
+                    x: d => Date.parse(d.date),
+                    y: d => d.sloc,
+                    z: d => d.filepath,
+                    yLabel: "SLOC",
+                    width: 1000,
+                    height: 300,
+                    color: "lightsteelblue",
+                    voronoi: false,
+                    id: "timeSeriesSlocChart"
+                })
+                
+                let churnChart = LineChart(timeSeriesChurn, {
+                    x: d => Date.parse(d.date),
+                    y: d => d.churn,
+                    z: d => d.filepath,
+                    yLabel: "Code churn",
+                    width: 1000,
+                    height: 300,
+                    color: "lightsteelblue",
+                    voronoi: false,
+                    id: "timeSeriesChurnChart"
+                })
+                
+                document.getElementById("my_dataviz").appendChild(complexityChart);
+                document.getElementById("time_series_sloc").appendChild(slocChart);
+                document.getElementById("my_dataviz2").appendChild(churnChart);
+            }
+            
+function generateChangeCouplingChart() {
+
+        let flows = []
+        let locations = []
+        let locationId = 0
+
+        let locationColorMap = {}
+
+        for (let i = gitMetricsIndexFrom; i < gitMetricsIndexTo; i++) {
+
+        // prepare change coupling data for chart
+        if (commit_metrics[i].links.length > 0) {
+            
+            for (link of commit_metrics[i].links) {
+                
+                const matchingSourceKey = link.source
+                const matchingTargetKey = link.target
+ 
+                let filter = true
+                if (Object.keys(selectedNodesMap).length > 0) {
+                    for (const [selectedNode, v] of Object.entries(selectedNodesMap)) {
+                        if ( selectedNode.includes(matchingSourceKey.toLowerCase()) || selectedNode.includes(matchingTargetKey.toLowerCase()) ) {
+                            filter = false
+                        }
+                    }
+                } else {
+                    filter = false
+                }
+
+                if (filter == true) {
+                    continue
+                }
+
+                if ( !(locations.find(e => e.name === matchingSourceKey)) ) {
+                    
+                    if ( !(matchingSourceKey in locationColorMap) ) {
+                        let randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
+                        locationColorMap[matchingSourceKey] = randomColor
+                    }
+                    
+                    let location = {
+                        'id': locationId,
+                        'name': matchingSourceKey,
+                        'color': locationColorMap[matchingSourceKey]
+                    }
+                    locations.push(location)
+                    
+                    let flow = {
+                        'from' : locationId,
+                        'to' : locationId,
+                        'quantity': 0
+                        
+                    }
+                    flows.push(flow)
+                    locationId += 1
+                }
+                
+                if ( !(locations.find(e => e.name === matchingTargetKey)) ) {
+                    
+                    if ( !(matchingTargetKey in locationColorMap) ) {
+                        
+                        // find the corresponding node color
+                        for (const [key, value] of Object.entries(nodeColorMap)) {
+                            if (key.includes(matchingTargetKey)) {
+                                locationColorMap[matchingTargetKey] = value
+                            }
+                        }
+
+                        // if (matchingTargetKey in nodeColorMap) {
+                        //     locationColorMap[matchingTargetKey] = nodeColorMap[matchingTargetKey]
+                        // } else {
+                        //     console.log("should not happen")
+                        //     locationColorMap[matchingTargetKey] = '#FFFFFF' // "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
+                        // }
+                    }
+                    
+                    let location = {
+                        'id': locationId,
+                        'name': matchingTargetKey,
+                        'color': locationColorMap[matchingTargetKey]
+                    }
+                    
+                    locations.push(location)
+                    let flow = {
+                        'from' : locationId,
+                        'to' : locationId,
+                        'quantity': 0
+                        
+                    }
+                    flows.push(flow)
+                    locationId += 1
+                }
+                
+                const iSource = locations.findIndex(e => e.name === matchingSourceKey);
+                const iTarget = locations.findIndex(e => e.name === matchingTargetKey);
+                
+                if (iSource > -1 && iTarget > -1) {
+                    let flow = {
+                        'from' : locations[iSource].id,
+                        'to' : locations[iTarget].id,
+                        'quantity': 15
+                    }
+                    flows.push(flow)
+                }                            
+                
+            }
+            
+        }
+    
+    }
+
+    for (let n = 0; n < locationId; n++) {
+        for (let m = 0; m < locationId; m++) {
+            if ( !(flows.find(e => e.from === n && e.to === m )) ) {
+                let flow = {
+                    'from' : n,
+                    'to' : m,
+                    'quantity': 0
+                }
+                flows.push(flow)
+            }
+        }
+    }
+
+    // Borrowed from this great blog entry:
+    // https://blog.noser.com/d3-js-chord-diagramm-teil-2-benutzerdefinierte-sortierung-und-kurvenformen/
+
+    var matrix = [];
+
+    //Map list of data to matrix
+    flows.forEach(function (flow) {
+        
+        //Initialize sub-array if not yet exists
+        if (!matrix[flow.to]) {
+            matrix[flow.to] = [];
+        }
+        
+        matrix[flow.to][flow.from] = flow.quantity;
+    });
+
+/*//////////////////////////////////////////////////////////
+/////////////// Initiate Chord Diagram /////////////////////
+//////////////////////////////////////////////////////////*/
+let size = 900;
+let dr = 40; //radial translation for group names
+let dx = 20; //horizontal translation for group names
+let margin = { top: 0, right: 50, bottom: 50, left: 50 };
+let chordWidth = (size + 200) - margin.left - margin.right;
+let chordHeight = size - margin.top - margin.bottom;
+let innerRadius = Math.min(chordWidth, chordHeight) * .39;
+let outerRadius = innerRadius * 1.08;
+
+let root = d3.select("#change_coupling_chord_diagram");
+
+//Generate tooltip already, but keep it invisible for now.
+var toolTip = root.append("div")
+.classed("tooltip", true)
+.style("opacity", 0)
+.style("position", "absolute")
+.style("text-align", "center")
+.style("padding", "6px")
+.style("font", "10px sans-serif")
+.style("color", "black")
+.style("background", "silver")
+.style("border", "1px solid gray")
+.style("border-radius", "8px")
+.style("pointer-events", "none");
+
+var focusedChordGroupIndex = null;
+
+/*Initiate the SVG*/
+//D3.js v3!
+var svg = root.append("svg:svg")
+.attr("width", chordWidth + margin.left + margin.right)
+.attr("height", chordHeight + margin.top + margin.bottom)
+.attr("id", "svg_change_coupling_chord_diagram");
+
+var container = svg.append("g")
+.attr("transform", "translate(" + 
+(margin.left + chordWidth / 2) + "," + 
+(margin.top + chordHeight / 2) + ")");
+
+var chord = customChordLayout()
+.padding(0.04)
+.sortSubgroups(d3.descending) /*sort the chords inside an arc from high to low*/
+.sortChords(d3.ascending) /*which chord should be shown on top when chords cross. Now the largest chord is at the top*/
+.matrix(matrix);
+
+/*//////////////////////////////////////////////////////////
+////////////////// Draw outer Arcs /////////////////////////
+//////////////////////////////////////////////////////////*/
+var arc = d3.arc()
+.innerRadius(innerRadius)
+.outerRadius(outerRadius);
+
+var g = container.selectAll("g.group")
+.data(chord.groups)
+.enter()
+.append("svg:g")
+.attr("class", function (d) { return "group group-" + locations[d.index].id; });
+
+g.append("svg:path")
+.attr("d", arc)
+.style("fill", function (d) { 
+    return locations[d.index].color; 
+})
+.style("stroke", function (d) { 
+    return d3.rgb(locations[d.index].color).brighter(); 
+})
+.on("click", function (event, d) { highlightChords(d.index) }) // .on("click", function (d) { highlightChords(d.index) })
+.on("mouseover", function(event, i) { 
+    showArcToolTip(event, i);
+})
+.on("mouseout", function(d) { hideToolTip() });
+
+/*//////////////////////////////////////////////////////////
+//////////////// Initiate inner chords /////////////////////
+//////////////////////////////////////////////////////////*/
+var chords = container.selectAll("path.chord")
+.data(chord.chords)
+.enter()
+.append("svg:path")
+.attr("class", function (d) {
+    return "chord chord-source-" + d.source.index + " chord-target-" + d.target.index;
+})
+.attr("d", customChordPathGenerator().radius(innerRadius))
+//Change the fill to reference the unique gradient ID
+//of the source-target combination
+.style("fill", function (d) {
+    return "url(#chordGradient-" + d.source.index + "-" + d.target.index + ")";
+})
+.style("stroke", function (d) {
+    return "url(#chordGradient-" + d.source.index + "-" + d.target.index + ")";
+})
+.style("fill-opacity", "0.7")
+.on("mouseover", function(event, i) { 
+    if (focusedChordGroupIndex === null || 
+        i.source.index === focusedChordGroupIndex || 
+        i.target.index === focusedChordGroupIndex) {
+            if (focusedChordGroupIndex === null) {
+                d3.selectAll(".chord")
+                .style("fill-opacity", 0.2)
+                .style("stroke-opacity", 0.2);
+                d3.select(this).style("fill-opacity", 1);
+            }
+            else {
+                d3.selectAll(".chord.chord-source-" + focusedChordGroupIndex + ", " + 
+                ".chord.chord-target-" + focusedChordGroupIndex)
+                .style("fill-opacity", 0.2)
+                .style("stroke-opacity", 0.2);
+                d3.select(this).style("fill-opacity", 1);
+            }
+            
+            showChordToolTip(event, i);
+        }
+    })
+    .on("mouseout", function(d) { 
+        if (focusedChordGroupIndex === null) {
+            d3.selectAll(".chord")
+            .style("fill-opacity", 0.7)
+            .style("stroke-opacity", 1);
+        }
+        else {
+            d3.selectAll(".chord.chord-source-" + focusedChordGroupIndex + ", " +
+            ".chord.chord-target-" + focusedChordGroupIndex)
+            .style("fill-opacity", 0.7)
+            .style("stroke-opacity", 1);
+        }
+        
+        hideToolTip();
+    });
+    
+    //Cf https://www.visualcinnamon.com/2016/06/orientation-gradient-d3-chord-diagram
+    //Create a gradient definition for each chord
+    var grads = svg.append("defs").selectAll("linearGradient")
+    .data(chord.chords)
+    .enter().append("linearGradient")
+    //Create a unique gradient id per chord: e.g. "chordGradient-0-4"
+    .attr("id", function (d) {
+        return "chordGradient-" + d.source.index + "-" + d.target.index;
+    })
+    //Instead of the object bounding box, use the entire SVG for setting locations
+    //in pixel locations instead of percentages (which is more typical)
+    .attr("gradientUnits", "userSpaceOnUse")
+    //The full mathematical formula to find the x and y locations
+    .attr("x1", function (d, i) {
+        return innerRadius * Math.cos((d.source.endAngle - d.source.startAngle) / 2 +
+        d.source.startAngle - Math.PI / 2);
+    })
+    .attr("y1", function (d, i) {
+        return innerRadius * Math.sin((d.source.endAngle - d.source.startAngle) / 2 +
+        d.source.startAngle - Math.PI / 2);
+    })
+    .attr("x2", function (d, i) {
+        return innerRadius * Math.cos((d.target.endAngle - d.target.startAngle) / 2 +
+        d.target.startAngle - Math.PI / 2);
+    })
+    .attr("y2", function (d, i) {
+        return innerRadius * Math.sin((d.target.endAngle - d.target.startAngle) / 2 +
+        d.target.startAngle - Math.PI / 2);
+    });
+    
+    //Set the starting color (at 0%)
+    grads.append("stop")
+    .attr("offset", "0%")
+    .attr("stop-color", function (d) { return locations[d.source.index].color; });
+    
+    //Set the ending color (at 100%)
+    grads.append("stop")
+    .attr("offset", "100%")
+    .attr("stop-color", function (d) { return locations[d.target.index].color; });
+    
+    
+    /*//////////////////////////////////////////////////////////
+    ////////////////// Initiate Ticks //////////////////////////
+    //////////////////////////////////////////////////////////*/
+    var ticks = g.append("svg:g")
+    .selectAll("g.ticks")
+    .data(groupTicks)
+    .enter().append("svg:g")
+    .attr("transform", function (d) {
+        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+        + "translate(" + outerRadius + 40 + ",0)";
+    });
+    
+    /*Append the tick around the arcs*/
+    ticks.append("svg:line")
+    .attr("x1", 1)
+    .attr("y1", 0)
+    .attr("x2", 6)
+    .attr("y2", 0)
+    .attr("class", "ticks")
+    .style("stroke", "#FFF")
+    .style("stroke-width", "1.5px");
+    
+    let labelColor = "#FFF"
+    if (!darkMode) { labelColor = "#333333"}
+    
+    /*Add the labels for the ticks*/
+    ticks.append("svg:text")
+    .attr("class", "tickLabels")
+    .attr("x", 12)
+    .attr("dy", ".35em")
+    .style("font-size", "10px")
+    .style("font-family", "sans-serif")
+    .attr("fill", labelColor)
+    .attr("transform", function (d) { 
+        return d.angle > Math.PI ? "rotate(180)translate(-25)" : null; 
+    })
+    .style("text-anchor", function (d) { 
+        return d.angle > Math.PI ? "end" : null; 
+    })
+    //.text(function (d) { return d.label; });
+    
+    /*//////////////////////////////////////////////////////////
+    ////////////////// Initiate Names //////////////////////////
+    //////////////////////////////////////////////////////////*/
+    g.append("svg:text")
+    .each(function (d) { d.angle = (d.startAngle + d.endAngle) / 2; })
+    .attr("dy", ".35em")
+    .attr("class", "titles")
+    .style("font-size", "10px")
+    .style("font-family", "sans-serif")
+    .attr("fill", labelColor)
+    .attr("text-anchor", function (d) { 
+        return d.angle > Math.PI ? "end" : null; 
+    })
+    .attr("transform", function (d) {
+        var r = outerRadius + dr;
+        var angle = d.angle + ((3 *Math.PI) / 2);
+        var x = r * Math.cos(angle);
+        var y = r * Math.sin(angle);
+        
+        if (d.angle > Math.PI) {
+            x -= dx;
+        }
+        else {
+            x += dx;
+        }
+        
+        return "translate(" + x + ", " + y + ")";
+    })
+    .text(function (d, i) {
+        if (locations[i].name.includes("/")) {
+            return locations[i].name.substring(locations[i].name.lastIndexOf('/') + 1)
+        } else {
+            return locations[i].name
+        }        
+    });
+    
+    /*Lines from labels to arcs*/
+    /*part in radial direction*/
+    this.g.append("line")
+    .attr("x1", function (d) { 
+        return outerRadius * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .attr("y1", function (d) { 
+        return outerRadius * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .attr("x2", function (d) { 
+        return (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .attr("y2", function (d) { 
+        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .style("stroke", "#FFF")
+    .style("stroke-width", "0.5px");
+    
+    /*horizontal part*/
+    this.g.append("line")
+    .attr("x1", function (d) { 
+        return (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .attr("y1", function (d) { 
+        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .attr("x2", function (d) {
+        var x = (outerRadius + dr) * Math.cos(d.angle + ((3 * Math.PI) / 2));
+        if (d.angle > Math.PI) {
+            x -= dx - 5;
+        }
+        else {
+            x += dx - 5;
+        }
+        return x;
+    })
+    .attr("y2", function (d) { 
+        return (outerRadius + dr) * Math.sin(d.angle + ((3 * Math.PI) / 2)); 
+    })
+    .style("stroke", "#FFF")
+    .style("stroke-width", "0.5px");
+    
+    /*//////////////////////////////////////////////////////////
+    ////////////////// Extra Functions /////////////////////////
+    //////////////////////////////////////////////////////////*/
+    
+    /*Returns an array of tick angles and labels, given a group*/
+    function groupTicks(d) {
+        var anglePerPerson = (d.endAngle - d.startAngle) / d.value;
+        return d3.range(0, d.value, 100).map(function (v, i) {
+            return {
+                angle: v * anglePerPerson + d.startAngle,
+                label: i % 5 ? null : v //Each 5th tick has a label
+            };
+        });
+    };
+    
+    //Hides all chords except the chords connecting to the subgroup / 
+    //location of the given index.
+    function highlightChords(index) {
+        //If this subgroup is already highlighted, toggle all chords back on.
+        if (focusedChordGroupIndex === index) {
+            showAllChords();
+            return;
+        }
+        
+        hideAllChords();
+        
+        //Show only the ones with source or target == index
+        d3.selectAll(".chord-source-" + index + ", .chord-target-" + index)
+        .transition().duration(500)
+        .style("fill-opacity", "0.7")
+        .style("stroke-opacity", "1");
+        
+        focusedChordGroupIndex = index;
+    };
+    
+    function showAllChords() {
+        svg.selectAll("path.chord")
+        .transition().duration(500)
+        .style("fill-opacity", "0.7")
+        .style("stroke-opacity", "1");
+        
+        focusedChordGroupIndex = null;
+    };
+    
+    function hideAllChords() {
+        svg.selectAll("path.chord")
+        .transition().duration(500)
+        .style("fill-opacity", "0")
+        .style("stroke-opacity", "0");
+    };
+    
+    function showChordToolTip(event, chord) {
+        var prompt = "";
+        
+        // if (chord.source.index !== chord.target.index) {
+        //     prompt += chord.source.value + " Kunden gingen von " + 
+        //     locations[chord.target.index].name + " nach " + 
+        //     locations[chord.source.index].name + ".";
+        //     prompt += "<br>";
+        //     prompt += chord.target.value + " Kunden gingen von " + 
+        //     locations[chord.source.index].name + " nach " + 
+        //     locations[chord.target.index].name + ".";
+        // }
+        // else {
+        //     prompt += chord.source.value + " Kunden blieben in " + 
+        //     locations[chord.source.index].name + ".";
+        // }
+        
+        prompt += locations[chord.target.index].name + "<br>" + "... changed together with ... " + "<br>" + locations[chord.source.index].name + ".";
+        
+        const[x, y] = d3.pointer(event);    
+        
+        toolTip
+        .style("opacity", 1)
+        .style("font-size", "10px")
+        .html(prompt)
+        .style("left", x - toolTip.node().getBoundingClientRect().width / 32  + "px") // .style("left", d3.event.pageX - toolTip.node().getBoundingClientRect().width / 2 + "px")
+        .style("top", y + 300 + "px"); // .style("top", (d3.event.pageY - 50) + "px");
+    };
+    
+    function showArcToolTip(event, arc) {
+        const[x, y] = d3.pointer(event);
+        // console.log(locations)
+        // console.log(arc)
+        
+        var prompt = locations[arc.index].name + "."; //Math.round(arc.value) 
+        
+        toolTip
+        .style("opacity", 1)
+        .html(prompt)
+        .style("left", x + toolTip.node().getBoundingClientRect().width  + "px")
+        .style("top", y + 300 + "px");
+    };
+    
+    function hideToolTip() {
+        toolTip.style("opacity", 0);
+    };
+    
+    ////////////////////////////////////////////////////////////
+    //////////// Custom Chord Layout Function //////////////////
+    /////// Places the Chords in the visually best order ///////
+    ///////////////// to reduce overlap ////////////////////////
+    ////////////////////////////////////////////////////////////
+    //////// Slightly adjusted by Nadieh Bremer ////////////////
+    //////////////// VisualCinnamon.com ////////////////////////
+    ////////////////////////////////////////////////////////////
+    ////// Original from the d3.layout.chord() function ////////
+    ///////////////// from the d3.js library ///////////////////
+    //////////////// Created by Mike Bostock ///////////////////
+    ////////////////////////////////////////////////////////////
+    function customChordLayout() {
+        var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π;
+        var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
+        function relayout() {
+            var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
+            var numSeq;
+            chords = [];
+            groups = [];
+            k = 0, i = -1;
+            
+            while (++i < n) {
+                x = 0, j = -1, numSeq = [];
+                while (++j < n) {
+                    x += matrix[i][j];
+                }
+                groupSums.push(x);
+                //////////////////////////////////////
+                ////////////// New part //////////////
+                //////////////////////////////////////
+                for (var m = 0; m < n; m++) {
+                    numSeq[m] = (n + (i - 1) - m) % n;
+                }
+                subgroupIndex.push(numSeq);
+                //////////////////////////////////////
+                //////////  End new part /////////////
+                //////////////////////////////////////
+                k += x;
+            }//while
+            
+            k = (τ - padding * n) / k;
+            x = 0, i = -1;
+            while (++i < n) {
+                x0 = x, j = -1;
+                while (++j < n) {
+                    var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
+                    subgroups[di + "-" + dj] = {
+                        index: di,
+                        subindex: dj,
+                        startAngle: a0,
+                        endAngle: a1,
+                        value: v
+                    };
+                }//while
+                
+                groups[di] = {
+                    index: di,
+                    startAngle: x0,
+                    endAngle: x,
+                    value: (x - x0) / k
+                };
+                x += padding;
+            }//while
+            
+            i = -1;
+            while (++i < n) {
+                j = i - 1;
+                while (++j < n) {
+                    var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
+                    if (source.value || target.value) {
+                        chords.push(source.value < target.value ? {
+                            source: target,
+                            target: source
+                        } : {
+                            source: source,
+                            target: target
+                        });
+                    }//if
+                }//while
+            }//while
+            if (sortChords) resort();
+        }//function relayout
+        
+        function resort() {
+            chords.sort(function (a, b) {
+                return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
+            });
+        }
+        chord.matrix = function (x) {
+            if (!arguments.length) return matrix;
+            n = (matrix = x) && matrix.length;
+            chords = groups = null;
+            return chord;
+        };
+        chord.padding = function (x) {
+            if (!arguments.length) return padding;
+            padding = x;
+            chords = groups = null;
+            return chord;
+        };
+        chord.sortGroups = function (x) {
+            if (!arguments.length) return sortGroups;
+            sortGroups = x;
+            chords = groups = null;
+            return chord;
+        };
+        chord.sortSubgroups = function (x) {
+            if (!arguments.length) return sortSubgroups;
+            sortSubgroups = x;
+            chords = null;
+            return chord;
+        };
+        chord.sortChords = function (x) {
+            if (!arguments.length) return sortChords;
+            sortChords = x;
+            if (chords) resort();
+            return chord;
+        };
+        chord.chords = function () {
+            if (!chords) relayout();
+            return chords;
+        };
+        chord.groups = function () {
+            if (!groups) relayout();
+            return groups;
+        };
+        return chord;
+    };
+    
+    ////////////////////////////////////////////////////////////
+    //////////// Custom Chord Path Generator ///////////////////
+    ///////// Uses cubic bezier curves with quadratic //////////
+    /////// spread of control points to minimise overlap ///////
+    ////////////////// of adjacent chords. /////////////////////
+    ////////////////////////////////////////////////////////////
+    /////// Original from the d3.svg.chord() function //////////
+    ///////////////// from the d3.js library ///////////////////
+    //////////////// Created by Mike Bostock ///////////////////
+    ////////////////////////////////////////////////////////////
+    function customChordPathGenerator() {
+        var source = function(d) { return d.source; };
+        var target = function(d) { return d.target; };
+        var radius = function(d) { return d.radius; };
+        var startAngle = function(d) { return d.startAngle; };
+        var endAngle = function(d) { return d.endAngle; };
+        
+        function chord(d, i) {
+            var s = subgroup(this, source, d, i),
+            t = subgroup(this, target, d, i);
+            
+            var path = "M" + s.p0
+            + arc(s.r, s.p1, s.a1 - s.a0) + (equals(s, t)
+            ? curve(s.r, s.p1, s.a1, s.r, s.p0, s.a0)
+            : curve(s.r, s.p1, s.a1, t.r, t.p0, t.a0)
+            + arc(t.r, t.p1, t.a1 - t.a0)
+            + curve(t.r, t.p1, t.a1, s.r, s.p0, s.a0))
+            + "Z";
+            
+            return path;
+        }
+        
+        function subgroup(self, f, d, i) {
+            var subgroup = f.call(self, d, i),
+            r = radius.call(self, subgroup, i),
+            a0 = startAngle.call(self, subgroup, i) - (Math.PI / 2),
+            a1 = endAngle.call(self, subgroup, i) - (Math.PI / 2);
+            
+            return {
+                r: r,
+                a0: a0,
+                a1: a1,
+                p0: [r * Math.cos(a0), r * Math.sin(a0)],
+                p1: [r * Math.cos(a1), r * Math.sin(a1)]
+            };
+        }
+        
+        function equals(a, b) {
+            return a.a0 == b.a0 && a.a1 == b.a1;
+        }
+        
+        function arc(r, p, a) {
+            return "A" + r + "," + r + " 0 " + +(a > Math.PI) + ",1 " + p;
+        }
+        
+        function curve(r0, p0, a0, r1, p1, a1) {
+            var deltaAngle = Math.abs(mod((a1 - a0 + Math.PI), (2 * Math.PI)) - Math.PI);
+            var radialControlPointScale = Math.pow((Math.PI - deltaAngle) / Math.PI, 2) * 0.9;
+            var controlPoint1 = [p0[0] * radialControlPointScale, p0[1] * radialControlPointScale];
+            var controlPoint2 = [p1[0] * radialControlPointScale, p1[1] * radialControlPointScale];
+            var cubicBezierSvg = "C " + controlPoint1[0] + " " + controlPoint1[1] + ", " + 
+            controlPoint2[0] + " " + controlPoint2[1] + ", " + 
+            p1[0] + " " + p1[1];
+            return cubicBezierSvg;
+        }
+        
+        function mod(a, n) {
+            return (a % n + n) % n;
+        }
+        
+        chord.radius = function(v) {
+            if (!arguments.length) return radius;
+            radius = typeof v === "function" ? v : function() { return v; };
+            return chord;
+        };
+        
+        chord.source = function(v) {
+            if (!arguments.length) return source;
+            source = typeof v === "function" ? v : function() { return v; };
+            return chord;
+        };
+        
+        chord.target = function(v) {
+            if (!arguments.length) return target;
+            target = typeof v === "function" ? v : function() { return v; };
+            return chord;
+        };
+        
+        chord.startAngle = function(v) {
+            if (!arguments.length) return startAngle;
+            startAngle = typeof v === "function" ? v : function() { return v; };
+            return chord;
+        };
+        
+        chord.endAngle = function(v) {
+            if (!arguments.length) return endAngle;
+            endAngle = typeof v === "function" ? v : function() { return v; };
+            return chord;
+        };
+        
+        return chord;
+    }
+    
 }