line between points w satellite projection

Inspired by Mike Bostock's satellite projection. Urban areas and coastline data by naturalearthdata

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
    <div class="map">

</div>
    <script src="d3.js"></script>
    <script src="d3.geo.projection.min.js"></script>
    <script src="topojson.js"></script>
    <script src="rbush.js"></script>
    <script src="spam.min.js"></script>

var graticule = d3.geo.graticule().step([5, 5]),
    width = 900,
    height = 650;

var places = {
        Rome: [12.39,41.91],
        Paris: [2.27, 48.85]
    };

d3.json("map.json", function(error, d) {
        topojson.presimplify(d)
        var map = new StaticCanvasMap({
            element: ".map",
            width: width,
            height: height,
            projection: d3.geo.satellite()
            .translate([width/2,0])
            .distance(1.1)
            .scale(2600)
            .center([30, 50])
            .rotate([0, -42, -40])
            .tilt(20)
            .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6),
            data: [
                {
                    features: topojson.feature(d, d.objects["land"]),
                    static: {
                        // graticule
                        prepaint: function(parameters, d) {
                            parameters.context.beginPath();
                            parameters.path(graticule());
                            parameters.context.lineWidth = 0.4;
                            parameters.context.strokeStyle = 'rgb(122,148,149)';
                            parameters.context.stroke();

},
                        // coastline
                        paintfeature: function(parameters, d) {
                            parameters.context.lineWidth = 0.2;
                            parameters.context.strokeStyle = "rgba(122, 148, 149, 0.8)";
                            parameters.context.stroke();
                            parameters.context.save()
                            parameters.context.shadowColor = "rgba(122, 148, 149, 0.8)";
                            parameters.context.shadowBlur = 5
                            parameters.context.fillStyle = "rgb(255,255,255)";
                            parameters.context.fill()
                            parameters.context.restore()
                        }
                    }
                },{
                    // countries
                    features: topojson.feature(d, d.objects["countries"]),
                    static: {
                        paintfeature: function(parameters, d) {
                            parameters.context.lineWidth = 0.2;
                            parameters.context.strokeStyle = "rgba(80,80,80, 1)";
                            parameters.context.stroke();

}
                    }
                },
                {
                    features: topojson.feature(d, d.objects["urbanareas"]),
                    static: {
                        // painting sphere
                        prepaint: function(parameters) {
                            parameters.context.beginPath()
                            parameters.path({type: "Sphere"})
                            parameters.context.lineWidth = 1
                            parameters.context.strokeStyle = "rgb(198, 197, 197)"
                            parameters.context.stroke()
                        },
                        // urban areas
                        paintfeature: function(parameters, d) {
                            parameters.context.lineWidth = 0.2;
                            parameters.context.strokeStyle = "rgba(80,80,80,0.4)";
                            parameters.context.stroke()
                            parameters.context.fillStyle = "rgba(161,205,59,0.1)";
                            parameters.context.fill()
                        },
                        // drawing points and line between
                        postpaint: function(parameters, d) {

var parPoints = parameters.map.settings().projection(places["Paris"]);
                            var romPoints = parameters.map.settings().projection(places["Rome"]);
                            parameters.context.moveTo(parPoints[0], parPoints[1])

// create line
                            parameters.context.save()
                            parameters.context.setLineDash([5, 5]);
                            parameters.context.quadraticCurveTo(700, -0, romPoints[0], romPoints[1]);
                            parameters.context.strokeStyle = "rgba(205,23,25,0.8)";
                            parameters.context.lineWidth = 2;
                            parameters.context.stroke();
                            parameters.context.restore()

d3.entries(places).forEach(function(d,i){

// city names
                                var points = parameters.map.settings().projection(d.value);
                                parameters.context.beginPath();
                                parameters.context.textAlign = "right"
                                parameters.context.font = "20px sans-serif"
                                parameters.context.lineWidth = 4;
                                parameters.context.strokeStyle = 'rgba(255,255,255,0.7)';
                                parameters.context.strokeText(d.key,points[0] - 10, points[1] + 5)
                                parameters.context.fillStyle = "rgba(80,80,80, 0.7)";
                                parameters.context.fillText(d.key, points[0] - 10, points[1] + 5)
                                parameters.context.stroke()

// points
                                parameters.context.beginPath();
                                parameters.context.arc(points[0], points[1] / parameters.scale, 3 , 0, 2 * Math.PI, true);
                                parameters.context.strokeStyle = "rgba(205,23,25,0.8)";
                                parameters.context.lineWidth = 4;
                                parameters.context.stroke();
                                parameters.context.fillStyle = "rgba(250,250,250,0.8)";
                                parameters.context.fill();
                            })
                        }
                    }

}
            ]
        })
        map.init()
    })

</script>
</body>
</html>