D3 -- Arcs for chord diagram not being displayed

I trying to understand how the D3 chord diagram works. My first step is to display the arcs for the diagram with following script. But for some reason, the arcs are not showing up.

See web page HERE

Can some one tell me what I am missing?

    <body>
    <script>
        // Chart dimensions.
        var width = 960, 
                height = 750, 
                innerRadius = Math.min(width, height) * .41, 
                outerRadius = innerRadius * 1.1; 

  //Create SVG element with chart dementions
        var svg = d3. select("body")
                .append("svg")
                .attr("width", width) 
                .attr("height", height) 
                .append ("g")
                .attr("transform", "translate (" + width / 2 + "," + height / 2 + ")"); 

//------------Reformat Data ------------------------------------------

        var matrix = [];  // <- here is the data 
        d3.tsv('picData.tsv', function(err, data) 
        {
            //console.log(data);
            pictures = d3.keys(data[0]).slice(1);
            //console.log(pictures);

            data.forEach(function(row) 
            {
                var mrow = [];
                pictures.forEach(function(c) 
                {
                    mrow.push(Number(row[c]));
                });
                matrix.push(mrow);
            //console.log(mrow);
            }); 
            //console.log('1st row: ' + matrix[0]);
            //console.log(matrix);
        });

//---------------- Define diagram layout ----------------------------

        var chord = d3.layout.chord() //<-- produce a chord diagram from a matrix of input data
                .matrix(matrix)  //<-- data in matrix form
                .padding(0.05) 
                .sortSubgroups(d3.descending);

        var fill = d3.scale.category20(); //<-- https://github.com/mbostock/d3/wiki/API-Reference#d3scale-scales
            //console.log(fill);

        var g = svg.selectAll("g.group")
                .data(chord.groups)
                .enter().append("svg:g")
                .attr("class", "group"); 

                //console.log(g);

        // create arcs
        var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

                //console.log(arc);

        g.append("path")
            .attr("d", arc)
            .style("fill", function(d) {  console.log(d.index); return fill(d.index);})
            .style("stroke", function(d) { return fill(d.index); })
            .attr("id", function(d, i) { return"group-" + d.index });;

        g.append("svg:text")
                .attr("x", 6)
                .attr("class", "picture")
                .attr("dy", 15)
            .append("svg:textPath")
                .attr("xlink:href", function(d) { return "#group-" + d.index; })
                .text(function(d) { return pictures[d.index]; }); 
            //console.log(g);

    </script>
    </body>

Solution

Your problem stems from the fact that d3.tsv is asynchronous:

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously.

As a result, all of your code under "Define diagram layout" is being executed before any data is loaded. Otherwise, your code works fine (See image below). So just move all your code into your d3.tsv(...) call and you'll be all set.

enter image description here