Click and drag to create great arcs

playing around with geoCircles and then wanted to click and drag to create a great arc, so did that too.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
    <style>
        .land { fill: forestgreen; stroke: #ddd; stroke-width: .4px; }
        .states { fill: none; stroke: #ddd; stroke-width: 1px; }
        .counties { fill: none; stroke: #ddd; stroke-width: 1px; }
        svg { background: blue; }
    </style>
    <script src="https://d3js.org/d3.v4.min.js "></script>
    <script src="https://unpkg.com/topojson@3"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <script>
    var m = 10, w = 960 - m*2, h = 500 - m*2;
    var svg = d3.select('body').append('svg')
        .style('margin', '0 calc(50% - ' + (w + m*2) + 'px/2)')
        .attr('width', w + m*2).attr('height', h + m*2)
        .append('g')
        .attr('transform', 'translate(' + [m,m] + ')');
        var a = [-77.470611, 37.550713], // Richmond, VA
            b = [-77.040318, 38.897725], // Washington, DC
            circle = d3.geoCircle();
        var projection = d3.geoEquirectangular();
        var path = d3.geoPath()
                .projection(projection);
        d3.queue().defer(d3.json, "world.json")
            .await(render);

function render(err, data) {
            if (err) throw error;
            console.log('rad', d3.geoDistance(a,b))
            console.log('dist', d3.geoDistance(a,b) * 3959)
            projection.fitSize([w,h],topojson.feature(data, data.objects.land));
            svg.append("path")
                .datum(topojson.feature(data, data.objects.land))
                .attr("class", "land")
                .attr("d", path)
            svg.append("path")
                .datum(topojson.feature(data, data.objects.countries))
                .attr("class", "counties")
                .attr("d", path)

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

https://unpkg.com/topojson@3

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