All Projects → vibbits → phyd3

vibbits / phyd3

Licence: MIT license
Phylogenetic tree viewer based on D3.js

Programming Languages

javascript
184084 projects - #8 most used programming language
PHP
23972 projects - #3 most used programming language
HTML
75241 projects
CSS
56736 projects
typescript
32286 projects

Projects that are alternatives of or similar to phyd3

biodiverse
A tool for the spatial analysis of diversity
Stars: ✭ 63 (+34.04%)
Mutual labels:  phylogenetic-trees
ddplot
Create D3 based SVG graphics easily from R
Stars: ✭ 43 (-8.51%)
Mutual labels:  d3js
mastering-d3
Code examples for the book Mastering D3.js, published in August 2014 by Packt Publishing.
Stars: ✭ 56 (+19.15%)
Mutual labels:  d3js
get phylomarkers
A pipeline to select optimal markers for microbial phylogenomics and species tree estimation using coalescent and concatenation approaches
Stars: ✭ 34 (-27.66%)
Mutual labels:  phylogenetic-trees
PhyloTrees.jl
Phylogenetic trees in Julia
Stars: ✭ 15 (-68.09%)
Mutual labels:  phylogenetic-trees
react-native-d3multiline-chart
Animated Android and iOS multiline/line/scatterPoint chart based on d3.js 🤘😎🤘
Stars: ✭ 43 (-8.51%)
Mutual labels:  d3js
Graphql Rover
🚀 GraphQL + Vue.js + D3.js schema viewer, powered by introspection.
Stars: ✭ 239 (+408.51%)
Mutual labels:  d3js
visual-explain
explain the mechanism visually
Stars: ✭ 26 (-44.68%)
Mutual labels:  d3js
archaeopteryx-js
Archaeopteryx.js is a software tool for the visualization and analysis of highly annotated phylogenetic trees.
Stars: ✭ 27 (-42.55%)
Mutual labels:  phylogenetic-trees
kapsule
Kapsule - A closure based Web Component library
Stars: ✭ 43 (-8.51%)
Mutual labels:  d3js
graphlan
High-quality circular representations of taxonomic and phylogenetic trees
Stars: ✭ 45 (-4.26%)
Mutual labels:  phylogenetic-trees
revolver
REVOLVER - Repeated Evolution in Cancer
Stars: ✭ 52 (+10.64%)
Mutual labels:  phylogenetic-trees
effectiveweb.training
Repository for Effective Web Online Course / airhacks.io
Stars: ✭ 17 (-63.83%)
Mutual labels:  d3js
treeio
🌱 Base Classes and Functions for Phylogenetic Tree Input and Output
Stars: ✭ 70 (+48.94%)
Mutual labels:  phylogenetic-trees
icicle-chart
A partition / icicle interactive chart web component for visualizing hierarchical data
Stars: ✭ 27 (-42.55%)
Mutual labels:  d3js
Gtr Cof
Interactive music theory dashboard for guitarists. http://guitardashboard.com/
Stars: ✭ 244 (+419.15%)
Mutual labels:  d3js
pyCircos
python Circos
Stars: ✭ 233 (+395.74%)
Mutual labels:  phylogenetic-trees
you-draw-it
Datenjournalismus: Nutzer können schätzen, wie sich Statistiken verändert haben und ihre Einschätzung danach überprüfen.
Stars: ✭ 24 (-48.94%)
Mutual labels:  d3js
graphPlayground
Create graphs by adding your vertices and edges and see them react!! 🎨
Stars: ✭ 32 (-31.91%)
Mutual labels:  d3js
Middleman-NPM
Middleman is an intuitive Express performance monitor for all your middleware 🎉
Stars: ✭ 13 (-72.34%)
Mutual labels:  d3js

PhyD3

A phylogenetic tree viewer.

Installation

Using npm:

npm install @vibbioinfocore/phyd3

Using yarn:

yarn add @vibbioinfocore/phyd3

Usage

import { 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 document

Options

Parsing

PhyD3 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>}

Citation

When using PhyD3, please cite:

Kreft, L; Botzki, A; Coppens, F; Vandepoele, K; Van Bel, M

"PhyD3: a phylogenetic tree viewer with extended phyloXML support for functional genomics data visualization"

Bioinformatics (2017) PMID 28525531 doi:10.1093/bioinformatics/btx324.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].