Draw custom paths generated by geoPath(geoJSON feature) in p5.js

Community Help
1

I’m trying to draw great circle paths using p5.js, which I am using instead of SVG because my data set is a geographic network with 10 000+ edges. To generate the path, I use the following pattern:

// A path generator
var path = d3.geoPath()
    .projection(projection)

var link = {type: "LineString", coordinates: [[100, 60], [-60, -30]]} // Change these data to see ho the great circle reacts

var newPath = path(link)

newPath contains an SVG path string. Now, I would like to use the same string to draw a great circle path on a map using p5.js, but am not sure how to begin doing so. My knowledge of p5.js only extends up to Bezier curves and curves where you give each of the vertices to form the curve. This doesn’t seem to be a common problem so I’ve only found tutorials and how-tos for more standard shapes and polygons in p5.

What would be the most straightforward way to plot great circle paths in p5.js, based on the path generated by the geoPath function?

2

You could use Path2D to convert the SVG path so it can be drawn in the p5 canvas.

2 Likes
3

Great, this is exactly what I was looking for! Thank you for the detailed walkthrough.

1 Like