D3 Examples - Click and drag to create great arcs

xxxxxxxxxx
 
<!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)
​
            var clickable = svg.append("rect")
                .attr('width', w)
                .attr('height', h)
                .attr('fill', 'transparent');
            
            var downPoint = [];
            var up = svg.selectAll(".upClick")
                    .data(d3.range(5))
                    .enter().append("path")
                    .attr("class", "upClick")
            var down = svg.selectAll(".downClick")
                    .data(d3.range(5))
                    .enter().append("path")
            clickable.on('mousedown', function(d) {
                downPoint = projection.invert(d3.mouse(this));
                down.transition()
                    .attr("class", "downClick")
                    .attr("d", function(r) { return path(circle.center(downPoint).radius(.5 * r)())})
                    .attr('fill', "none")
                    .attr("stroke", "limegreen")
            })
            clickable.on('mouseup', function(d) {
                up.transition()
                    .attr("d", function(r) { return path(circle.center(projection.invert(d3.mouse(this))).radius(.5 * r)())})
                    .attr('fill', "none")
                    .attr("stroke", "black")
                svg.append("path")
                    .attr("d", path({type: "LineString", coordinates: [downPoint,projection.invert(d3.mouse(this))] }))
                    .attr('fill', "none")
                    .attr("stroke", "red")
            })
        }
    </script>
</body>
    