# Krona Compare

*Cross-posted from my [NAO Notebook](https://data.securebio.org/jefftk-notebook/sample-vs-global-prevalence).*

When trying to understand how metagenomic samples differ I often want to drill down through the taxonomic hierarchy, comparing relative abundances. I've tried several tools for this, existing and custom, and haven't been all that happy with any. For most purposes, the tool I like most is [Krona](https://github.com/marbl/Krona/wiki), which shows an interactive chart. For example, here's Krona showing the results of running the NAO's [v1 metagenomic sequencing pipeline](https://github.com/naobservatory/mgs-pipeline) on the unenriched [Hyperion Treatment Plant](https://en.wikipedia.org/wiki/Hyperion_sewage_treatment_plant) samples from [Rothman et al. 2021](https://pubmed.ncbi.nlm.nih.gov/34550753/):

[![](https://www.jefftk.com/rothman-krona-htp-unenriched.png)](https://www.jefftk.com/rothman-krona-htp-unenriched-big.png)

  
([interactive version](https://www.jefftk.com/krona-rothman-htp))

What I often wish I had, however, are *linked* Krona charts, where I could see multiple samples at once, and drilling down in one sample showed the corresponding portion of the other samples. After failing to find something like this, I hacked something together by monkey-patching the output of Krona. Here's it comparing the samples from several wastewater treatment plants in the same study:

[![](https://www.jefftk.com/rothman-krona-combined.png)](https://www.jefftk.com/rothman-krona-combined-big.png)

When I click on "viruses" in any of the plots, all four zoom in on the viral fraction:

[![](https://www.jefftk.com/rothman-krona-viruses-combined.png)](https://www.jefftk.com/rothman-krona-viruses-combined-big.png)

That's a lot of [Tobamovirus](https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?mode=info&id=12234)!

I only just made this, so it's likely buggy, but if that doesn't put you off you're welcome to give it a try. The interactive version of the charts above is [here](https://www.jefftk.com/rothman-unenriched-krona-combined) (warning: 60MB) and the generation code is open source, [on github](https://github.com/naobservatory/krona-compare).

* * *

If you're interested in the technical details of how I made this:

*   It's a wrapper around the `ktImportTaxonomy` command from [KronaTools](https://github.com/marbl/Krona/wiki/KronaTools).
    
*   To get multiple charts on the same page, they're each in their own `iframe`, via `srcdoc`.
    
*   There is unfortunately no CSS way of saying "please lay out these rectangles to take up as much of the viewport as possible while maintaining an aspect ratio close to 1:1", so I use some awkward JS. It checks each possible number of columns and takes the one that maximizes the minimum dimension (width or height) of the charts. Luckily there are only a few options to consider.
    
*   So that the colors match between the charts, each chart on the page has the data from all the charts. I reach into each `iframe` to set the dataset dropdown's `selectedIndex` and call `onDatasetChange`. It's not ideal needing to duplicate the Krona output for each pane in the HTML source and then in the rendered DOMs, but I don't see another way to keep the colors matching.
    
*   To intercept navigation, the wrapper rewrites the KronaTools HTML output to hook `navigateForwd`, `navigateBack`, and, especially, `selectNode`. It inserts some code that reaches into all of the other `iframe`s on the page and navigates them equivalently.
    
*   Duplicating `selectNode` is a little tricky because normally it takes a `Node` as an argument, but that's not equivalent between charts. So I walk up to the root of the tree and then depth-first search until I find a node with a name matching the intended target.
    
*   It's all quite heavy, with the Rothman et al. (2021) screenshot above coming from a [60MB HTML file](https://www.jefftk.com/rothman-unenriched-krona-combined), but it's fast enough on my computer to be useful to me.