Adding data with API to globe.gl which i use for leaflet map

Question

I'm new and want to learn JavaScript. I made a covid world map with a leaflet with API data. I would like to apply the same data to globe.gl.

Could you please advise me how I can apply the same statesData which I use for the leaflet map to 3d globe?

I use this stats data and editing some country names to match with API data. https://datahub.io/core/geo-countries

This is a data pulling part of codes for globe.gl for example.

const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);

fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
{
  const maxVal = Math.max(...countries.features.map(getVal));
  colorScale.domain([0, maxVal]);

and this is the code on leaflet map. I want to use this data to globe.gl above.

var geojson = L.geoJson(statesData).addTo(map);

let covid;

//  GET THE COVID DATA
function setup(){
    loadJSON("https://disease.sh/v3/covid-19/countries",gotData);
}

// let geo = L.geoJson(statesData, {style: style}).addTo(map);
let geo = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
}).addTo(map);

function gotData(data) {
  var covid = data;
    // add covid cases to states data
    for (let j = 0; j < data.length; j++) {
        for (let i = 0; i < statesData.features.length; i++) {
            if (statesData.features[i].properties.ADMIN === covid[j].country || statesData.features[i].properties.ISO_A3 === covid[j].country) {
               statesData.features[i].properties.cases = covid[j].cases;
                    break;
            }
        }
    }

    geo.addData(statesData);
    // geojson.addData(statesData);
};

Thank you so much for your help.

Answer 1

I could solve by adding API data to the sample JSON below

window.onload = function() {
  var url = 'https://disease.sh/v3/covid-19/countries';
  fetch(url)
  .then(function (data) {
    return data.json();
  })
  .then(function (cData) {
    makeMap(cData);
  });
};

function makeMap(cData){
  const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
  const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
  
  fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
  {
    const maxVal = Math.max(...countries.features.map(getVal));
    colorScale.domain([0, maxVal]);