Рисование дуг между связующими точками на карте d3.js

Question

Я совершенно новичок в d3.js и хотел бы поучиться.Я пытаюсь нарисовать дуги между точками соединения на карте.

Я использую этот замечательный пример из ссылки . Это код, который я пытаюсь внести, идобавить дуги для plnkr для соединения точек.

Я видел комментарии к stackoverflow, я действительно знал, как применять методы:

Рисование соединительных линий («Великие дуги») на карте символов D3

Если я воспользуюсь приведенным ниже кодом, результатом будут все соединительные линии:

                var pathLine = d3.line()
            //      .curve(d3.curveCatmullRom.alpha(0))
            //      .curve(d3.curveCardinal.tension(0))
                    .curve(d3.curveLinear)
                    .x(function(d) { return projection([d["longitude"],d["latitude"]])[0];})
                    .y(function(d) { return projection([d["longitude"],d["latitude"]])[1];})           

                var Pathnew = d3.select('#map').append("path")
                .attr("d",pathLine(data[4]))
                .attr("class","bubble")
                .on("mouseover", function(d,i) { d3.select(this).transition().duration(1500).style("stroke-width", 2).style("stroke-opacity", .4).style('stroke', 'green'); })
                .on("mouseout", function(d,i) { d3.select(this).transition().duration(1500).style("stroke-width", 2).style("stroke-opacity", .4).style('stroke', 'red');    })  
                ;              

Я пытаюсь использоватьаналогичный код:

                    d3.csv("flights.csv", function(flights) {
                  var linksByOrigin = {},
                      countByAirport = {},
                      locationByAirport = {},
                      positions = [];

                  var arc = d3.geo.greatArc()
                      .source(function(d) { return locationByAirport[d.source]; })
                      .target(function(d) { return locationByAirport[d.target]; });

                  flights.forEach(function(flight) {
                    var origin = flight.origin, 
                        destination = flight.destination,
                        links = linksByOrigin[origin] || (linksByOrigin[origin] = []);
                        links.push({source: origin, target: destination});
                        countByAirport[origin] = (countByAirport[origin] || 0) + 1;
                        countByAirport[destination] = (countByAirport[destination] || 0) + 1;
                  });

, а также этот:

var arc = d3.geo.greatArc();

                    d3.csv("searches.csv", function(error, csv) {
                  csv.forEach(function(d, i) {
                    var orgGeo = airportMap[d.origin];
                    var dstGeo = airportMap[d.destination];

                    if (orgGeo && dstGeo) {
                      var data = {source: orgGeo, target: dstGeo};
                      var trans = svg.append("path")
                                     .attr("d", function(d) { return path(arc(data)); })
                                     .attr("fill", "none")
                                     .attr("stroke", d3.rgb(255, 255, 255))
                                     .attr("stroke-width", 0.4)
                                     .attr("stroke-opacity", 1e-6)
                                     .transition()
                                     .delay(i * 5)
                                     .duration(300)
                                     .ease(Math.sqrt)
                                     .attr("stroke-opacity", 0.7)
                                     .transition()
                                     .duration(Math.min(+d.search_count * 1000, 5000))
                                     .ease(Math.sqrt)
                                     .attr("stroke-opacity", 1e-6)
                                     .remove();
                    }
                  });