Estoy tratando de mostrar 10 arcos aleatorios usando la biblioteca globe.gl . ¿Cómo puedo cargar un número aleatorio de entradas de una matriz JSON para lograrlo? Actualmente, tengo este código ( ejemplo completo en 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 });

¿Cómo puedo filtrar los datos JSON cargados para limitarlos a 10 entradas aleatorias, es decir, para mostrar solo 10 arcos?

Además, ¿sería posible mostrar otros 10 arcos aleatorios después de algún tiempo? La biblioteca propone que esto se haga con la función setTimeout() pero tampoco tuve éxito con eso:

 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);

Se podría usar una biblioteca D3 si lo hiciera más fácil, ya que estoy usando esta biblioteca en otro lugar. Gracias.