A phylogenetic tree viewer.
Using npm:
npm install @vibbioinfocore/phyd3Using yarn:
yarn add @vibbioinfocore/phyd3import { makeCompatTable, phyloxml } from "@vibbioinfocore/phyd3-parser-compat";
import { build } from "@vibbioinfocore/phyd3";
const xml = "<phyloxml><phylogeny rooted='true'><clade><name>A</name></clade></phylogeny></phyloxml>";
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "text/xml");
const svg = build(makeCompatTable(phyloxml.parse(doc)));
// insert svg.node() somewhere in your documentPhyD3 does not perform any parsing. You can use a compatible parser such as Phylio or phyd3-parser-compat or use any another parser. If you use another parser you will have to transform the result into a structure that PhyD3 expects. This is described below. As an example, see phyd3-parser-compat/makeCompatTable().
{
"metadata": Array<Metadata>, // A metadata structure for each phylogeny (there may only be one)
"nodes": Array<Node>, // All nodes in all phylogenies
"edges": Array<Edge> // All edges between nodes (this will form a disconnected graph)
}This is what a metadata structure looks like:
{
name: string | undefined, // The name of this phylogeny
description: string | undefined, // A description of this phylogeny
parent: number, // The unique numeric identifier of the root node for this phylogeny
rooted: boolean // Whether this phylogeny is rooted or not
}An edge looks like this:
{
source: number, // The unique identifier of the starting node for this edge
sink: number, // The unique numeric identifier of the ending node for this edge
length: number // The length of the edge
}And finally, this is a node.
{
name: string,
event: "Clade" | "Taxa" | "Hybrid" | "LateralGeneTransfer" | "Recombination",
ref: number, // The unique identifier for this node
attributes: Map<string, Attribute> // A set of attributes
}Attributes may either be scalar values, lists, or sub-mappings:
type Attribute
= {tag: "numeric", value: number}
| {tag: "text", value: string}
| {tag: "bool", value: boolean}
| {tag: "list", value: Array<Attribute>}
| {tag: "mapping", value: Map<string, Attribute>}When using PhyD3, please cite:
Kreft, L; Botzki, A; Coppens, F; Vandepoele, K; Van Bel, M
Bioinformatics (2017) PMID 28525531 doi:10.1093/bioinformatics/btx324.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent