Make tidy gene tables with MyGene.info and Tabulator

2019-07-10

Let's use the MyGene.info API with the Tabulator JavaScript library by Oli Folkerd to create a simple web page for making tidy tables with information about genes. See how it works below, download the code, and try it yourself.

🐎 In action

Here is an animation that shows what this code can do:

mygene.info with tabulator.js

💾 Download the code

Download the code and try it out yourself:

Open the HTML file in your favorite web browser, and it should work.

⚡ Try it here

See if the MyGene.info service or Ensembl API can guess the Entrez IDs or Ensembl IDs that match your query.

You can also try this as a standalone HTML page.


<!doctype html>

Quick gene lookup
    <button id="button-search" type="button" class="btn btn-primary mt-2">Search</button>

  </div>
</div>
<div class="col-12 col-md-9 themed-grid-col">

  <label class="mr-sm-2" for="select-api">Choose an API:</label>
  <select class="custom-select mr-sm-2" id="select-api">
    <option value="ensembl">Ensembl</option>
    <option value="mygene" selected>MyGene.info</option>
  </select>

  <div id="example-table" class="mt-3"></div>

    <div class="progress mt-2">
      <div id="progress-api" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

  <div id="state" class="alert mt-2 mb-2"></div>

  <button id="download-tsv" type="button" class="btn btn-primary">Download TSV</button>

  <!-- <button id="button-refresh" type="button" class="btn m-2 btn-secondary">Refresh</button> -->

</div>