I'm trying to show 10 random arcs using the globe.gl library. How can I load a random number of entries from a JSON array to achieve that? Currently, I have this code (full example on Codepen):

const capitalsUrl = "https://raw.githubusercontent.com/fallenartist/playground/main/json/capitals.json";
const world = Globe()(document.getElementById('globe'));
fetch(capitalsUrl).then(res => res.json()).then(capitals => {
    const dl = capitals.features.length;
    rand = Math.floor(Math.random() * dl);
    world
        .arcsData(capitals.features)
        .arcStartLat(() => capitals.features[rand].geometry.coordinates[1])
        .arcStartLng(() => capitals.features[rand].geometry.coordinates[0])
        .arcEndLat((d) => d.geometry.coordinates[1]) // I'd like 10 random entries here
        .arcEndLng((d) => d.geometry.coordinates[0]);// and here
});

How can I filter the loaded JSON data to limit it to random 10 entries, i.e. to show only 10 arcs?

Also, would it be possible to display another 10 random arcs after some time? The library proposes this is done with setTimeout() function but I was unsuccessful with that too:

setTimeout(() => {
    world
        .arcsData(capitals.features)
        .arcEndLat((d) => d.geometry.coordinates[1]) // I'd like 10 random entries here
        .arcEndLng((d) => d.geometry.coordinates[0]);// and here
}, 3000);

A D3 library could be used if it'd make this easier as I'm using this lib elsewhere. Thanks.