Skip to content


Switch branches/tags
This branch is 2 commits ahead of wdingx:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Pan-genome analysis and visualization

Even closely related bacterial genomes can differ in the presence of hundreds of genes and individual genes can be horizontally acquired from distant strains and species. This mix of inheritance patterns complicates phylogenetic analysis of bacteria.

Although several software packages are available for pan-genome analysis, yet visualization, interpretation and exploration of pan-genomes remains challenging. panX (Pan-genome Analysis and Exploration) aims at facilitating pan-genome research with an easy-to-use and interactive platform for analyzing and exploring pan-genomic data.

panX displays the pan-genome using interconnected visual components including gene cluster table, multiple alignment, comparative phylogenetic tree viewers and strain metadata table. The pan-genome data structures are prepared by our pan-genome-analysis analysis pipeline, which efficiently identifies orthologous clusters from large sets of genome sequences and pre-computes alignments, trees, and plenty of informative statistics. panX is available at

Start the visualization

Clone the repository

git clone
cd pan-genome-visualization
git submodule update --init

Install npm packages and start the server:

npm install
npm start

check http://localhost:8000/ in browser (One might need to upgrade the outdated browser.) If npm can not start, please make sure that nodejs is updated.

The example page shows the beauty and power of the panX visualization and exploration, even though only a few species and some of their gene clusters are showcased in the repository. Complete pan-genomes are exhibited at


based on post-vaccine epidemiology of 616 S. pneumoniae strains (Croucher et al. 2015)


Add your own data

Add your own page in the local server (

Using standard layout (gene cluster table and alignment on the same row):

bash your_species

Using wide layout (gene cluster table for one row and alignment at the bottom):

bash your_species wide

Send your own data to the local server

After finishing the pan-genome-analysis pipeline, please use the script to transfer your data to the local server.

./ -s E_coli -v /usr/pan-genome-visualization

Restart your server and enjoy your own interactive pan-genome dashboard!

Visualize associations

Special feature: visualize branch association(BA) and presence/absence(PA) association

Once BA and PA with metadata (e.g. drug concentration) are calculated in panX analysis pipeline, users can create their custom pages to flexibly visualize branch associations.

Example on how the page should be customized for BA and PA association:

add this line and corresponding file (modify "yourSpecies")


Example for newColumnConfig.js

Pipeline overview:


panX analysis pipeline is based on DIAMOND, MCL and post-processing to determine clusters of orthologous genes from a collection of annotated genomes. panX generates a strain/species tree based on core genome SNPs and a gene tree for each gene cluster.

panX interactive visualization: (1) The dynamic pan-genome statistical charts allow rapid filtering and selection of gene subsets in cluster table;

clicking a gene cluster in cluster table loads (2) related alignment, (3) individual gene tree and (4) gene presence/absence and gain/loss pattern on strain/species tree;

(5) Selecting sequences in alignment highlights associated strains on strain/species tree;

(6) (7) Strain/species tree interacts with gene tree in various ways;

(8) Zooming into a clade on strain/species tree screens strains in metadata table;

(9) Searching in metadata table display strains pertinent to specific meta-information.


  • Is my dataset publicly available or does it remains private?
    The panX visualization application can either be hosted on a web server or used locally to explore custom pan-genomes produced by the panX analysis pipeline. If you run it locally and access it via http://localhost:8000 , only you can see it. If you want to make your data publicly available, you can host it on a web server.

  • How can I host panX visualization application on my own server?
    Here is a tutorial for hosting and deploying Node.js application on Ubuntu:

  • How to use a different port than 8000?
    Open the file ./bin/www, go to the line var port = normalizePort(process.env.PORT || '8000'); and change '8000' to '3000'.
    Then, check http://localhost:3000

  • I pushed the panX analysis result to the visualization repository, but can not find my own data?
    After sending your data to the local server and adding your own page in the local server, one can access it via http://localhost:8000/my_species.
    The visualization repository only shows the test datasets in the dropdown menu for "species selection". After changing the configuration file species-list-info.js, the new species can be added to the drop-down menu.

  • Strange errors when using dots in the species/dataset name (e.g.: localhost:8000/E.coli)
    Dots are often used to separate the parts of the domain name. So, please use "_" (underscore) for the species/dataset name within the url.
    E.g.: http://localhost:8000/E_coli instead of http://localhost:8000/E.coli


Visualization of the pan-genome output by panX







No releases published


No packages published


  • JavaScript 60.7%
  • Pug 26.4%
  • CSS 11.4%
  • Python 1.3%
  • Shell 0.2%