Links of interest

This includes general inspiration, useful resources, and a list of other tree-illustration tools for comparison.

General inspiration and background

Guidelines/challenges for preparing figures for print:

• http://www.sigmaplot.com/products/sigmaplot/productuses/prod-uses25.php
• http://cellbio.emory.edu/bnanes/figures/

Rendering options (from SVG to print, PNG, etc.) from StackOverflow:
http://stackoverflow.com/questions/12719486/d3-js-graphs-output-into-high-resolution-print-quality-files

More details on SVG metrics and reliable printing

How can we ensure that printed output exactly matches the desired dimensions, font sizes, etc.? It seems that SVG is well suited for this, but its units and dimensioning options are fairly complex.

• SVG coordinate system and units

• SVG and DPI, absolute units and user units

• Creating and scaling SVG for printer output

Example rulers for inches and mm:

• Conversion between the two

• Nice detailed rule for cm and mm

Handling external resources (images, fonts, etc)

• W3C guidelines and suggested practices for SVG print jobs. Includes some interesting uses of multipart and multiplex MIME for bundling multi-file illustrations.

• Detailed discussion of Adobe Illustrator's export options

• More discussion of Adobe's options re: fonts and images

• Best practices for SVG's g, use, defs, and symbol, including caveats for each. See also this related post regarding the lack of browser support in IE 9-11 for SVG's use element with an external file(!), and this update that promises support in Microsoft's new Edge browser.

• Adobe's free Edge Web Fonts might be useful

• Typical optimization choices for SVG (for web)

How can we offer ZIP versions of multi-file illustrations?

• Notes on zip-encoding SVGs for the web. N.B. this is apparently limited to single files, not folders/bundles. 😢

• Various options using git-archive, building ZIPs on commit, etc. (none really satisfactory)

• We could adapt this tiny JS tool; here's the source repo

• Actually, the simplest way looks like Python's shutil.make_archive function. We should be able to archive any illustration (subdirectory) from the API server's local illustrations-# repo, storing the result in a lazy cache (or possibly streaming it directly to the web response?).

Useful resources

See especially the list of Arbor components provided by Curt Lisle.

jsPhyloSVG

• uses (depends on?) phyloXML for customized styling
• uses RaphaelJS for rendering

Vega -- visualization grammar for D3

• helps to generalize and apply style/display settings?
  • online editor demonstrates some of this
• alternate rendering in Canvas (for older browsers)
• can store vega settings as JSON, replacing ‘data’ element
• N.B. the original Vega (v1) site is https://trifacta.github.io/vega/

Vincent

• build or manipulate models in Python, translate to Vega
• probably overkill for working with existing trees

d3po

• another toolkit for building interactive, publication-quality viz in d3
• d3po examples in an iPython notebook

sigma.js

• javascript library for interactive graph display
• probably too specialized for our purposes

react-cursor

• easy binding of web UI to a JSON state object
• apparently a javascript implementation of React/Om-style Cursor
• any compelling advantages versus KnockoutJS?

Other tools for tree viz and illustration

http://tree.bio.ed.ac.uk/software/figtree/ - FigTree

http://mesquiteproject.org/mesquite/mesquite.html - Mesquite

http://ape-package.ird.fr/ - APE in R

http://blog.phytools.org/ - phyTools in R

http://www.geneious.com/ - Genious

http://www.evolgenius.info/evolview/ - EVOLVIEW

http://www.atgc-montpellier.fr/compphy/ - CompPhy

https://github.com/hshyk/PhyloTiler - Phylotiler

https://bitbucket.org/nsegata/graphlan/wiki/Home - GraPhlAn

http://itol.embl.de/index.shtml - iTOL
Some good ideas (e.g., saved views). But uses Flash and appears to be proprietary.