Easy way to automatically save images of Krona HTML charts?

Question

[steve]

Krona is a tool that can be used to make some very attractive interactive pie charts, which are useful for metagenomics visualization (example here)

I can easily generate the chart from properly formatted input (generated from Kraken) like this:

zcat file.fastq.gz | head -4000 | kraken --fastq-input /dev/fd/0 | cut -f2,3 > krona.input

ktImportTaxonomy krona.input -o krona.out.html

However I would like to also be able to automatically (programmatically) save this rendered chart as a static PNG, PDF, or similar image format. There does not seem to be any easy way to do this from within the program itself. Any ideas? Here is what I have tried; none of them render correctly, as you can see. Ideally there would be a solution that can be used in a script, running on a headless server.

Using PhantomJS

phantomjs rasterize.js krona.out.html krona_snap.png

Using webkit2png

webkit2png krona.out.html

[Damian Kao]

It looks like the snapshot button calls the snapshot() function js. I think you can get phantomjs to call a function after rendering (I think it was page.evaluate). Then you can probably save the snapshot which is just a svg to file.

[steve]

Great idea, I will look into this. However it appears that the default snapshot is in SVG format, which would then need to be converted to PNG (ideally), or PDF; I just tried using ImageMagick for this and it did not turn out well: Error message: convert: unable to read font '(null)' @ error/annotate.c/RenderFreetype/1239.

[Damian Kao]

I've found SVG to be a bit loose as a specification. Different programs can sometimes render differently. I think phantomjs should be able to handle it. So use phantomjs to render the svg and save the "page" as png. I've used phantomjs in the past on d3.js generated svgs successfully.

[steve]

Agreed, this was the solution I settled on. I used phantomjs, and passed it to an editted version of their rasterize.js script, where I changed it to page.viewportSize = { width: 1000, height: 1000 }; at line 15, and changed the timer value at line 46 from 200 to 1000. Results look much better now. Example: phantomjs rasterize_custom.js rdp.krona.html rdp.krona.png

Answer 1

[Josh Herr]

I agree with the above answers as different tools selectively parse SVG in various ways. I have had good luck with SVG Crowbar. I then take the SVG output and use Illustrator or Inkscape to modify for publication.