Archaeopteryx NPM

Archaeopteryx.js

Archaeopteryx.js is a software tool for the visualization and analysis of highly annotated phylogenetic trees.

Dependencies

Archaeopteryx.js has the following dependencies:

forester.js: https://www.npmjs.com/package/archaeopteryx
phyloxml.js: https://www.npmjs.com/package/phyloxml
d3.js (version 3): https://www.npmjs.com/package/d3/v/3.5.17
jQuery (1.12.4): https://www.npmjs.com/package/jquery/v/1.12.4
jQuery UI (1.12.1): https://www.npmjs.com/package/jquery-ui/v/1.12.1
sax.js (1.2.4): https://www.npmjs.com/package/sax/v/1.2.4

For file (Newick/New Hampshire, phyloXML) and graphics (PNG, SVG) download/export, the following five libraries are required as well:

canvg: https://www.npmjs.com/package/canvg
rgbcolor: https://www.npmjs.com/package/rgbcolor
Blob.js: https://github.com/eligrey/Blob.js
canvas-toBlob.js (needed in some versions of Internet Explorer and Opera): https://github.com/eligrey/canvas-toBlob.js
FileSaver.js: https://github.com/eligrey/FileSaver.js

Additionally, Archaeopteryx.js also requires the following CSS:

jquery-ui.css: https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css

Basic Example of HTML for launching Archaeopteryx.js

Example of HTML page to launch a basic Archaeopteryx.js instance:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
   <title>Archaeopteryx.js Basic Demo</title>

   <!-- For MS IE/Edge compatibility:-->
   <meta http-equiv="X-UA-Compatible" content="IE=100">

   <!-- D3.js, jQuery, and jQuery UI:-->
   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

   <!-- SAX XML parser:-->
   <script src="http://www.phyloxml.org/js/dependencies/sax.js"></script>

   <!-- Archaeopteryx.js requires forester.js and phyloxml.js:-->
   <script src="http://path/to/phyloxml.js"></script>
   <script src="http://path/to/forester.js"></script>
   <script src="http://path/to/archaeopteryx.js"></script>

   <!-- CSS for jQuery UI: -->
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

   <script>
       function load() {
           var options = {};
           options.backgroundColorDefault = '#f0f0f0';
           var settings = {};
           var loc = 'https://raw.githubusercontent.com/cmzmasek/archaeopteryx-js/master/test/data/phyloxml_trees/apaf.xml';

           jQuery.get(loc,
                   function (data) {
                       var tree = null;
                       try {
                           tree = archaeopteryx.parseTree(loc, data, true, false);
                       }
                       catch (e) {
                           alert("error while parsing tree: " + e);
                       }
                       if (tree) {
                           try {
                               archaeopteryx.launch('#phylogram1', tree, options, settings);
                           }
                           catch (e) {
                               alert("error while launching archaeopteryx: " + e);
                           }
                       }
                   },
                   "text")
                   .fail(function () {
                               alert("error: failed to read tree(s) from \"" + loc + "\"");
                           }
                   );
       }
   </script>
</head>

<body onload="load()">
<div>
   <h2>Archaeopteryx.js Basic Demo</h2>
   <div id='phylogram1'></div>
   <div id='controls0' class='ui-widget-content'></div>
</div>
</body>

forester.js

forester.js is a general suite for dealing with phylogenetic trees.

forester.js Example

This basic example shows how to parse a New Hampshire formatted String into to a object representing a phylogenetic tree. Followed by pre- and post-order traversal, and writing back to a New Hampshire formatted String.

Change './forester' to 'forester' if you use this code outside of this package

var forester = require('./forester').forester;

var newHampshireFormattedString = "(((a:1,b:1,c:1)N:2,(d:1,e:1)M:4)O:4,f:1)R:1;";
var phylogeneticTree = forester.parseNewHampshire(newHampshireFormattedString);

console.log('Pre-order traversal:');
forester.preOrderTraversalAll(forester.getTreeRoot(phylogeneticTree), function (n) {
    console.log(n.name + ':' + n.branch_length);
});

console.log('Post-order traversal:');
forester.postOrderTraversalAll(forester.getTreeRoot(phylogeneticTree), function (n) {
    console.log(n.name + ':' + n.branch_length);
});

console.log('In New Hampshire format:');
var nh = forester.toNewHampshire(phylogeneticTree);
console.log(nh);

Expected output:

Pre-order traversal:
R:1
f:1
O:4
M:4
e:1
d:1
N:2
c:1
b:1
a:1
Post-order traversal:
a:1
b:1
c:1
N:2
d:1
e:1
M:4
O:4
f:1
R:1
In New Hampshire format:
(((a:1,b:1,c:1)N:2,(d:1,e:1)M:4)O:4,f:1)R:1;

archaeopteryx phyloXML evolution phylogenetics visualization

phyloxml d3 jquery jquery-ui canvg rgbcolor Blob.js canvas-toBlob.js file-saver

@everything-registry/sub-chunk-1160

1.8.1

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago