vibbits / phyd3 Goto Github PK

View Code? Open in Web Editor NEW

55.0 5.0 18.0 3.08 MB

Phylogenetic tree viewer based on D3.js

Home Page: https://phyd3.bioinformatics-core.sites.vib.be

License: MIT License

CSS 4.49% HTML 15.05% JavaScript 56.72% PHP 21.91% TypeScript 1.82%

visualization d3js phylogenetic-trees

phyd3's Introduction

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.

phyd3's People

Contributors

Stargazers

Watchers

Forkers

nvazquezg lingulist inambioinfo baohongz mooreryan clairedunican yongwangcph fredericbga ralphmarshall poeli nadia-el hlkfoz goodstudychina rnaimehaom kkpan11 genostack jiangchb risingsatalite

phyd3's Issues

Optionally display a tree scale at the top or bottom of the figure

Option to set color for NaN

In the heatmap if have a number of missing values, which result into blanks in the pyloxml file. These are now rendered as black cells in the heatmap. Is there a way to specify the color for undefined values or could this be implemented. A complete blank area (no border) would be even better to visually distinguish between cells with and without a value.

       <values for="128431">
          <value>0.6519588984865536</value>
          <value>0.4649132014791207</value>
          <value>0.3776271345321803</value>
          <value></value>
          <value>1.0</value>
          <value></value>
        </values>

Potential features

See: https://4va.github.io/biodatasci/r-ggtree.html

Domain cut in SVG

Hi,

First thank for this pretty scalable tool in D3.

At the load of the graph the domains are cut like that...

...

Of course in the page it's not a problem (you can move the graph as you want) but it is one for the export in svg or png format.

HTML code

    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <link rel="stylesheet" href="{% static 'css/phyd3/phyd3.min.css' %}" />
        <script src="{% static 'js/phyd3/phyd3.min.js' %}"></script>


        <script>

               var opts = {
               domainWidth:20,
                    margin:20,
                    dynamicHide: true,
                    height: 2000,
                    invertColors: false,
                    lineupNodes: true,
                    showDomains: true,
                    showDomainNames: false,
                    showDomainColors: true,
                    showGraphs: true,
                    showGraphLegend: true,
                    showSupportValues: false,
                    maxDecimalsSupportValues: 1,
                    showLengthValues: false,
                    maxDecimalsLengthValues: 3,
                    showLength: false,
                    showNodeNames: true,
                    showNodesType: "all",
                    showPhylogram: false,
                    showTaxonomy: true,
                    showFullTaxonomy: true,
                    showSequences: false,
                    showTaxonomyColors: true,
                    backgroundColor: "#f5f5f5",
                    foregroundColor: "#000000",
                };


                function load() {
                    d3.xml("{% static 'test.xml' %}", function(xml) {
                        var tree = phyd3.phyloxml.parse(xml);
                        phyd3.phylogram.build("#phyd3", tree, opts);
                    });
                };
        </script>
    </head>

    <body onload="load()">



<div id="phyd3">
        </div>


           <div class="row">
                Download as:
                <button class="btn btn-primary" id="linkSVG">SVG</button>
                <button class="btn btn-primary" id="linkPNG">PNG</button>
                <a href="submissions/91162629d258a876ee994e9233b2ad87" class="btn btn-primary" id="linkXML" download >XML</a>
            </div>

    </body>

Thank in advance for any help.

Users should optionally have full control over node drawing and access to node data fields

Each node contains metadata fields parsed from the serialised input. All of these fields should be made available to a render() function and the user should be able to provide a render() function.

An example use case:

User wishes to specify a URL in leaves to be rendered as a link.

Cannot set color of clade in phyloXML files

I am using phyd3 javascript lib to display files in phyloXML format. I would like to color clades in specific colors and I use the color tag according to phyloXML documentation, E.g.

<phyloxml>
  <phylogeny rooted="true">
    <clade>
      <name>N95</name>
      <branch_length>0.0483218</branch_length>
      <color>
        <red>0</red>
        <green>0</green>
        <blue>255</blue>
      </color>
    </clade>
  </phylogeny>
</phyloxml>

The clade does not get colored blue.

I also tried modifying the tag to <color type="rgb" property="clade">

Notes by @MaybeJustJames
I tried several combinations of this on https://phyd3.bits.vib.be. The colour node is parsed correctly but the colour of nodes in the resulting SVG are not set. From the documentation here only colouring of domains and taxonomies.

Custom markers for tree labels

Use case:

Many users also ask for tree labels being printed in italics and to add the letter "T" in superscript after certain species names if these are so called type strains. Would such formatting be possible and what would be the easiest way to accomplish this?

There should be a generic mechanism to achieve this and other customisations.

npm install phyd3

The instruction can be found at: https://www.npmjs.com/package/phyd3

update jquery script

jquery-2.2.4.min.js not found