How to use d3-fetch - 10 common examples

return () => {
          json(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      }

export function launchTopExpressed(tissueId, heatmapRootId, violinRootId, urls=getGtexUrls(), filterGenes=true){
    // getting the top expressed genes in tissueId
    const url = filterGenes?urls.topInTissueFiltered:urls.topInTissue;
    const $filterInfoDiv = $(`#filterInfo`).length==0?$('<div>').attr('id', 'filterInfo').appendTo('#messageBox'):$(`#filterInfo`);
    if(filterGenes) $filterInfoDiv.html("Mitochondrial genes are excluded.<br>");
    else $filterInfoDiv.html("Mitochondrial genes are included.<br>");

    json(url+ tissueId)
        .then(function(results){ // top 50 expressed genes in tissueId
            const attr = 'topExpressedGene';
            if(!results.hasOwnProperty(attr)){
                console.error(results);
                throw 'Parse Error: required json attribute is missing: ' + attr;
            }
            const topGeneList = results[attr].map((d)=&gt;{
                if(!d.hasOwnProperty('gencodeId')){
                    console.error(d);
                    throw 'Parse Error: required json attribute is missing: gencodeId';
                }
                return d.gencodeId
            });
            const callback = function(){
                _styleSelectedTissue(tissueId);
            };</div>

if (k=='buttons' || k=='svg') return;
        $(`<div id="${domIds[k]}">`).appendTo(`#${rootId}`);
    });
    const urls = getGtexUrls();
   // get some data
    let gencode = "";
    if (rootId == "oneGene"){
        gencode = "ENSG00000106624.4";
    } else if (rootId == "twoGenes") {
        gencode = "ENSG00000065613.9,ENSG00000106624.4";

    } else {
        gencode = "ENSG00000065613.9,ENSG00000106624.4,ENSG00000120885.15";
    }

    Promise.all([json(urls.tissue), json(urls.geneExp + gencode)])
        .then(function(args){
            const tissueTable = parseTissues(args[0]).reduce((arr,d)=&gt;{arr[d.tissueId]=d; return arr},{});
            const data = parseGeneExpressionForViolin(args[1], true, colors);
            const sort = (a, b)=&gt;{
                if (a&gt;b) return 1;
                if (a</div>

context.pop = withDebouncedSave(history.pop);
    context.overwrite = withDebouncedSave(history.overwrite);
    context.undo = withDebouncedSave(history.undo);
    context.redo = withDebouncedSave(history.redo);

    ui = uiInit(context);

    connection = services.osm;
    background = rendererBackground(context);
    features = rendererFeatures(context);
    photos = rendererPhotos(context);
    presets = presetIndex(context);

    if (services.maprules && utilStringQs(window.location.hash).maprules) {
        var maprules = utilStringQs(window.location.hash).maprules;
        d3_json(maprules)
            .then(function(mapcss) {
                services.maprules.init();
                mapcss.forEach(function(mapcssSelector) {
                    return services.maprules.addRule(mapcssSelector);
                });
            })
            .catch(function() {
                /* ignore */
            });
    }

    map = rendererMap(context);
    context.mouse = map.mouse;
    context.extent = map.extent;
    context.pan = map.pan;
    context.zoomIn = map.zoomIn;

return () => {
          tsv(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      } else if (data.includes('.json')) {

return () => {
          csv(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      } else if (data.includes('.tsv')) {

return () => {
          csv(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      } else if (data.includes('.tsv')) {

drawData.url = function(url, defaultExtension) {
        _template = null;
        _fileList = null;
        _geojson = null;
        _src = null;

        // strip off any querystring/hash from the url before checking extension
        var testUrl = url.split(/[?#]/)[0];
        var extension = getExtension(testUrl) || defaultExtension;
        if (extension) {
            _template = null;
            d3_text(url)
                .then(function(data) {
                    drawData.setFile(extension, data);
                })
                .catch(function() {
                    /* ignore */
                });

        } else {
            drawData.template(url);
        }

        return this;
    };

tiles.forEach(function(tile) {
            if (_krCache.loadedTile[tile.id] || _krCache.inflightTile[tile.id]) return;

            var rect = tile.extent.rectangle();
            var params = Object.assign({}, options, { left: rect[0], bottom: rect[3], right: rect[2], top: rect[1] });
            var url = _krUrlRoot + 'export.php?' + utilQsString(params) + '&ch=' + rules;

            var controller = new AbortController();
            _krCache.inflightTile[tile.id] = controller;

            d3_json(url, { signal: controller.signal })
                .then(function(data) {
                    delete _krCache.inflightTile[tile.id];
                    _krCache.loadedTile[tile.id] = true;
                    if (!data || !data.features || !data.features.length) {
                        throw new Error('No Data');
                    }

                    data.features.forEach(function(feature) {
                        var loc = feature.geometry.coordinates;
                        var props = feature.properties;

                        // if there is a parent, save its error type e.g.:
                        //  Error 191 = "highway-highway"
                        //  Error 190 = "intersections without junctions"  (parent)
                        var errorType = props.error_type;
                        var errorTemplate = errorTypes[errorType];

export function searchById(heatmapRootId, violinRootId, glist, tlist=undefined, urls=getGtexUrls(), filterGenes=undefined, callback=undefined, qTissue=undefined){
    $('#spinner').show();
    $(`#${heatmapRootId}`).empty(); // clear the root DOM content
    $(`#${violinRootId}`).empty(); // clear the root DOM content

    const MAX = 50;
    const $message = $('<div><br>').attr('class', 'col-xs-12 col-md-12').css('color', 'firebrick').appendTo(`#${heatmapRootId}`);
    let message = "";
    if (glist.length &gt; MAX) {
        message = `Warning: Too many genes. Input list truncated to the first ${MAX}. <br>`;
        glist = glist.slice(0, MAX);
    }
    Promise.all([json(urls.tissue), json(urls.geneId+glist.join(","))])
       .then(function(args){
           const tissues = parseTissues(args[0]);

           // genes
           const genes = parseGenes(args[1]);
           // error-checking
           message += _validateGenes(heatmapRootId, genes, glist);


           // get median expression data and clusters of the input genes in all tissues
           const gQuery = genes.map((g)=&gt;g.gencodeId).join(",");
           const tQuery = tlist===undefined?undefined:tlist.join(",");
           const fetchUrl = tQuery === undefined? urls.medGeneExp + "&amp;gencodeId=" + gQuery: urls.medGeneExp + "&amp;gencodeId=" + gQuery + "&amp;tissueSiteDetailId=" + tQuery;
           json(fetchUrl)
               .then(function(eData){
                   $('#spinner').hide();</div>